Chart.js 2.0 introduces the concept of controllers for each dataset, providing developers with enhanced flexibility and customization options. Controllers allow you to define and extend chart types to suit your specific needs.
Syntax:
class CustomController extends Chart.controllers.controllertype {
}
Chart.register(CustomController);
new Chart(ctx, {
type: 'CustomController',
data: data,
options: options
});
Chart.js New Charts
- Dataset Controller Interface: A dataset controller in Chart.js is a JavaScript class that manages the rendering and behavior of a specific type of dataset.
- Extending Existing Chart Types: We can extend or replace an existing controller type. Chart.js comes with a variety of built-in controller types, each designed to handle specific chart types. e.g. BarController, BubbleController, etc.
- Typescript Typing: If you want your new chart type to be statically typed, you must provide a “.d.ts” TypeScript declaration file.
Example 1: In this example, we are showing Bar Controller.
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>Custom Bar Chart</title>
<script src=
</script>
</head>
<body>
<canvas id="myBarChart"
width="550px" height="550px">
</canvas>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',
function () {
class CustomBarController extends Chart.controllers.bar {
draw() {
super.draw(arguments);
const meta = this.getMeta();
const ctx = this.chart.ctx;
meta.data.forEach((bar) => {
const { x, y, width, height } =
bar.getProps(['x', 'y', 'width', 'height']);
ctx.save();
ctx.strokeStyle = 'red';
ctx.lineWidth = 1;
ctx.strokeRect(x, y, width, height);
ctx.restore();
});
}
}
CustomBarController.id = 'customBar';
CustomBarController.defaults =
Chart.controllers.bar.defaults;
// Register the custom controller
Chart.register(CustomBarController);
const data = {
labels: ['A', 'B', 'C', 'D', 'E'],
datasets: [{
label: 'Custom Bar Chart',
data: [3, 5, 2, 8, 1],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 2
}]
};
// Chart options
const options = {
scales: {
x: {
type: 'category',
labels: ['A', 'B', 'C', 'D', 'E']
},
y: {
type: 'linear',
position: 'left'
}
}
};
// Create and use the custom chart type
const ctx = document
.getElementById('myBarChart').getContext('2d');
new Chart(ctx, {
type: 'customBar',
data: data,
options: options
});
});
</script>
</body>
</html>
|
Output:
Example 2: In this example, we are showing Radar Controller.
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>Custom Radar Chart</title>
<script src=
</script>
</head>
<body>
<canvas id="myCustomRadarChart"
width="400px" height="400px">
</canvas>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',
function () {
class CustomRadarController extends
Chart.controllers.radar {
draw() {
super.draw(arguments);
const meta = this.getMeta();
const ctx = this.chart.ctx;
meta.data.forEach((point) => {
const { x, y } = point.getProps(['x', 'y']);
const { pointStyle, radius }
= point.options;
ctx.save();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 1;
if (pointStyle === 'circle') {
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.closePath();
ctx.stroke();
} else {
ctx.strokeRect(x - radius,
y - radius, 2 * radius, 2 * radius);
}
ctx.restore();
});
}
}
CustomRadarController.id = 'customRadar';
CustomRadarController.defaults = Chart.
controllers.radar.defaults;
Chart.register(CustomRadarController);
const data = {
labels: ['Category 1', 'Category 2',
'Category 3', 'Category 4', 'Category 5'],
datasets: [{
label: 'Custom Radar Chart',
data: [3, 5, 2, 8, 1],
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(75, 192, 192, 1)',
pointStyle: 'circle',
pointRadius: 5
}]
};
const options = {};
const ctx = document
.getElementById('myCustomRadarChart').getContext('2d');
new Chart(ctx, {
type: 'customRadar',
data: data,
options: options
});
});
</script>
</body>
</html>
|
Output:
Recommended Articles