Legend position example code
Example showing how to dynamically change legend position: chart.options.plugins.legend.position = 'top'; chart.update(); This pattern works for 'top', 'right', 'bottom', and 'left' positions.
plugins
175 notes in this subject, read out of this brain and free to use. This is page 3 of 3.
Legend title display option
The legend title can be displayed by setting the display property to true within the title configuration object. A custom title text can be set using the text property.
Legend title position option values
The legend title position option accepts the values 'start', 'center', and 'end'. The default value is 'center'. These control the alignment of the legend title text.
Legend align option values
The legend align option accepts the values 'start', 'center', and 'end'. These control the horizontal alignment of the legend within the chart.
Configure legend title example
To configure a legend with a title, set options.plugins.legend.title.display to true and options.plugins.legend.title.text to the desired title string. For example: {type: 'line', options: {plugins: {legend: {title: {display: true, text: 'Legend Title'}}}}}
Pie chart legend label properties customizable in generateLabels
Within a legend generateLabels function, label properties that can be customized include datasetIndex, hidden, and fillStyle. The datasetIndex property can be set to map legend items to specific datasets, the hidden property controls visibility, and fillStyle controls the color displayed.
Chart.overrides.pie.plugins.legend.labels.generateLabels default function
Chart.overrides.pie.plugins.legend.labels.generateLabels provides the default label generation function for pie charts. It can be called via the original function reference to get default labels, which can then be modified before returning.
Plugin configuration access in hooks
Plugin hook functions receive an options parameter containing the plugin configuration from the chart's plugins object. Custom plugin options defined in the chart config under plugins[pluginId] are passed to the hook as the options argument.
Chart area border plugin example
A plugin that draws a border around the chart area can be implemented by defining a plugin object with an id and a beforeDraw hook. The hook receives the chart instance, args, and options. It accesses the chart context and chartArea properties (left, top, width, height) to draw a rectangle around the chart area using ctx.strokeRect(). The plugin configuration accepts borderColor, borderWidth, borderDash, and borderDashOffset options that control the appearance of the border.
Plugin beforeDraw hook chart area properties
The beforeDraw hook receives chart.chartArea as an object containing left, top, width, and height properties that define the rectangular area where the chart is drawn. These can be used to draw elements that reference the chart area boundaries.
Canvas context stroke methods for plugin drawing
Plugins can use canvas context methods including ctx.strokeRect() to draw rectangular outlines, ctx.setLineDash() to set dash patterns, and ctx.lineDashOffset to offset the dash pattern. Properties like ctx.strokeStyle and ctx.lineWidth control the appearance. ctx.save() and ctx.restore() preserve and restore the canvas state.
Plugin beforeDraw hook with chart context and dimensions
The beforeDraw hook receives the chart object, from which you can destructure ctx (canvas context), chartArea (with properties left, top, right, bottom), and scales. The chartArea bounds define the drawable area of the chart, and scales provide methods like getPixelForValue(value) to convert data values to pixel coordinates.
Quadrants plugin example with scatter chart
A complete plugin example named 'quadrants' that draws colored rectangles in the four quadrants of a scatter chart. The plugin uses the beforeDraw hook to access the chart context, chart area bounds (left, top, right, bottom), and x and y scales. It calculates the midpoint pixels where the axes cross zero using x.getPixelForValue(0) and y.getPixelForValue(0), then fills each quadrant with colors from the plugin options (topLeft, topRight, bottomRight, bottomLeft). The plugin is registered in the plugins array and configured via options.plugins.quadrants with color values.
Plugin detection of empty datasets
To detect if a doughnut chart has no data, iterate through all datasets and check if any dataset has a non-empty data array. If all datasets have data.length === 0, the chart is considered empty and can trigger a visual indicator.
Doughnut empty state plugin example
A plugin named 'emptyDoughnut' can detect when a doughnut chart has no data and draw a visual placeholder. The plugin uses the afterDraw hook to check if all datasets are empty, then draws a circle using canvas drawing methods. The plugin accepts three configuration options: color (stroke color, default 'rgba(255, 128, 0, 0.5)'), width (stroke width, default 2), and radiusDecrease (amount to reduce the radius, default 0). The circle is centered on the chart's center point and sized to fit the chart area. The plugin is registered by adding it to the plugins array in the chart configuration, and its options are set via the plugins configuration object using the plugin id as the key.
afterDraw plugin hook signature
The afterDraw plugin hook receives three parameters: chart, args, and options. The chart parameter contains the chart instance with properties like data (containing datasets), chartArea (containing left, top, right, bottom coordinates), and ctx (the canvas 2D context). The args parameter is not used in this example. The options parameter contains the plugin's configuration options passed via the plugins configuration object.
Drawing circle on canvas in plugin
To draw a circle on the chart canvas, access the canvas 2D context via chart.ctx, then use ctx.beginPath(), set ctx.lineWidth for stroke width, set ctx.strokeStyle for stroke color, use ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI) to define the circle, and finally ctx.stroke() to render it.
Chart.plugins replaced with Chart.registry in v3
In Chart.js 3.x, `Chart.plugins` was replaced with `Chart.registry`. Plugin defaults are now in `Chart.defaults.plugins[id]`.
Plugin event hook changes in v3
In Chart.js 3.x, `afterEvent` and `beforeEvent` now receive a wrapped `event` as the `event` property of the second argument. The native event is available via `args.event.native`.
Plugin resize and afterEvent changes in v3
In Chart.js 3.x, the initial `resize` is no longer silent, meaning that `resize` event can fire between `beforeInit` and `afterInit`. The `afterEvent` hook should notify about changes that need a render by setting `args.changed` to true.
Plugin update hook signatures changed in v3
In Chart.js 3.x, `afterDatasetsUpdate`, `afterUpdate`, `beforeDatasetsUpdate`, and `beforeUpdate` now receive `args` object as second argument. The `options` argument is always last and was moved from 2nd to 3rd place.
tooltips renamed to tooltip in v3
In Chart.js 3.x, the `tooltips` namespace was renamed to `tooltip` to match the plugin name.
legend, title, tooltip moved to plugins in v3
In Chart.js 3.x, the `legend`, `title`, and `tooltip` namespaces were moved from `options` to `options.plugins`.
tooltips.custom renamed to plugins.tooltip.external in v3
In Chart.js 3.x, the `tooltips.custom` callback was renamed to `plugins.tooltip.external`.
xLabel and yLabel removed from tooltip in v3
In Chart.js 3.x, the tooltip `xLabel` and `yLabel` properties were removed. Use `label` and `formattedValue` instead.
Tooltip filter callback signature changed in v3
In Chart.js 3.x, the tooltip `filter` option callback signature changed to `function(tooltipItem, index, tooltipItems, data)`.
Tooltip custom callback context changed in v3
In Chart.js 3.x, the tooltip `custom` callback now takes a context object that has `tooltip` and `chart` properties.
Tooltip options moved to options property in v3
In Chart.js 3.x, all properties of the tooltip model related to the tooltip options have been moved to reside within the `options` property.
Tooltip callbacks no longer receive data parameter in v3
In Chart.js 3.x, the tooltip callbacks no longer receive a `data` parameter. The tooltip item parameter contains the chart and dataset instead.
Tooltip item index renamed to dataIndex in v3
In Chart.js 3.x, the tooltip item's `index` parameter was renamed to `dataIndex`.
Tooltip item value renamed to formattedValue in v3
In Chart.js 3.x, the tooltip item's `value` parameter was renamed to `formattedValue`.
xPadding and yPadding merged in tooltip in v3
In Chart.js 3.x, the tooltip `xPadding` and `yPadding` options were merged into a single `padding` object.
Chart.Legend made private in v3
In Chart.js 3.x, `Chart.Legend` was moved to `Chart.plugins.legend._element` and made private.
Chart.Title made private in v3
In Chart.js 3.x, `Chart.Title` was moved to `Chart.plugins.title._element` and made private.
Chart.plugins.register replaced with Chart.register in v3
In Chart.js 3.x, `Chart.plugins.register` was replaced by `Chart.register`.
Chart.Tooltip moved to tooltip plugin in v3
In Chart.js 3.x, `Chart.Tooltip` is now provided by the tooltip plugin. The positioners can be accessed from `tooltipPlugin.positioners`.
Chart.pluginService renamed to Chart.plugins in v3
In Chart.js 3.x, `Chart.pluginService` was renamed to `Chart.plugins`.
IPlugin interface unified in v3
In Chart.js 3.x, all plugin hooks have unified signature with 3 arguments: `chart`, `args`, and `options`. This changes the signature for these hooks: `beforeInit`, `afterInit`, `reset`, `beforeLayout`, `afterLayout`, `beforeRender`, `afterRender`, `beforeDraw`, `afterDraw`, `beforeDatasetsDraw`, `afterDatasetsDraw`, `beforeEvent`, `afterEvent`, `resize`, and `destroy`.
New plugin hooks in v3
In Chart.js 3.x, new plugin hooks were added: `install`, `start`, `stop`, and `uninstall`.
Basic subtitle example with font and color customization
const config = { type: 'line', data: data, options: { plugins: { title: { display: true, text: 'Chart Title', }, subtitle: { display: true, text: 'Chart Subtitle', color: 'blue', font: { size: 12, family: 'tahoma', weight: 'normal', style: 'italic' }, padding: { bottom: 10 } } } } }; This example shows how to add a subtitle with custom font styling (size, family, weight, style), text color, and bottom padding.
Subtitle plugin configuration options
The subtitle plugin accepts the following configuration options: display (boolean) to show or hide the subtitle, text (string) for the subtitle content, color (string) for text color, font (object) with properties size, family, weight, and style, and padding (object) with properties like bottom for spacing.
Title align option values
The title.align option accepts three values: 'start', 'center', and 'end'. The default value is 'center'.
Title alignment configuration
To configure title alignment, set the align property within options.plugins.title. For example, chart.options.plugins.title.align = 'start' sets the title to align at the start position.
Title alignment example
const config = { type: 'line', data: data, options: { plugins: { title: { display: true, text: 'Chart Title', } } } }; This example shows how to configure a chart with a title. The title alignment can be changed by setting options.plugins.title.align to 'start', 'center', or 'end'.
Tooltip item parsed property
Each tooltip item in the callbacks has a parsed property containing the parsed data values. For line charts, parsed.y contains the y-axis value of the data point.
Tooltip footer callback example
The footer callback receives tooltipItems and can calculate aggregate values like sums. Example: const footer = (tooltipItems) => { let sum = 0; tooltipItems.forEach(function(tooltipItem) { sum += tooltipItem.parsed.y; }); return 'Sum: ' + sum; };
Tooltip footer callback configuration
Set the footer callback in the tooltip plugin options under plugins.tooltip.callbacks.footer. The callback receives an array of tooltip items and returns content to display in the footer of the tooltip.
Tooltip labelColors array structure
The tooltip.labelColors property is an array corresponding to each body element. Each color object contains backgroundColor and borderColor properties that represent the color indicator for that data series in the tooltip.
Tooltip body contains array of line arrays
The tooltip.body property is an array where each element is an object with a lines property. Each lines property contains the text content for that dataset or data point in the tooltip.
Tooltip opacity property indicates visibility state
The tooltip.opacity property indicates whether the tooltip should be visible. When opacity is 0, the tooltip should be hidden by setting the DOM element's opacity style to 0.
External HTML tooltip example with table structure
This example demonstrates creating an external tooltip as an HTML element with a table structure. The getOrCreateTooltip function creates a div element with absolute positioning, semi-transparent black background (rgba(0, 0, 0, 0.7)), and appends it to the chart's parent. The externalTooltipHandler function populates the table with title rows and body rows, each body row containing a colored span indicator and text. The tooltip is positioned using chart.canvas offsetLeft and offsetTop plus tooltip.caretX and caretY coordinates.
Disable built-in tooltip to use external handler
To use an external tooltip handler, set tooltip.enabled to false in the chart options. Then provide a function to tooltip.external that implements custom tooltip rendering.
External tooltip handler function signature and context
An external tooltip handler receives a context object with properties: chart (the chart instance) and tooltip (the tooltip state object). The tooltip object contains opacity, title (array of title lines), body (array of objects with lines property), labelColors (array of objects with backgroundColor and borderColor), caretX, caretY, options (with bodyFont.string and padding), and other positioning information.
Tooltip usePointStyle option
The tooltip plugin accepts a usePointStyle option that, when set to true, displays the dataset point style in the tooltip instead of a rectangle to identify each dataset. This option can be toggled dynamically via chart.options.plugins.tooltip.usePointStyle.
Point style tooltip example
This example demonstrates using usePointStyle: true in the tooltip configuration of a line chart. Three datasets are configured with different pointStyle values ('triangle', 'circle', 'star'), and the tooltip is set to display these point styles instead of rectangles. The configuration includes: const config = { type: 'line', data: data, options: { interaction: { mode: 'index', }, plugins: { title: { display: true, text: (ctx) => 'Tooltip point style: ' + ctx.chart.options.plugins.tooltip.usePointStyle, }, tooltip: { usePointStyle: true, } } } };