Chart.js Plugins Developer
Last Updated :
26 Dec, 2023
In Chart.js plugins play a crucial role in customizing and extending the default behavior of charts. Developers can use plugins to add custom interactions, tooltips, animations, and more. Plugins are a powerful way to extend Chart.js beyond its default capabilities. The plugin system provides hooks at various stages of chart rendering, such as “beforeDraw”, “afterDraw”, “beforeUpdate”.
Syntax:
Global plugin: Global plugins in Chart.js allow developers to apply custom functionalities or modifications that are to all the charts on a page.
Chart.plugins.register({
{/* hooks */}: function(chartInstance) {
// Custom logic before drawing the chart
}
});
Per-Chart Plugins: This allows developers to apply plugins or options to specific chart instances.
const plugin = { /* plugin implementation */ };
const chart1 = new Chart(ctx, {
plugins: [plugin]
});
const chart2 = new Chart(ctx, {
plugins: [plugin]
});
Plugin ID and Naming Conventions
When creating a Chart.js plugin, it is essential to define a unique ID for the plugin. This ID should follow specific naming conventions:
Naming Restrictions:
- The ID can’t start with a dot or an underscore.
- It can’t contain any non-URL-safe characters.
- Uppercase letters are not allowed.
- The ID should be reasonably descriptive and short.
Plugin options
Once the plugin ID is defined, its options can be configured within the options.plugins configuration section.
const chart = new Chart(ctx, {
options: {
foo: { ... }, // Chart.js 'foo' option
plugins: {
pluginID: {
foo: { ... }, // Plugin 'foo' option
bar: { ... } // Plugin 'bar' option
}
}
}
});
Here, we have a Chart.js chart with two plugins, each identified by a unique plugin ID (“pluginID”, “anotherPluginID”). The options for each plugin are scoped under “options.plugins.{pluginID}”.
Example 1: A bar chart is created, displaying data with labels on the y-axis and custom colors for each bar. A custom plugin, labelPlugin, is defined to display the y-coordinate values on top of each bar after the chart is drawn.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Bar Chart with Custom Plugin Example</title>
<script src=
</script>
</head>
<body>
<canvas id="barChart" width="400" height="200">
</canvas>
<script>
let ctxBar = document.getElementById('barChart').getContext('2d');
// Sample data for the bar chart
let dataBar = {
labels: ['Category 1',
'Category 2',
'Category 3',
'Category 4',
'Category 5'],
datasets: [{
label: 'Data Set 1',
data: [10, 20, 30, 40, 50],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
};
const labelPlugin = {
afterDatasetsDraw: function (chart) {
let ctx = chart.ctx;
let meta = chart.getDatasetMeta(0);
let barValues = meta.data.map(function (bar) {
return bar._model.y;
});
ctx.save();
ctx.fillStyle = 'black';
ctx.font = '12px Arial';
ctx.textAlign = 'center';
meta.data.forEach(function (bar, index) {
ctx.fillText(barValues[index],
bar._model.x,
barValues[index] - 5);
});
ctx.restore();
}
};
let barChart = new Chart(ctxBar, {
type: 'bar',
data: dataBar,
options: {
plugins: [labelPlugin],
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
|
Output:
.png)
Example 2: The code creates a line chart using, representing sales data over months. A custom plugin is added to draw a horizontal red threshold line at value 70 on the chart.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Line Chart with Custom Plugin Example</title>
<script src=
</script>
</head>
<body>
<canvas id="lineChart" width="400" height="200">
</canvas>
<script>
let ctxLine =
document.getElementById('lineChart').getContext('2d');
// Sample data for the line chart
let dataLine = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Sales',
data: [50, 65, 80, 81, 95],
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 2,
fill: false
}]
};
// Define a custom plugin for
// drawing a horizontal line at a specified threshold
const thresholdPlugin = {
afterDatasetsDraw: function (chart) {
let ctx = chart.ctx;
let yScale = chart.scales.y;
ctx.save();
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.beginPath();
let thresholdValue = 70; // Set the threshold value
let yPos = yScale.getPixelForValue(thresholdValue);
ctx.moveTo(chart.chartArea.left, yPos);
ctx.lineTo(chart.chartArea.right, yPos);
ctx.stroke();
ctx.restore();
}
};
// Create the line chart with the custom threshold plugin
let lineChart = new Chart(ctxLine, {
type: 'line',
data: dataLine,
options: {
plugins: [thresholdPlugin],
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
|
Output:
.png)
Share your thoughts in the comments
Please Login to comment...