Chart.js Plugins Developer
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 = "https://cdn.jsdelivr.net/npm/chart.js" > </ 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:
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 = "https://cdn.jsdelivr.net/npm/chart.js" > </ 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: