## Configuration options
-The legend configuration is passed into the `options.legend` namespace. The global options for the chart legend is defined in `Chart.defaults.plugins.legend`.
+The legend configuration is passed into the `options.plugins.legend` namespace. The global options for the chart legend is defined in `Chart.defaults.plugins.legend`.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
type: 'bar',
data: data,
options: {
- legend: {
- display: true,
- labels: {
- fontColor: 'rgb(255, 99, 132)'
+ plugins: {
+ legend: {
+ display: true,
+ labels: {
+ fontColor: 'rgb(255, 99, 132)'
+ }
}
}
}
type: 'line',
data: data,
options: {
- legend: {
- onClick: newLegendClickHandler
+ plugins: {
+ legend: {
+ onClick: newLegendClickHandler
+ }
}
}
});
## Title Configuration
-The title configuration is passed into the `options.title` namespace. The global options for the chart title is defined in `Chart.defaults.plugins.title`.
+The title configuration is passed into the `options.plugins.title` namespace. The global options for the chart title is defined in `Chart.defaults.plugins.title`.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
type: 'line',
data: data,
options: {
- title: {
- display: true,
- text: 'Custom Chart Title'
+ plugins: {
+ title: {
+ display: true,
+ text: 'Custom Chart Title'
+ }
}
}
});
type: 'line',
data: data,
options: {
- title: {
- display: true,
- text: 'Custom Chart Title',
- padding: {
- top: 10,
- bottom: 30
+ plugins: {
+ title: {
+ display: true,
+ text: 'Custom Chart Title',
+ padding: {
+ top: 10,
+ bottom: 30
+ }
}
}
}
## Tooltip Configuration
-The tooltip configuration is passed into the `options.tooltips` namespace. The global options for the chart tooltips is defined in `Chart.defaults.plugins.tooltip`.
+The tooltip configuration is passed into the `options.plugins.tooltip` namespace. The global options for the chart tooltips is defined in `Chart.defaults.plugins.tooltip`.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
type: 'line',
data: data,
options: {
- tooltips: {
- callbacks: {
- label: function(context) {
- var label = context.dataset.label || '';
-
- if (label) {
- label += ': ';
- }
- if (!isNaN(context.dataPoint.y)) {
- label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.dataPoint.y);
+ plugins: {
+ tooltip: {
+ callbacks: {
+ label: function(context) {
+ var label = context.dataset.label || '';
+
+ if (label) {
+ label += ': ';
+ }
+ if (!isNaN(context.dataPoint.y)) {
+ label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.dataPoint.y);
+ }
+ return label;
}
- return label;
}
}
}
type: 'line',
data: data,
options: {
- tooltips: {
- callbacks: {
- labelColor: function(context) {
- return {
- borderColor: 'rgb(255, 0, 0)',
- backgroundColor: 'rgb(255, 0, 0)'
- };
- },
- labelTextColor: function(context) {
- return '#543453';
+ plugins: {
+ tooltip: {
+ callbacks: {
+ labelColor: function(context) {
+ return {
+ borderColor: 'rgb(255, 0, 0)',
+ backgroundColor: 'rgb(255, 0, 0)'
+ };
+ },
+ labelTextColor: function(context) {
+ return '#543453';
+ }
}
}
}
type: 'line',
data: data,
options: {
- tooltips: {
- usePointStyle: true,
- callbacks: {
- labelPointStyle: function(context) {
- return {
- pointStyle: 'triangle',
- rotation: 0
- };
+ plugins: {
+ tooltip: {
+ usePointStyle: true,
+ callbacks: {
+ labelPointStyle: function(context) {
+ return {
+ pointStyle: 'triangle',
+ rotation: 0
+ };
+ }
}
}
}
type: 'pie',
data: data,
options: {
- tooltips: {
- // Disable the on-canvas tooltip
- enabled: false,
-
- custom: function(context) {
- // Tooltip Element
- var tooltipEl = document.getElementById('chartjs-tooltip');
-
- // Create element on first render
- if (!tooltipEl) {
- tooltipEl = document.createElement('div');
- tooltipEl.id = 'chartjs-tooltip';
- tooltipEl.innerHTML = '<table></table>';
- document.body.appendChild(tooltipEl);
- }
+ plugins: {
+ tooltip: {
+ // Disable the on-canvas tooltip
+ enabled: false,
+
+ custom: function(context) {
+ // Tooltip Element
+ var tooltipEl = document.getElementById('chartjs-tooltip');
+
+ // Create element on first render
+ if (!tooltipEl) {
+ tooltipEl = document.createElement('div');
+ tooltipEl.id = 'chartjs-tooltip';
+ tooltipEl.innerHTML = '<table></table>';
+ document.body.appendChild(tooltipEl);
+ }
- // Hide if no tooltip
- var tooltipModel = context.tooltip;
- if (tooltipModel.opacity === 0) {
- tooltipEl.style.opacity = 0;
- return;
- }
+ // Hide if no tooltip
+ var tooltipModel = context.tooltip;
+ if (tooltipModel.opacity === 0) {
+ tooltipEl.style.opacity = 0;
+ return;
+ }
- // Set caret Position
- tooltipEl.classList.remove('above', 'below', 'no-transform');
- if (tooltipModel.yAlign) {
- tooltipEl.classList.add(tooltipModel.yAlign);
- } else {
- tooltipEl.classList.add('no-transform');
- }
+ // Set caret Position
+ tooltipEl.classList.remove('above', 'below', 'no-transform');
+ if (tooltipModel.yAlign) {
+ tooltipEl.classList.add(tooltipModel.yAlign);
+ } else {
+ tooltipEl.classList.add('no-transform');
+ }
- function getBody(bodyItem) {
- return bodyItem.lines;
- }
+ function getBody(bodyItem) {
+ return bodyItem.lines;
+ }
- // Set Text
- if (tooltipModel.body) {
- var titleLines = tooltipModel.title || [];
- var bodyLines = tooltipModel.body.map(getBody);
-
- var innerHtml = '<thead>';
-
- titleLines.forEach(function(title) {
- innerHtml += '<tr><th>' + title + '</th></tr>';
- });
- innerHtml += '</thead><tbody>';
-
- bodyLines.forEach(function(body, i) {
- var colors = tooltipModel.labelColors[i];
- var style = 'background:' + colors.backgroundColor;
- style += '; border-color:' + colors.borderColor;
- style += '; border-width: 2px';
- var span = '<span style="' + style + '"></span>';
- innerHtml += '<tr><td>' + span + body + '</td></tr>';
- });
- innerHtml += '</tbody>';
-
- var tableRoot = tooltipEl.querySelector('table');
- tableRoot.innerHTML = innerHtml;
- }
+ // Set Text
+ if (tooltipModel.body) {
+ var titleLines = tooltipModel.title || [];
+ var bodyLines = tooltipModel.body.map(getBody);
+
+ var innerHtml = '<thead>';
+
+ titleLines.forEach(function(title) {
+ innerHtml += '<tr><th>' + title + '</th></tr>';
+ });
+ innerHtml += '</thead><tbody>';
+
+ bodyLines.forEach(function(body, i) {
+ var colors = tooltipModel.labelColors[i];
+ var style = 'background:' + colors.backgroundColor;
+ style += '; border-color:' + colors.borderColor;
+ style += '; border-width: 2px';
+ var span = '<span style="' + style + '"></span>';
+ innerHtml += '<tr><td>' + span + body + '</td></tr>';
+ });
+ innerHtml += '</tbody>';
+
+ var tableRoot = tooltipEl.querySelector('table');
+ tableRoot.innerHTML = innerHtml;
+ }
- var position = context.chart.canvas.getBoundingClientRect();
+ var position = context.chart.canvas.getBoundingClientRect();
- // Display, position, and set styles for font
- tooltipEl.style.opacity = 1;
- tooltipEl.style.position = 'absolute';
- tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
- tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
- tooltipEl.style.font = tooltipModel.bodyFont.string;
- tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
- tooltipEl.style.pointerEvents = 'none';
+ // Display, position, and set styles for font
+ tooltipEl.style.opacity = 1;
+ tooltipEl.style.position = 'absolute';
+ tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
+ tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
+ tooltipEl.style.font = tooltipModel.bodyFont.string;
+ tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
+ tooltipEl.style.pointerEvents = 'none';
+ }
}
}
}
```javascript
function updateConfigByMutating(chart) {
- chart.options.title.text = 'new title';
+ chart.options.plugins.title.text = 'new title';
chart.update();
}
type: 'line',
data: data,
options: {
- legend: {
- labels: {
- // This more specific font property overrides the global property
- font: {
- size: 14
+ plugins: {
+ legend: {
+ labels: {
+ // This more specific font property overrides the global property
+ font: {
+ size: 14
+ }
}
}
}
}
}
});
-```
\ No newline at end of file
+```
When configuring interaction with the graph via hover or tooltips, a number of different modes are available.
-`options.hover` and `options.tooltips` extend from `options.interaction`. So if `mode`, `intersect` or any other common settings are configured only in `options.interaction`, both hover and tooltips obey that.
+`options.hover` and `options.plugins.tooltip` extend from `options.interaction`. So if `mode`, `intersect` or any other common settings are configured only in `options.interaction`, both hover and tooltips obey that.
The modes are detailed below and how they behave in conjunction with the `intersect` setting.
* To override the platform class used in a chart instance, pass `platform: PlatformClass` in the config object. Note that the class should be passed, not an instance of the class.
* `aspectRatio` defaults to 1 for doughnut, pie, polarArea, and radar charts
* `TimeScale` does not read `t` from object data by default anymore. The default property is `x` or `y`, depending on the orientation. See [data structures](../general/data-structures.md) for details on how to change the default.
+* `tooltips` namespace was renamed to `tooltip` to match the plugin name
+* `legend`, `title` and `tooltip` namespaces were moved from `options` to `options.plugins`.
#### Defaults
#### Interactions
-* To allow DRY configuration, a root options scope for common interaction options was added. `options.hover` and `options.tooltips` now both extend from `options.interaction`. Defaults are defined at `defaults.interaction` level, so by default hover and tooltip interactions share the same mode etc.
+* To allow DRY configuration, a root options scope for common interaction options was added. `options.hover` and `options.plugins.tooltip` now both extend from `options.interaction`. Defaults are defined at `defaults.interaction` level, so by default hover and tooltip interactions share the same mode etc.
* `interactions` are now limited to the chart area
* `{mode: 'label'}` was replaced with `{mode: 'index'}`
* `{mode: 'single'}` was replaced with `{mode: 'nearest', intersect: true}`
},
options: {
responsive: true,
- title: {
- display: true,
- text: 'Chart.js Line Chart'
- },
- tooltips: {
- mode: 'index',
- intersect: false,
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart'
+ },
+ tooltip: {
+ mode: 'index',
+ intersect: false,
+ },
},
hover: {
mode: 'nearest',
},
options: {
responsive: true,
- legend: {
- position: 'right',
- },
- title: {
- display: true,
- text: 'Chart.js Polar Area Chart'
- },
- scale: {
- ticks: {
- beginAtZero: true
+ plugins: {
+ legend: {
+ position: 'right',
},
- reverse: false
+ title: {
+ display: true,
+ text: 'Chart.js Polar Area Chart'
+ },
+ },
+ scales: {
+ r: {
+ ticks: {
+ beginAtZero: true
+ },
+ reverse: false
+ }
},
animation: {
animateRotate: false,
delay
};
},
- title: {
- display: true,
- text: 'Chart.js Bar Chart - Stacked'
- },
- tooltips: {
- mode: 'index',
- intersect: false
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart.js Bar Chart - Stacked'
+ },
+ tooltip: {
+ mode: 'index',
+ intersect: false
+ }
},
responsive: true,
scales: {
}
},
responsive: true,
- title: {
- display: true,
- text: 'Chart.js Line Chart'
- },
- tooltips: {
- mode: 'index',
- intersect: false,
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart'
+ },
+ tooltip: {
+ mode: 'index',
+ intersect: false,
+ }
},
hover: {
mode: 'nearest',
}
},
responsive: true,
- title: {
- display: true,
- text: 'Chart.js Line Chart'
- },
- tooltips: {
- mode: 'nearest',
- axis: 'x',
- intersect: false,
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart'
+ },
+ tooltip: {
+ mode: 'nearest',
+ axis: 'x',
+ intersect: false,
+ },
},
hover: {
mode: 'nearest',
},
options: {
responsive: true,
- title: {
- display: true,
- text: 'Chart.js Line Chart - Stacked Area'
- },
- tooltips: {
- mode: 'index',
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart - Stacked Area'
+ },
+ tooltip: {
+ mode: 'index',
+ }
},
hover: {
mode: 'index'
data: barChartData,
options: {
responsive: true,
- legend: {
- position: 'top',
- },
- title: {
- display: true,
- text: 'Chart.js Bar Chart'
+ plugins: {
+ legend: {
+ position: 'top',
+ },
+ title: {
+ display: true,
+ text: 'Chart.js Bar Chart'
+ }
}
}
});
data: barChartData,
options: {
responsive: true,
- legend: {
- position: 'top',
- },
- title: {
- display: true,
- text: 'Chart.js Bar Chart'
+ plugins: {
+ legend: {
+ position: 'top',
+ },
+ title: {
+ display: true,
+ text: 'Chart.js Bar Chart'
+ }
}
}
});
}
},
responsive: true,
- legend: {
- position: 'right',
- },
- title: {
- display: true,
- text: 'Chart.js Horizontal Bar Chart'
+ plugins: {
+ legend: {
+ position: 'right',
+ },
+ title: {
+ display: true,
+ text: 'Chart.js Horizontal Bar Chart'
+ }
}
}
});
data: barChartData,
options: {
responsive: true,
- title: {
- display: true,
- text: 'Chart.js Bar Chart - Multi Axis'
- },
- tooltips: {
- mode: 'index',
- intersect: true
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart.js Bar Chart - Multi Axis'
+ },
+ tooltip: {
+ mode: 'index',
+ intersect: true
+ }
},
scales: {
y: {
type: 'bar',
data: barChartData,
options: {
- title: {
- display: true,
- text: 'Chart.js Bar Chart - Stacked'
- },
- tooltips: {
- mode: 'index',
- intersect: false
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart.js Bar Chart - Stacked'
+ },
+ tooltip: {
+ mode: 'index',
+ intersect: false
+ }
},
responsive: true,
scales: {
type: 'bar',
data: barChartData,
options: {
- title: {
- display: true,
- text: 'Chart.js Bar Chart - Stacked'
- },
- tooltips: {
- mode: 'index',
- intersect: false
+ plugin: {
+ title: {
+ display: true,
+ text: 'Chart.js Bar Chart - Stacked'
+ },
+ tooltip: {
+ mode: 'index',
+ intersect: false
+ },
},
responsive: true,
scales: {
data: barChartData,
options: {
responsive: true,
- legend: {
- position: 'top',
- },
- title: {
- display: true,
- text: 'Chart.js Bar Chart'
+ plugins: {
+ legend: {
+ position: 'top',
+ },
+ title: {
+ display: true,
+ text: 'Chart.js Bar Chart'
+ }
}
}
});
data: bubbleChartData,
options: {
responsive: true,
- title: {
- display: true,
- text: 'Chart.js Bubble Chart'
- },
- tooltips: {
- mode: 'point'
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart.js Bubble Chart'
+ },
+ tooltip: {
+ mode: 'point'
+ }
}
}
});
data: chartData,
options: {
responsive: true,
- title: {
- display: true,
- text: 'Chart.js Combo Bar Line Chart'
- },
- tooltips: {
- mode: 'index',
- intersect: true
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart.js Combo Bar Line Chart'
+ },
+ tooltip: {
+ mode: 'index',
+ intersect: true
+ }
}
}
});
},
options: {
responsive: true,
- legend: {
- position: 'top',
- },
- title: {
- display: true,
- text: 'Chart.js Doughnut Chart'
+ plugins: {
+ legend: {
+ position: 'top',
+ },
+ title: {
+ display: true,
+ text: 'Chart.js Doughnut Chart'
+ },
},
animation: {
animateScale: true,
},
options: {
responsive: true,
- title: {
- display: true,
- text: 'Chart.js Line Chart'
- },
- tooltips: {
- mode: 'index',
- intersect: false,
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart'
+ },
+ tooltip: {
+ mode: 'index',
+ intersect: false,
+ }
},
hover: {
mode: 'nearest',
},
options: {
responsive: true,
- title: {
- display: true,
- text: 'Chart.js Line Chart - Cubic interpolation mode'
- },
- tooltips: {
- mode: 'index'
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart - Cubic interpolation mode'
+ },
+ tooltip: {
+ mode: 'index'
+ }
},
scales: {
x: {
},
options: {
responsive: true,
- title: {
- display: true,
- text: 'Chart.js Line Chart'
- },
- tooltips: {
- mode: 'index',
- intersect: false,
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart'
+ },
+ tooltip: {
+ mode: 'index',
+ intersect: false,
+ }
},
hover: {
mode: 'nearest',
},
options: {
responsive: true,
- legend: {
- position: 'bottom',
+ plugins: {
+ legend: {
+ position: 'bottom',
+ },
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart - Different point sizes'
+ }
},
hover: {
mode: 'index'
labelString: 'Value'
}
}
- },
- title: {
- display: true,
- text: 'Chart.js Line Chart - Different point sizes'
}
}
};
},
options: {
responsive: true,
- title: {
- display: true,
- text: 'Point Style: ' + pointStyle
- },
- legend: {
- display: false
+ plugins: {
+ title: {
+ display: true,
+ text: 'Point Style: ' + pointStyle
+ },
+ legend: {
+ display: false
+ },
},
elements: {
point: {
},
options: {
responsive: true,
- title: {
- display: true,
- text: 'Chart.js Line Chart - Skip Points'
- },
- tooltips: {
- mode: 'index',
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart - Skip Points'
+ },
+ tooltip: {
+ mode: 'index',
+ }
},
hover: {
mode: 'index'
]
},
options: {
- legend: {
- labels: {
- generateLabels: function(chart) {
- // Get the default label list
- var original = Chart.defaults.controllers.pie.legend.labels.generateLabels;
- var labels = original.call(this, chart);
+ plugins: {
+ legend: {
+ labels: {
+ generateLabels: function(chart) {
+ // Get the default label list
+ var original = Chart.defaults.controllers.pie.legend.labels.generateLabels;
+ var labels = original.call(this, chart);
- // Build an array of colors used in the datasets of the chart
- var datasetColors = chart.data.datasets.map(function(e) {
- return e.backgroundColor;
- });
- datasetColors = datasetColors.flat();
+ // Build an array of colors used in the datasets of the chart
+ var datasetColors = chart.data.datasets.map(function(e) {
+ return e.backgroundColor;
+ });
+ datasetColors = datasetColors.flat();
- // Modify the color and hide state of each label
- labels.forEach(label => {
- // There are twice as many labels as there are datasets. This converts the label index into the corresponding dataset index
- label.datasetIndex = (label.index - label.index % 2) / 2;
+ // Modify the color and hide state of each label
+ labels.forEach(label => {
+ // There are twice as many labels as there are datasets. This converts the label index into the corresponding dataset index
+ label.datasetIndex = (label.index - label.index % 2) / 2;
- // The hidden state must match the dataset's hidden state
- label.hidden = !chart.isDatasetVisible(label.datasetIndex);
+ // The hidden state must match the dataset's hidden state
+ label.hidden = !chart.isDatasetVisible(label.datasetIndex);
- // Change the color to match the dataset
- label.fillStyle = datasetColors[label.index];
- });
+ // Change the color to match the dataset
+ label.fillStyle = datasetColors[label.index];
+ });
- return labels;
+ return labels;
+ }
+ },
+ onClick: function(mouseEvent, legendItem, legend) {
+ // toggle the visibility of the dataset from what it currently is
+ legend.chart.getDatasetMeta(
+ legendItem.datasetIndex
+ ).hidden = legend.chart.isDatasetVisible(legendItem.datasetIndex);
+ legend.chart.update();
}
},
- onClick: function(mouseEvent, legendItem, legend) {
- // toggle the visibility of the dataset from what it currently is
- legend.chart.getDatasetMeta(
- legendItem.datasetIndex
- ).hidden = legend.chart.isDatasetVisible(legendItem.datasetIndex);
- legend.chart.update();
- }
- },
- tooltips: {
- callbacks: {
- label: function(context) {
- var labelIndex = (context.datasetIndex * 2) + context.dataIndex;
- return context.chart.data.labels[labelIndex] + ': ' + context.dataset.data[context.dataIndex];
+ tooltip: {
+ callbacks: {
+ label: function(context) {
+ var labelIndex = (context.datasetIndex * 2) + context.dataIndex;
+ return context.chart.data.labels[labelIndex] + ': ' + context.dataset.data[context.dataIndex];
+ }
}
}
}
},
options: {
responsive: true,
- legend: {
- position: 'right',
- },
- title: {
- display: true,
- text: 'Chart.js Polar Area Chart'
+ plugins: {
+ legend: {
+ position: 'right',
+ },
+ title: {
+ display: true,
+ text: 'Chart.js Polar Area Chart'
+ },
},
scale: {
ticks: {
}]
},
options: {
- legend: {
- position: 'top',
- },
- title: {
- display: true,
- text: 'Chart.js Radar Chart'
+ plugins: {
+ legend: {
+ position: 'top',
+ },
+ title: {
+ display: true,
+ text: 'Chart.js Radar Chart'
+ },
},
scale: {
beginAtZero: true
}]
},
options: {
- legend: {
- onHover: function(event, legendItem) {
- log('onHover: ' + legendItem.text);
+ plugins: {
+ legend: {
+ onHover: function(event, legendItem) {
+ log('onHover: ' + legendItem.text);
+ },
+ onLeave: function(event, legendItem) {
+ log('onLeave: ' + legendItem.text);
+ },
+ onClick: function(event, legendItem) {
+ log('onClick:' + legendItem.text);
+ }
},
- onLeave: function(event, legendItem) {
- log('onLeave: ' + legendItem.text);
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart'
},
- onClick: function(event, legendItem) {
- log('onClick:' + legendItem.text);
- }
- },
- title: {
- display: true,
- text: 'Chart.js Line Chart'
},
scales: {
x: {
},
options: {
responsive: true,
- legend: {
- labels: {
- usePointStyle: false
+ plugins: {
+ legend: {
+ labels: {
+ usePointStyle: false
+ }
+ },
+ title: {
+ display: true,
+ text: 'Normal Legend'
}
},
scales: {
labelString: 'Value'
}
}
- },
- title: {
- display: true,
- text: 'Normal Legend'
}
}
};
function createPointStyleConfig(colorName) {
var config = createConfig(colorName);
- config.options.legend.labels.usePointStyle = true;
- config.options.title.text = 'Point Style Legend';
+ config.options.plugins.legend.labels.usePointStyle = true;
+ config.options.plugins.title.text = 'Point Style Legend';
return config;
}
},
options: {
responsive: true,
- legend: {
- position: legendPosition,
+ plugins: {
+ legend: {
+ position: legendPosition,
+ },
+ title: {
+ display: true,
+ text: 'Legend Position: ' + legendPosition
+ }
},
scales: {
x: {
labelString: 'Value'
}
}
- },
- title: {
- display: true,
- text: 'Legend Position: ' + legendPosition
}
}
};
},
options: {
responsive: true,
- legend: {
- align: align,
- position: legendPosition,
+ plugins: {
+ legend: {
+ align: align,
+ position: legendPosition,
+ title: {
+ display: true,
+ text: 'Legend Title',
+ position: titlePosition,
+ }
+ },
title: {
display: true,
- text: 'Legend Title',
- position: titlePosition,
+ text: 'Legend Title Position: ' + titlePosition
}
},
scales: {
labelString: 'Value'
}
}
- },
- title: {
- display: true,
- text: 'Legend Title Position: ' + titlePosition
}
}
};
},
options: {
responsive: true,
- title: {
- display: true,
- text: 'Chart.js Line Chart'
- },
- tooltips: {
- mode: 'index',
- intersect: false,
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart'
+ },
+ tooltip: {
+ mode: 'index',
+ intersect: false,
+ }
},
hover: {
mode: 'nearest',
}
}
},
- tooltips: {
- intersect: false,
- mode: 'index',
- callbacks: {
- label: function(context) {
- let label = context.dataset.label || '';
- if (label) {
- label += ': ';
+ plugins: {
+ tooltip: {
+ intersect: false,
+ mode: 'index',
+ callbacks: {
+ label: function(context) {
+ let label = context.dataset.label || '';
+ if (label) {
+ label += ': ';
+ }
+ label += context.dataPoint.y.toFixed(2);
+ return label;
}
- label += context.dataPoint.y.toFixed(2);
- return label;
}
}
}
},
options: {
responsive: true,
- legend: {
- display: false,
+ plugins: {
+ legend: {
+ display: false,
+ },
+ title: {
+ display: true,
+ text: 'X Tick Alignment: ' + xAlign + ', Y Tick Alignment ' + yAlign
+ }
},
scales: {
x: {
align: yAlign
}
}
- },
- title: {
- display: true,
- text: 'X Tick Alignment: ' + xAlign + ', Y Tick Alignment ' + yAlign
}
}
};
},
options: {
responsive: true,
- title: {
- display: true,
- text: 'Chart.js Line Chart'
- },
- tooltips: {
- mode: 'index',
- intersect: false,
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart'
+ },
+ tooltip: {
+ mode: 'index',
+ intersect: false,
+ }
},
hover: {
mode: 'nearest',
document.getElementById('toggleScale').addEventListener('click', function() {
type = type === 'linear' ? 'logarithmic' : 'linear';
- window.myLine.options.title.text = 'Chart.js Line Chart - ' + type;
+ window.myLine.options.plugins.title.text = 'Chart.js Line Chart - ' + type;
window.myLine.options.scales.y = {
display: true,
type: type
};
var options = {
- legend: false,
- tooltips: false,
+ plugins: {
+ legend: false,
+ tooltip: false,
+ },
elements: {
bar: {
backgroundColor: colorize.bind(null, false),
var options = {
aspectRatio: 1,
- legend: false,
- tooltips: false,
-
+ plugins: {
+ legend: false,
+ tooltip: false,
+ },
elements: {
point: {
backgroundColor: colorize.bind(null, false),
};
var options = {
- legend: false,
- tooltips: true,
+ plugins: {
+ legend: false,
+ tooltip: true,
+ },
elements: {
line: {
fill: false,
};
var options = {
- legend: false,
- tooltips: false,
+ plugins: {
+ legend: false,
+ tooltip: false,
+ },
elements: {
arc: {
backgroundColor: colorize.bind(null, false, false),
};
var options = {
- legend: false,
- tooltips: false,
+ plugins: {
+ legend: false,
+ tooltip: false,
+ },
elements: {
arc: {
backgroundColor: colorize.bind(null, false, false),
};
var options = {
- legend: false,
- tooltips: true,
+ plugins: {
+ legend: false,
+ tooltip: false,
+ },
elements: {
line: {
backgroundColor: make20PercentOpaque,
},
options: {
responsive: true,
- legend: {
- display: false,
+ plugins: {
+ legend: {
+ display: false
+ },
},
scales: {
x: {
},
options: {
responsive: true,
- title: {
- display: true,
- text: 'Sample tooltip with border'
- },
- tooltips: {
- position: 'nearest',
- mode: 'index',
- intersect: false,
- yPadding: 10,
- xPadding: 10,
- caretSize: 8,
- backgroundColor: 'rgba(72, 241, 12, 1)',
- titleFont: {
- color: window.chartColors.black
+ plugins: {
+ title: {
+ display: true,
+ text: 'Sample tooltip with border'
},
- bodyFont: {
- color: window.chartColors.black
- },
- borderColor: 'rgba(0,0,0,1)',
- borderWidth: 4
- },
+ tooltip: {
+ position: 'nearest',
+ mode: 'index',
+ intersect: false,
+ yPadding: 10,
+ xPadding: 10,
+ caretSize: 8,
+ backgroundColor: 'rgba(72, 241, 12, 1)',
+ titleFont: {
+ color: window.chartColors.black
+ },
+ bodyFont: {
+ color: window.chartColors.black
+ },
+ borderColor: 'rgba(0,0,0,1)',
+ borderWidth: 4
+ }
+ }
}
};
}
},
options: {
responsive: true,
- title: {
- display: true,
- text: 'Chart.js Line Chart - Custom Information in Tooltip'
- },
- tooltips: {
- mode: 'index',
- callbacks: {
- // Use the footer callback to display the sum of the items showing in the tooltip
- footer: function(tooltipItems) {
- var sum = 0;
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart - Custom Information in Tooltip'
+ },
+ tooltip: {
+ mode: 'index',
+ callbacks: {
+ // Use the footer callback to display the sum of the items showing in the tooltip
+ footer: function(tooltipItems) {
+ var sum = 0;
- tooltipItems.forEach(function(tooltipItem) {
- sum += tooltipItem.dataPoint.y;
- });
- return 'Sum: ' + sum;
+ tooltipItems.forEach(function(tooltipItem) {
+ sum += tooltipItem.dataPoint.y;
+ });
+ return 'Sum: ' + sum;
+ },
},
- },
- footerFontStyle: 'normal'
+ footerFontStyle: 'normal'
+ }
},
hover: {
mode: 'index',
type: 'line',
data: lineChartData,
options: {
- title: {
- display: true,
- text: 'Chart.js Line Chart - Custom Tooltips'
- },
- tooltips: {
- enabled: false,
- mode: 'index',
- intersect: false,
- position: 'nearest',
- custom: customTooltips
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart - Custom Tooltips'
+ },
+ tooltip: {
+ enabled: false,
+ mode: 'index',
+ intersect: false,
+ position: 'nearest',
+ custom: customTooltips
+ }
}
}
});
},
options: {
responsive: true,
- legend: {
- display: false
- },
- tooltips: {
- enabled: false,
+ plugins: {
+ legend: false,
+ tooltip: false
}
}
};
type: 'line',
data: lineChartData,
options: {
- title: {
- display: true,
- text: 'Chart.js - Custom Tooltips using Data Points'
- },
- tooltips: {
- enabled: false,
- mode: 'index',
- intersect: false,
- custom: customTooltips
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart.js - Custom Tooltips using Data Points'
+ },
+ tooltip: {
+ enabled: false,
+ mode: 'index',
+ intersect: false,
+ custom: customTooltips
+ }
}
}
});
},
options: {
responsive: true,
- title: {
- display: true,
- text: 'Mode: ' + mode + ', intersect = ' + intersect
- },
- tooltips: {
- mode: mode,
- intersect: intersect,
+ plugins: {
+ title: {
+ display: true,
+ text: 'Mode: ' + mode + ', intersect = ' + intersect
+ },
+ tooltip: {
+ mode: mode,
+ intersect: intersect,
+ }
},
hover: {
mode: mode,
},
options: {
responsive: true,
- title: {
- display: true,
- text: 'Tooltip Point Styles'
- },
- tooltips: {
- mode: 'index',
- intersect: false,
- usePointStyle: true,
- },
- legend: {
- labels: {
- usePointStyle: true
- }
+ plugins: {
+ title: {
+ display: true,
+ text: 'Tooltip Point Styles'
+ },
+ tooltip: {
+ mode: 'index',
+ intersect: false,
+ usePointStyle: true,
+ },
+ legend: {
+ labels: {
+ usePointStyle: true
+ }
+ },
},
hover: {
mode: 'nearest',
},
options: {
responsive: true,
- tooltips: {
- position: 'middle',
- intersect: false,
- },
+ plugins: {
+ tooltip: {
+ position: 'middle',
+ intersect: false,
+ }
+ }
}
});
};
},
options: {
responsive: true,
- title: {
- display: true,
- text: 'Tooltip Position: ' + position
- },
- tooltips: {
- position: position,
- mode: 'index',
- intersect: false,
- },
+ plugins: {
+ title: {
+ display: true,
+ text: 'Tooltip Position: ' + position
+ },
+ tooltip: {
+ position: position,
+ mode: 'index',
+ intersect: false,
+ }
+ }
}
};
}
type: 'linear'
}
},
- tooltips: {
- callbacks: {
- title() {
- // Title doesn't make sense for scatter since we format the data as a point
- return '';
+ plugins: {
+ tooltip: {
+ callbacks: {
+ title() {
+ // Title doesn't make sense for scatter since we format the data as a point
+ return '';
+ }
}
}
}
animateScale: false
},
aspectRatio: 1,
- legend: {
- labels: {
- generateLabels(chart) {
- const data = chart.data;
- if (data.labels.length && data.datasets.length) {
- return data.labels.map((label, i) => {
- const meta = chart.getDatasetMeta(0);
- const style = meta.controller.getStyle(i);
-
- return {
- text: label,
- fillStyle: style.backgroundColor,
- strokeStyle: style.borderColor,
- lineWidth: style.borderWidth,
- hidden: !chart.getDataVisibility(i),
-
- // Extra data used for toggling the correct item
- index: i
- };
- });
- }
- return [];
- }
- },
-
- onClick(e, legendItem, legend) {
- legend.chart.toggleDataVisibility(legendItem.index);
- legend.chart.update();
- }
- },
// The percentage of the chart that we cut out of the middle.
cutoutPercentage: 50,
circumference: 360,
// Need to override these to give a nice default
- tooltips: {
- callbacks: {
- title() {
- return '';
- },
- label(tooltipItem) {
- let dataLabel = tooltipItem.label;
- const value = ': ' + tooltipItem.formattedValue;
-
- if (isArray(dataLabel)) {
- // show value on first line of multiline label
- // need to clone because we are changing the value
- dataLabel = dataLabel.slice();
- dataLabel[0] += value;
- } else {
- dataLabel += value;
+ plugins: {
+ legend: {
+ labels: {
+ generateLabels(chart) {
+ const data = chart.data;
+ if (data.labels.length && data.datasets.length) {
+ return data.labels.map((label, i) => {
+ const meta = chart.getDatasetMeta(0);
+ const style = meta.controller.getStyle(i);
+
+ return {
+ text: label,
+ fillStyle: style.backgroundColor,
+ strokeStyle: style.borderColor,
+ lineWidth: style.borderWidth,
+ hidden: !chart.getDataVisibility(i),
+
+ // Extra data used for toggling the correct item
+ index: i
+ };
+ });
+ }
+ return [];
}
+ },
- return dataLabel;
+ onClick(e, legendItem, legend) {
+ legend.chart.toggleDataVisibility(legendItem.index);
+ legend.chart.update();
+ }
+ },
+ tooltip: {
+ callbacks: {
+ title() {
+ return '';
+ },
+ label(tooltipItem) {
+ let dataLabel = tooltipItem.label;
+ const value = ': ' + tooltipItem.formattedValue;
+
+ if (isArray(dataLabel)) {
+ // show value on first line of multiline label
+ // need to clone because we are changing the value
+ dataLabel = dataLabel.slice();
+ dataLabel[0] += value;
+ } else {
+ dataLabel += value;
+ }
+
+ return dataLabel;
+ }
}
}
}
},
startAngle: 0,
- legend: {
- labels: {
- generateLabels(chart) {
- const data = chart.data;
- if (data.labels.length && data.datasets.length) {
- return data.labels.map((label, i) => {
- const meta = chart.getDatasetMeta(0);
- const style = meta.controller.getStyle(i);
-
- return {
- text: label,
- fillStyle: style.backgroundColor,
- strokeStyle: style.borderColor,
- lineWidth: style.borderWidth,
- hidden: !chart.getDataVisibility(i),
-
- // Extra data used for toggling the correct item
- index: i
- };
- });
+ plugins: {
+ legend: {
+ labels: {
+ generateLabels(chart) {
+ const data = chart.data;
+ if (data.labels.length && data.datasets.length) {
+ return data.labels.map((label, i) => {
+ const meta = chart.getDatasetMeta(0);
+ const style = meta.controller.getStyle(i);
+
+ return {
+ text: label,
+ fillStyle: style.backgroundColor,
+ strokeStyle: style.borderColor,
+ lineWidth: style.borderWidth,
+ hidden: !chart.getDataVisibility(i),
+
+ // Extra data used for toggling the correct item
+ index: i
+ };
+ });
+ }
+ return [];
}
- return [];
+ },
+
+ onClick(e, legendItem, legend) {
+ legend.chart.toggleDataVisibility(legendItem.index);
+ legend.chart.update();
}
},
- onClick(e, legendItem, legend) {
- legend.chart.toggleDataVisibility(legendItem.index);
- legend.chart.update();
- }
- },
-
- // Need to override these to give a nice default
- tooltips: {
- callbacks: {
- title() {
- return '';
- },
- label(context) {
- return context.chart.data.labels[context.dataIndex] + ': ' + context.formattedValue;
+ // Need to override these to give a nice default
+ tooltip: {
+ callbacks: {
+ title() {
+ return '';
+ },
+ label(context) {
+ return context.chart.data.labels[context.dataIndex] + ': ' + context.formattedValue;
+ }
}
}
}
+
};
fill: false
},
- tooltips: {
- callbacks: {
- title() {
- return ''; // doesn't make sense for scatter since data are formatted as a point
- },
- label(item) {
- return '(' + item.label + ', ' + item.formattedValue + ')';
+ plugins: {
+ tooltip: {
+ callbacks: {
+ title() {
+ return ''; // doesn't make sense for scatter since data are formatted as a point
+ },
+ label(item) {
+ return '(' + item.label + ', ' + item.formattedValue + ')';
+ }
}
}
}
});
}
+function includePluginDefaults(options) {
+ options.plugins = options.plugins || {};
+ options.plugins.title = (options.plugins.title !== false) && merge(Object.create(null), [
+ defaults.plugins.title,
+ options.plugins.title
+ ]);
+
+ options.plugins.tooltip = (options.plugins.tooltip !== false) && merge(Object.create(null), [
+ defaults.interaction,
+ defaults.plugins.tooltip,
+ options.interaction,
+ options.plugins.tooltip
+ ]);
+}
+
function includeDefaults(config, options) {
options = options || {};
options.scales = scaleConfig;
- options.title = (options.title !== false) && merge(Object.create(null), [
- defaults.plugins.title,
- options.title
- ]);
- options.tooltips = (options.tooltips !== false) && merge(Object.create(null), [
- defaults.interaction,
- defaults.plugins.tooltip,
- options.interaction,
- options.tooltips
- ]);
+ if (options.plugins !== false) {
+ includePluginDefaults(options);
+ }
return options;
}
_element: Legend,
beforeInit(chart) {
- const legendOpts = resolveOptions(chart.options.legend);
+ const legendOpts = resolveOptions(chart.options.plugins.legend);
if (legendOpts) {
createNewLegendAndAttach(chart, legendOpts);
// This ensures that if the legend position changes (via an option update)
// the layout system respects the change. See https://github.com/chartjs/Chart.js/issues/7527
beforeUpdate(chart) {
- const legendOpts = resolveOptions(chart.options.legend);
+ const legendOpts = resolveOptions(chart.options.plugins.legend);
const legend = chart.legend;
if (legendOpts) {
_element: Title,
beforeInit(chart) {
- const titleOpts = chart.options.title;
+ const titleOpts = chart.options.plugins.title;
if (titleOpts) {
createNewTitleBlockAndAttach(chart, titleOpts);
},
beforeUpdate(chart) {
- const titleOpts = chart.options.title;
+ const titleOpts = chart.options.plugins.title;
const titleBlock = chart.titleBlock;
if (titleOpts) {
initialize() {
const me = this;
const chartOpts = me._chart.options;
- me.options = resolveOptions(chartOpts.tooltips, chartOpts.font);
+ me.options = resolveOptions(chartOpts.plugins.tooltip, chartOpts.font);
me._cachedAnimations = undefined;
}
positioners,
afterInit(chart) {
- const tooltipOpts = chart.options.tooltips;
+ const tooltipOpts = chart.options.plugins.tooltip;
if (tooltipOpts) {
chart.tooltip = new Tooltip({_chart: chart});
labels: ['tick1 is very long one', 'tick2', 'tick3', 'tick4', 'tick5', 'tick6 is very long one']
},
options: {
- legend: {
- display: false
+ plugins: {
+ legend: false
},
scales: {
x: {
};
}
},
- legend: {
- display: false
+ plugins: {
+ legend: false
},
scales: {
x: {
"options": {
"responsive": false,
"spanGaps": false,
- "legend": false,
- "title": false,
+ "plugins": {
+ "legend": false,
+ "title": false
+ },
"scale": {
"display": false
},
"options": {
"responsive": false,
"spanGaps": false,
- "legend": false,
- "title": false,
+ "plugins": {
+ "legend": false,
+ "title": false
+ },
"scale": {
"display": false
},
}]
},
"options": {
- "legend": {
- "position": "bottom",
- "align": "center"
+ "plugins": {
+ "legend": {
+ "position": "bottom",
+ "align": "center"
+ }
}
}
},
}]
},
"options": {
- "legend": {
- "position": "bottom",
- "align": "center"
+ "plugins": {
+ "legend": {
+ "position": "bottom",
+ "align": "center"
+ }
}
}
},
}]
},
"options": {
- "legend": {
- "position": "bottom",
- "align": "end"
+ "plugins": {
+ "legend": {
+ "position": "bottom",
+ "align": "end"
+ }
}
}
},
}]
},
"options": {
- "legend": {
- "position": "bottom",
- "align": "start"
+ "plugins": {
+ "legend": {
+ "position": "bottom",
+ "align": "start"
+ }
}
}
},
}]
},
"options": {
- "legend": {
- "position": "left",
- "align": "center"
+ "plugins": {
+ "legend": {
+ "position": "left",
+ "align": "center"
+ }
}
}
},
}]
},
"options": {
- "legend": {
- "position": "left",
- "align": "center"
+ "plugins": {
+ "legend": {
+ "position": "left",
+ "align": "center"
+ }
}
}
},
}]
},
"options": {
- "legend": {
- "position": "left"
+ "plugins": {
+ "legend": {
+ "position": "left"
+ }
}
}
},
}]
},
"options": {
- "legend": {
- "position": "left",
- "align": "end"
+ "plugins": {
+ "legend": {
+ "position": "left",
+ "align": "end"
+ }
}
}
},
}]
},
"options": {
- "legend": {
- "position": "left",
- "align": "start"
+ "plugins": {
+ "legend": {
+ "position": "left",
+ "align": "start"
+ }
}
}
},
}]
},
"options": {
- "legend": {
- "position": "right",
- "align": "center"
+ "plugins": {
+ "legend": {
+ "position": "right",
+ "align": "center"
+ }
}
}
},
}]
},
"options": {
- "legend": {
- "position": "right",
- "align": "center"
+ "plugins": {
+ "legend": {
+ "position": "right",
+ "align": "center"
+ }
}
}
},
}]
},
"options": {
- "legend": {
- "position": "right"
+ "plugins": {
+ "legend": {
+ "position": "right"
+ }
}
}
},
}]
},
"options": {
- "legend": {
- "position": "right",
- "align": "end"
+ "plugins": {
+ "legend": {
+ "position": "right",
+ "align": "end"
+ }
}
}
},
}]
},
"options": {
- "legend": {
- "position": "right",
- "align": "start"
+ "plugins": {
+ "legend": {
+ "position": "right",
+ "align": "start"
+ }
}
}
},
}]
},
"options": {
- "legend": {
- "position": "top",
- "align": "center"
+ "plugins": {
+ "legend": {
+ "position": "top",
+ "align": "center"
+ }
}
}
},
}]
},
"options": {
- "legend": {
- "position": "top",
- "align": "center"
+ "plugins": {
+ "legend": {
+ "position": "top",
+ "align": "center"
+ }
}
}
},
}]
},
"options": {
- "legend": {
- "position": "top",
- "align": "end"
+ "plugins": {
+ "legend": {
+ "position": "top",
+ "align": "end"
+ }
}
}
},
}]
},
"options": {
- "legend": {
- "position": "top",
- "align": "start"
+ "plugins": {
+ "legend": {
+ "position": "top",
+ "align": "start"
+ }
}
}
},
labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false
+ },
elements: {
bar: {
backgroundColor: 'red',
labels: ['label1', 'label2']
},
options: {
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false
+ },
scales: {
x: {
type: 'category',
labels: ['label1', 'label2']
},
options: {
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false
+ },
scales: {
x: {
type: 'category',
labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false
+ },
scales: {
x: {
type: 'category',
labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false
+ },
scales: {
x: {
type: 'category',
labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false
+ },
scales: {
x: {
type: 'category',
labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false
+ },
scales: {
x: {
type: 'category',
labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false
+ },
scales: {
x: {
type: 'category',
labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false
+ },
scales: {
x: {
type: 'category',
labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false
+ },
scales: {
x: {
type: 'category',
labels: ['A', 'B', 'C', 'D']
},
options: {
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false
+ },
scales: {
x: {
type: 'category',
labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false
+ },
scales: {
x: {
type: 'category',
labels: ['label0', 'label1', 'label2', 'label3']
},
options: {
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false,
+ },
animation: {
duration: 0,
animateRotate: true,
labels: ['label0', 'label1', 'label2']
},
options: {
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false,
+ },
cutoutPercentage: 50,
rotation: 270,
circumference: 90,
labels: ['label0', 'label1']
},
options: {
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false
+ },
cutoutPercentage: 50,
rotation: 270,
circumference: 90,
labels: ['label0', 'label1']
},
options: {
- legend: false,
- title: false
+ plugins: {
+ legend: false,
+ title: false
+ }
}
});
},
options: {
showLine: true,
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false
+ },
elements: {
point: {
backgroundColor: 'red',
}]
},
options: {
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false
+ },
hover: {
mode: 'nearest',
intersect: true
labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false
+ },
scales: {
x: {
display: false,
labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false,
+ },
scales: {
x: {
display: false,
labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false
+ },
scales: {
x: {
display: false,
labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false
+ },
scales: {
x: {
display: false,
},
options: {
showLine: true,
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false
+ },
elements: {
arc: {
backgroundColor: 'rgb(255, 0, 0)',
},
options: {
showLine: true,
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false,
+ },
startAngle: 90, // default is 0
elements: {
arc: {
},
options: {
showLine: true,
- legend: false,
- title: false,
+ plugins: {
+ legend: false,
+ title: false,
+ },
elements: {
line: {
backgroundColor: 'rgb(255, 0, 0)',
hover: {
mode: 'dataset',
},
- title: {
- position: 'bottom'
+ plugins: {
+ title: {
+ position: 'bottom'
+ }
}
}
});
expect(options.showLine).toBe(defaults.showLine);
expect(options.spanGaps).toBe(false);
expect(options.hover.mode).toBe('dataset');
- expect(options.title.position).toBe('bottom');
+ expect(options.plugins.title.position).toBe('bottom');
defaults.hover.onHover = null;
delete defaults.controllers.line.hover.mode;
mode: 'dataset',
intersect: false
};
- chart.options.tooltips = newTooltipConfig;
+ chart.options.plugins.tooltip = newTooltipConfig;
chart.update();
expect(chart.tooltip.options).toEqual(jasmine.objectContaining(newTooltipConfig));
display: false
}
},
- legend: {
- display: false
- },
- title: {
- display: false
+ plugins: {
+ legend: false,
+ title: false
},
layout: {
padding: 10
display: false
}
},
- legend: {
- display: false
- },
- title: {
- display: false
+ plugins: {
+ legend: false,
+ title: false
},
layout: {
padding: {
display: false
}
},
- legend: {
- display: false
- },
- title: {
- display: false
+ plugins: {
+ legend: false,
+ title: false
},
layout: {
padding: {}
labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5', 'tick6']
},
options: {
- legend: {
- display: true,
- position: 'left',
- },
- title: {
- display: true,
- position: 'bottom',
- },
+ plugins: {
+ legend: {
+ display: true,
+ position: 'left',
+ },
+ title: {
+ display: true,
+ position: 'bottom',
+ },
+ }
},
}, {
canvas: {
}],
},
options: {
- legend: {
- display: false,
+ plugins: {
+ legend: false
},
},
}, {
display: false
}
},
- legend: {
- display: false
+ plugins: {
+ legend: false
}
}
});
offset: test.offset
}
},
- legend: {
- display: false
+ plugins: {
+ legend: false
}
}
});
display: false
}
},
- legend: {
- display: false
+ plugins: {
+ legend: false
}
}
}, {
}],
},
options: {
- legend: {
- display: false,
+ plugins: {
+ legend: false
},
scales: {
x: {
}],
},
options: {
- legend: {
- display: false,
+ plugins: {
+ legend: false
},
scales: {
x: {
spyOn(chart, 'update').and.callThrough();
var legendItem = chart.legend.legendItems[0];
- config.legend.onClick(null, legendItem, chart.legend);
+ config.plugins.legend.onClick(null, legendItem, chart.legend);
expect(chart.getDataVisibility(0)).toBe(false);
expect(chart.update).toHaveBeenCalled();
- config.legend.onClick(null, legendItem, chart.legend);
+ config.plugins.legend.onClick(null, legendItem, chart.legend);
expect(chart.getDataVisibility(0)).toBe(true);
});
});
spyOn(chart, 'update').and.callThrough();
var legendItem = chart.legend.legendItems[0];
- config.legend.onClick(null, legendItem, chart.legend);
+ config.plugins.legend.onClick(null, legendItem, chart.legend);
expect(chart.getDataVisibility(0)).toBe(false);
expect(chart.update).toHaveBeenCalled();
- config.legend.onClick(null, legendItem, chart.legend);
+ config.plugins.legend.onClick(null, legendItem, chart.legend);
expect(chart.getDataVisibility(0)).toBe(true);
});
});
labels: []
},
options: {
- legend: {
- reverse: true
+ plugins: {
+ legend: {
+ reverse: true
+ }
}
}
});
labels: []
},
options: {
- legend: {
- labels: {
- filter: function(legendItem, data) {
- var dataset = data.datasets[legendItem.datasetIndex];
- return !dataset.legendHidden;
+ plugins: {
+ legend: {
+ labels: {
+ filter: function(legendItem, data) {
+ var dataset = data.datasets[legendItem.datasetIndex];
+ return !dataset.legendHidden;
+ }
}
}
}
labels: []
},
options: {
- legend: {
- labels: {
- sort: function(a, b) {
- return b.datasetIndex > a.datasetIndex ? 1 : -1;
+ plugins: {
+ legend: {
+ labels: {
+ sort: function(a, b) {
+ return b.datasetIndex > a.datasetIndex ? 1 : -1;
+ }
}
}
}
labels: []
},
options: {
- legend: {
- labels: false,
+ plugins: {
+ legend: {
+ labels: false,
+ }
}
}
});
labels: []
},
options: {
- legend: {
- position: 'right'
+ plugins: {
+ legend: {
+ position: 'right'
+ }
}
}
},
labels: []
},
options: {
- legend: {
- position: 'right',
- labels: {
- boxHeight: 40
+ plugins: {
+ legend: {
+ position: 'right',
+ labels: {
+ boxHeight: 40
+ }
}
}
}
labels: []
},
options: {
- legend: {
- labels: {
- usePointStyle: true
+ plugins: {
+ legend: {
+ labels: {
+ usePointStyle: true
+ }
}
}
}
labels: []
},
options: {
- legend: {
- labels: {
- usePointStyle: true,
- pointStyle: 'star'
+ plugins: {
+ legend: {
+ labels: {
+ usePointStyle: true,
+ pointStyle: 'star'
+ }
}
}
}
}]
},
options: {
- legend: {
- display: true
+ plugins: {
+ legend: {
+ display: true
+ }
}
}
});
expect(chart.legend.options.display).toBe(true);
- chart.options.legend.display = false;
+ chart.options.plugins.legend.display = false;
chart.update();
expect(chart.legend.options.display).toBe(false);
});
type: 'line',
data: {},
options: {
- legend: {
- fullWidth: true,
- position: 'top',
- weight: 150
+ plugins: {
+ legend: {
+ fullWidth: true,
+ position: 'top',
+ weight: 150
+ }
}
}
});
expect(chart.legend.position).toBe('top');
expect(chart.legend.weight).toBe(150);
- chart.options.legend.fullWidth = false;
- chart.options.legend.position = 'left';
- chart.options.legend.weight = 42;
+ chart.options.plugins.legend.fullWidth = false;
+ chart.options.plugins.legend.position = 'left';
+ chart.options.plugins.legend.weight = 42;
chart.update();
expect(chart.legend.fullWidth).toBe(false);
expect(chart.legend.weight).toBe(42);
});
- it ('should remove the legend if the new options are false', function() {
+ xit ('should remove the legend if the new options are false', function() {
var chart = acquireChart({
type: 'line',
data: {
});
expect(chart.legend).not.toBe(undefined);
- chart.options.legend = false;
+ chart.options.plugins.legend = false;
chart.update();
expect(chart.legend).toBe(undefined);
});
}]
},
options: {
- legend: false
+ plugins: {
+ legend: false
+ }
}
});
expect(chart.legend).toBe(undefined);
- chart.options.legend = {};
+ chart.options.plugins.legend = {};
chart.update();
expect(chart.legend).not.toBe(undefined);
expect(chart.legend.options).toEqual(jasmine.objectContaining(Chart.defaults.plugins.legend));
}]
},
options: {
- legend: {
- onClick: function(_, item) {
- clickItem = item;
- },
- onHover: function(_, item) {
- hoverItem = item;
- },
- onLeave: function(_, item) {
- leaveItem = item;
+ plugins: {
+ legend: {
+ onClick: function(_, item) {
+ clickItem = item;
+ },
+ onHover: function(_, item) {
+ hoverItem = item;
+ },
+ onLeave: function(_, item) {
+ leaveItem = item;
+ }
}
}
}
}]
},
options: {
- title: {
- display: true
+ plugins: {
+ title: {
+ display: true
+ }
}
}
});
expect(chart.titleBlock.options.display).toBe(true);
- chart.options.title.display = false;
+ chart.options.plugins.title.display = false;
chart.update();
expect(chart.titleBlock.options.display).toBe(false);
});
type: 'line',
data: {},
options: {
- title: {
- fullWidth: true,
- position: 'top',
- weight: 150
+ plugins: {
+ title: {
+ fullWidth: true,
+ position: 'top',
+ weight: 150
+ }
}
}
});
expect(chart.titleBlock.position).toBe('top');
expect(chart.titleBlock.weight).toBe(150);
- chart.options.title.fullWidth = false;
- chart.options.title.position = 'left';
- chart.options.title.weight = 42;
+ chart.options.plugins.title.fullWidth = false;
+ chart.options.plugins.title.position = 'left';
+ chart.options.plugins.title.weight = 42;
chart.update();
expect(chart.titleBlock.fullWidth).toBe(false);
expect(chart.titleBlock.weight).toBe(42);
});
- it ('should remove the title if the new options are false', function() {
+ xit ('should remove the title if the new options are false', function() {
var chart = acquireChart({
type: 'line',
data: {
});
expect(chart.titleBlock).not.toBe(undefined);
- chart.options.title = false;
+ chart.options.plugins.title = false;
chart.update();
expect(chart.titleBlock).toBe(undefined);
});
}]
},
options: {
- title: false
+ plugins: {
+ title: false
+ }
}
});
expect(chart.titleBlock).toBe(undefined);
- chart.options.title = {};
+ chart.options.plugins.title = {};
chart.update();
expect(chart.titleBlock).not.toBe(undefined);
expect(chart.titleBlock.options).toEqual(jasmine.objectContaining(Chart.defaults.plugins.title));
labels: ['Point 1', 'Point 2', 'Point 3']
},
options: {
- tooltips: {
- mode: 'index',
- intersect: false,
+ plugins: {
+ tooltip: {
+ mode: 'index',
+ intersect: false,
+ }
},
hover: {
mode: 'index',
labels: ['Point 1', 'Point 2', 'Point 3']
},
options: {
- tooltips: {
- mode: 'index',
- intersect: true
+ plugins: {
+ tooltip: {
+ mode: 'index',
+ intersect: true
+ }
}
}
});
labels: ['Point 1', 'Point 2', 'Point 3']
},
options: {
- tooltips: {
- mode: 'nearest',
- intersect: true
+ plugins: {
+ tooltip: {
+ mode: 'nearest',
+ intersect: true
+ }
}
}
});
labels: ['Point 1', 'Point 2', 'Point 3']
},
options: {
- tooltips: {
- mode: 'index',
- callbacks: {
- beforeTitle: function() {
- return 'beforeTitle';
- },
- title: function() {
- return 'title';
- },
- afterTitle: function() {
- return 'afterTitle';
- },
- beforeBody: function() {
- return 'beforeBody';
- },
- beforeLabel: function() {
- return 'beforeLabel';
- },
- label: function() {
- return 'label';
- },
- afterLabel: function() {
- return 'afterLabel';
- },
- afterBody: function() {
- return 'afterBody';
- },
- beforeFooter: function() {
- return 'beforeFooter';
- },
- footer: function() {
- return 'footer';
- },
- afterFooter: function() {
- return 'afterFooter';
- },
- labelTextColor: function() {
- return 'labelTextColor';
- },
- labelPointStyle: function() {
- return {
- pointStyle: 'labelPointStyle',
- rotation: 42
- };
+ plugins: {
+ tooltip: {
+ mode: 'index',
+ callbacks: {
+ beforeTitle: function() {
+ return 'beforeTitle';
+ },
+ title: function() {
+ return 'title';
+ },
+ afterTitle: function() {
+ return 'afterTitle';
+ },
+ beforeBody: function() {
+ return 'beforeBody';
+ },
+ beforeLabel: function() {
+ return 'beforeLabel';
+ },
+ label: function() {
+ return 'label';
+ },
+ afterLabel: function() {
+ return 'afterLabel';
+ },
+ afterBody: function() {
+ return 'afterBody';
+ },
+ beforeFooter: function() {
+ return 'beforeFooter';
+ },
+ footer: function() {
+ return 'footer';
+ },
+ afterFooter: function() {
+ return 'afterFooter';
+ },
+ labelTextColor: function() {
+ return 'labelTextColor';
+ },
+ labelPointStyle: function() {
+ return {
+ pointStyle: 'labelPointStyle',
+ rotation: 42
+ };
+ }
}
}
}
type: 'linear'
}
},
- tooltips: {
- mode: 'index',
- callbacks: {
- beforeLabel: function(ctx) {
- return ctx.dataPoint.x + ',' + ctx.dataPoint.y;
+ plugins: {
+ tooltip: {
+ mode: 'index',
+ callbacks: {
+ beforeLabel: function(ctx) {
+ return ctx.dataPoint.x + ',' + ctx.dataPoint.y;
+ }
}
}
}
labels: ['Point 1', 'Point 2', 'Point 3']
},
options: {
- tooltips: {
- mode: 'index',
- itemSort: function(a, b) {
- return a.datasetIndex > b.datasetIndex ? -1 : 1;
+ plugins: {
+ tooltip: {
+ mode: 'index',
+ itemSort: function(a, b) {
+ return a.datasetIndex > b.datasetIndex ? -1 : 1;
+ }
}
}
}
labels: ['Point 1', 'Point 2', 'Point 3']
},
options: {
- tooltips: {
- mode: 'index',
- reverse: true
+ plugins: {
+ tooltip: {
+ mode: 'index',
+ reverse: true
+ }
}
}
});
labels: ['Point 1', 'Point 2', 'Point 3']
},
options: {
- tooltips: {
- mode: 'index'
+ plugins: {
+ tooltip: {
+ mode: 'index'
+ }
}
}
});
labels: ['Point 1', 'Point 2', 'Point 3']
},
options: {
- tooltips: {
- mode: 'index',
- filter: function(tooltipItem, index, tooltipItems, data) {
- // For testing purposes remove the first dataset that has a tooltipHidden property
- return !data.datasets[tooltipItem.datasetIndex].tooltipHidden;
+ plugins: {
+ tooltip: {
+ mode: 'index',
+ filter: function(tooltipItem, index, tooltipItems, data) {
+ // For testing purposes remove the first dataset that has a tooltipHidden property
+ return !data.datasets[tooltipItem.datasetIndex].tooltipHidden;
+ }
}
}
}
labels: ['Point 1', 'Point 2', 'Point 3']
},
options: {
- tooltips: {
- caretPadding: 10
+ plugins: {
+ tooltip: {
+ caretPadding: 10
+ }
}
}
});
labels: ['Point 1', 'Point 2', 'Point 3']
},
options: {
- tooltips: {
- mode: 'nearest',
- intersect: true
+ plugins: {
+ tooltip: {
+ mode: 'nearest',
+ intersect: true
+ }
}
}
});
labels: ['Point 1', 'Point 2', 'Point 3']
},
options: {
- tooltips: {
- mode: 'nearest',
- intersect: true,
- callbacks: {
- title: function() {
- return 'registering callback...';
+ plugins: {
+ tooltip: {
+ mode: 'nearest',
+ intersect: true,
+ callbacks: {
+ title: function() {
+ return 'registering callback...';
+ }
}
}
}
stacked: true
}
},
- tooltips: {
- mode: 'nearest',
- position: 'nearest',
- intersect: true,
- callbacks: {
- title: function() {
- return 'registering callback...';
+ plugins: {
+ tooltip: {
+ mode: 'nearest',
+ position: 'nearest',
+ intersect: true,
+ callbacks: {
+ title: function() {
+ return 'registering callback...';
+ }
}
}
}
labels: ['Point 1', 'Point 2', 'Point 3']
},
options: {
- tooltips: {
- mode: 'nearest',
- position: 'test'
+ plugins: {
+ tooltip: {
+ mode: 'nearest',
+ position: 'test'
+ }
}
}
});
// without this slice center point is calculated wrong
animateRotate: false
},
- tooltips: {
- animation: false
+ plugins: {
+ tooltip: {
+ animation: false
+ }
}
}
});
labels: ['Point 1', 'Point 2', 'Point 3']
},
options: {
- tooltips: {
- mode: 'index',
- callbacks: {
- beforeTitle: function() {
- return 'beforeTitle\nnewline';
- },
- title: function() {
- return 'title\nnewline';
- },
- afterTitle: function() {
- return 'afterTitle\nnewline';
- },
- beforeBody: function() {
- return 'beforeBody\nnewline';
- },
- beforeLabel: function() {
- return 'beforeLabel\nnewline';
- },
- label: function() {
- return 'label';
- },
- afterLabel: function() {
- return 'afterLabel\nnewline';
- },
- afterBody: function() {
- return 'afterBody\nnewline';
- },
- beforeFooter: function() {
- return 'beforeFooter\nnewline';
- },
- footer: function() {
- return 'footer\nnewline';
- },
- afterFooter: function() {
- return 'afterFooter\nnewline';
- },
- labelTextColor: function() {
- return 'labelTextColor';
+ plugins: {
+ tooltip: {
+ mode: 'index',
+ callbacks: {
+ beforeTitle: function() {
+ return 'beforeTitle\nnewline';
+ },
+ title: function() {
+ return 'title\nnewline';
+ },
+ afterTitle: function() {
+ return 'afterTitle\nnewline';
+ },
+ beforeBody: function() {
+ return 'beforeBody\nnewline';
+ },
+ beforeLabel: function() {
+ return 'beforeLabel\nnewline';
+ },
+ label: function() {
+ return 'label';
+ },
+ afterLabel: function() {
+ return 'afterLabel\nnewline';
+ },
+ afterBody: function() {
+ return 'afterBody\nnewline';
+ },
+ beforeFooter: function() {
+ return 'beforeFooter\nnewline';
+ },
+ footer: function() {
+ return 'footer\nnewline';
+ },
+ afterFooter: function() {
+ return 'afterFooter\nnewline';
+ },
+ labelTextColor: function() {
+ return 'labelTextColor';
+ }
}
}
}
var tooltip = new Tooltip({
_chart: {
options: {
- tooltips: {
- animation: false,
+ plugins: {
+ tooltip: {
+ animation: false,
+ }
}
}
}
}
}
},
- legend: false
+ plugins: {
+ legend: false
+ }
});
const scale = chart.scales.x;
expect(scale.getPixelForDecimal(0)).toBeCloseToPixel(29);
ScaleType
} from '../interfaces';
import { ElementChartOptions } from '../elements';
-import { PluginOptions, PluginChartOptions } from '../plugins';
+import { PluginOptions } from '../plugins';
export interface DateAdapterBase {
/**
controllers: {
[key in ChartType]: DeepPartial<
CoreChartOptions &
- PluginChartOptions &
ElementChartOptions &
DatasetChartOptions<key>[key] &
ScaleChartOptions<key> &
route(scope: string, name: string, targetScope: string, targetName: string): void;
}
-export const defaults: Defaults & DeepPartial<PluginChartOptions>;
+export const defaults: Defaults;
export interface Element<T = {}, O = {}> {
readonly x: number;
} from './controllers';
import { CoreChartOptions } from './core/interfaces';
import { ElementChartOptions } from './elements';
-import { FillerControllerDatasetOptions, PluginChartOptions } from './plugins';
+import { FillerControllerDatasetOptions } from './plugins';
import { Plugin } from './core';
import {
LinearScaleOptions,
export type ChartOptions<TType extends ChartType = ChartType> = DeepPartial<
CoreChartOptions &
- PluginChartOptions &
ElementChartOptions &
DatasetChartOptions<TType> &
ScaleChartOptions<TType> &
};
}
-export interface LegendChartOptions {
- legend: LegendOptions;
-}
-
export const Title: Plugin;
export interface TitleOptions {
text: string | string[];
}
-export interface TitleChartOptions {
- title: TitleOptions;
-}
-
export type TooltipAlignment = 'start' | 'center' | 'end';
export interface TooltipModel {
callbacks: TooltipCallbacks;
}
-export interface TooltipChartOptions {
- tooltips: TooltipOptions;
-}
-
export interface TooltipItem {
/**
* The chart the tooltip is being shown on
title: TitleOptions;
tooltip: TooltipOptions;
}
-
-export interface PluginChartOptions extends LegendChartOptions, TitleChartOptions, TooltipChartOptions {
-}
projects / thirdparty / Chart.js.git / commitdiff
