The properties `dataset.xAxisID` or `dataset.yAxisID` have to match to `scales` property. This is especially needed if multi-axes charts are used.
```javascript
-var myChart = new Chart(ctx, {
+const myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
In the example below, we are creating two Y axes. We then use the `yAxisID` property to map the datasets to their correct axes.
```javascript
-var myChart = new Chart(ctx, {
+const myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
For example, to create a chart with a time scale that always displayed units per month, the following config could be used.
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
For example, to set the display format for the `quarter` unit to show the month and year, the following config might be passed to the chart constructor.
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
## Example
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
In the following example, every label of the Y-axis would be displayed with a dollar sign at the front.
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
Bar charts can be configured into stacked bar charts by changing the settings on the X and Y axes to enable stacking. Stacked bar charts can be used to show how one data series is made up of a number of smaller pieces.
```javascript
-var stackedBar = new Chart(ctx, {
+const stackedBar = new Chart(ctx, {
type: 'bar',
data: data,
options: {
Line charts can be configured into stacked area charts by changing the settings on the y-axis to enable stacking. Stacked area charts can be used to show how one data trend is made up of a number of smaller pieces.
```javascript
-var stackedLine = new Chart(ctx, {
+const stackedLine = new Chart(ctx, {
type: 'line',
data: data,
options: {
When creating a mixed chart, we specify the chart type on each dataset.
```javascript
-var mixedChart = new Chart(ctx, {
+const mixedChart = new Chart(ctx, {
data: {
datasets: [{
type: 'bar',
The `order` property behaves like a weight instead of a specific order, so the higher the number, the sooner that dataset is drawn on the canvas and thus other datasets with a lower order number will get drawn over it.
```javascript
-var mixedChart = new Chart(ctx, {
+const mixedChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
The following example fills a progress bar during the chart animation.
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
Chart.defaults.interaction.mode = 'nearest';
// Interaction mode is set to nearest because it was not overridden here
-var chartInteractionModeNearest = new Chart(ctx, {
+const chartInteractionModeNearest = new Chart(ctx, {
type: 'line',
data: data
});
// This chart would have the interaction mode that was passed in
-var chartDifferentInteractionMode = new Chart(ctx, {
+const chartDifferentInteractionMode = new Chart(ctx, {
type: 'line',
data: data,
options: {
Chart.defaults.datasets.line.showLine = false;
// This chart would show a line only for the third dataset
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
For example, to have the chart only respond to click events, you could do:
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
Events for each plugin can be further limited by defining (allowed) events array in plugin options:
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
Events that do not fire over chartArea, like `mouseout`, can be captured using a simple plugin:
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
Finds all of the items that intersect the point.
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
Gets the items that are at the nearest distance to the point. The nearest item is determined based on the distance to the center of the chart item (point, bar). You can use the `axis` setting to define which directions are used in distance calculation. If `intersect` is true, this is only triggered when the mouse position intersects an item in the graph. This is very useful for combo charts where points are hidden behind bars.
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
Finds item at the same index. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item, in the x direction, is used to determine the index.
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
To use index mode in a chart like the horizontal bar chart, where we search along the y direction, you can use the `axis` setting introduced in v2.7.0. By setting this value to `'y'` on the y direction is used.
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
Finds items in the same dataset. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item is used to determine the index.
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
Returns all items that would intersect based on the `X` coordinate of the position only. Would be useful for a vertical cursor implementation. Note that this only applies to cartesian charts.
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
Returns all items that would intersect based on the `Y` coordinate of the position. This would be useful for a horizontal cursor implementation. Note that this only applies to cartesian charts.
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
The following example will create a chart with the legend enabled and turn all of the text red in color.
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
Lets say we wanted instead to link the display of the first two datasets. We could change the click handler accordingly.
```javascript
-var defaultLegendClickHandler = Chart.defaults.plugins.legend.onClick;
-var pieDoughnutLegendClickHandler = Chart.controllers.doughnut.overrides.plugins.legend.onClick;
-var newLegendClickHandler = function (e, legendItem, legend) {
- var index = legendItem.datasetIndex;
- var type = legend.chart.config.type;
+const defaultLegendClickHandler = Chart.defaults.plugins.legend.onClick;
+const pieDoughnutLegendClickHandler = Chart.controllers.doughnut.overrides.plugins.legend.onClick;
+const newLegendClickHandler = function (e, legendItem, legend) {
+ const index = legendItem.datasetIndex;
+ const type = legend.chart.config.type;
if (index > 1) {
// Do the original logic
}
};
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
```javascript
function beforePrintHandler () {
- for (var id in Chart.instances) {
+ for (let id in Chart.instances) {
Chart.instances[id].resize();
}
}
The example below would enable a title of 'Custom Chart Subtitle' on the chart that is created.
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
The example below would enable a title of 'Custom Chart Title' on the chart that is created.
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
This example shows how to specify separate top and bottom title text padding:
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
const tooltipPlugin = Chart.registry.getPlugin('tooltip');
tooltipPlugin.positioners.myCustomPositioner = function(elements, eventPosition) {
/** @type {Tooltip} */
- var tooltip = this;
+ const tooltip = this;
/* ... */
The `label` callback can change the text that displays for a given data point. A common example to show a unit. The example below puts a `'$'` before every row.
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltip: {
callbacks: {
label: function(context) {
- var label = context.dataset.label || '';
+ const label = context.dataset.label || '';
if (label) {
label += ': ';
For example, to return a red box with a blue dashed border that has a border radius for each item in the tooltip you could do:
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
For example, to draw triangles instead of the regular color box for each item in the tooltip you could do:
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
External tooltips allow you to hook into the tooltip rendering process so that you can render the tooltip in your own custom way. Generally this is used to create an HTML tooltip instead of an on-canvas tooltip. The `external` option takes a function which is passed a context parameter containing the `chart` and `tooltip`. You can enable external tooltips in the global or chart configuration like so:
```javascript
-var myPieChart = new Chart(ctx, {
+const myPieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
external: function(context) {
// Tooltip Element
- var tooltipEl = document.getElementById('chartjs-tooltip');
+ const tooltipEl = document.getElementById('chartjs-tooltip');
// Create element on first render
if (!tooltipEl) {
}
// Hide if no tooltip
- var tooltipModel = context.tooltip;
+ const tooltipModel = context.tooltip;
if (tooltipModel.opacity === 0) {
tooltipEl.style.opacity = 0;
return;
// Set Text
if (tooltipModel.body) {
- var titleLines = tooltipModel.title || [];
- var bodyLines = tooltipModel.body.map(getBody);
+ const titleLines = tooltipModel.title || [];
+ const bodyLines = tooltipModel.body.map(getBody);
- var innerHtml = '<thead>';
+ const 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;
+ const colors = tooltipModel.labelColors[i];
+ const style = 'background:' + colors.backgroundColor;
style += '; border-color:' + colors.borderColor;
style += '; border-width: 2px';
- var span = '<span style="' + style + '"></span>';
+ const span = '<span style="' + style + '"></span>';
innerHtml += '<tr><td>' + span + body + '</td></tr>';
});
innerHtml += '</tbody>';
- var tableRoot = tooltipEl.querySelector('table');
+ const tableRoot = tooltipEl.querySelector('table');
tableRoot.innerHTML = innerHtml;
}
- var position = context.chart.canvas.getBoundingClientRect();
- var bodyFont = Chart.helpers.toFont(tooltipModel.options.bodyFont);
+ const position = context.chart.canvas.getBoundingClientRect();
+ const bodyFont = Chart.helpers.toFont(tooltipModel.options.bodyFont);
// Display, position, and set styles for font
tooltipEl.style.opacity = 1;
```javascript
// For example:
-var myLineChart = new Chart(ctx, config);
+const myLineChart = new Chart(ctx, config);
```
## .destroy()
if (points.length) {
const firstPoint = points[0];
- var label = myChart.data.labels[firstPoint.index];
- var value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
+ const label = myChart.data.labels[firstPoint.index];
+ const value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
}
}
```
Extensive examples of usage are available in the [Chart.js tests](https://github.com/chartjs/Chart.js/tree/master/test).
```javascript
-var meta = myChart.getDatasetMeta(0);
-var x = meta.data[0].x;
+const meta = myChart.getDatasetMeta(0);
+const x = meta.data[0].x;
```
## setDatasetVisibility(datasetIndex, visibility)
Returns the stored visibility state of an data index for all datasets. Set by [toggleDataVisibility](#toggleDataVisibility). A dataset controller should use this method to determine if an item should not be visible.
```javascript
-var visible = chart.getDataVisibility(2);
+const visible = chart.getDataVisibility(2);
```
## hide(datasetIndex, dataIndex?)
To use the new scale, simply pass in the string key to the config when creating a chart.
```javascript
-var lineChart = new Chart(ctx, {
+const lineChart = new Chart(ctx, {
data: data,
type: 'line',
options: {
Plugins can be shared between chart instances:
```javascript
-var plugin = { /* plugin implementation */ };
+const plugin = { /* plugin implementation */ };
// chart1 and chart2 use "plugin"
-var chart1 = new Chart(ctx, {
+const chart1 = new Chart(ctx, {
plugins: [plugin]
});
-var chart2 = new Chart(ctx, {
+const chart2 = new Chart(ctx, {
plugins: [plugin]
});
// chart3 doesn't use "plugin"
-var chart3 = new Chart(ctx, {});
+const chart3 = new Chart(ctx, {});
```
Plugins can also be defined directly in the chart `plugins` config (a.k.a. *inline plugins*):
:::
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
plugins: [{
beforeInit: function(chart, args, options) {
//..
Plugin options are located under the `options.plugins` config and are scoped by the plugin ID: `options.plugins.{plugin-id}`.
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
options: {
foo: { ... }, // chart 'foo' option
plugins: {
// ...
});
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
options: {
plugins: {
p1: false // disable plugin 'p1' for this instance
To disable all plugins for a specific chart instance, set `options.plugins` to `false`:
```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
options: {
plugins: false // all plugins are disabled for this instance
}
```javascript
function updateScales(chart) {
- var xScale = chart.scales.x;
- var yScale = chart.scales.y;
+ const xScale = chart.scales.x;
+ const yScale = chart.scales.y;
chart.options.scales = {
newId: {
display: true
For example, if you wanted to fill a dataset with a pattern from an image you could do the following.
```javascript
-var img = new Image();
+const img = new Image();
img.src = 'https://example.com/my_image.png';
img.onload = function() {
- var ctx = document.getElementById('canvas').getContext('2d');
- var fillPattern = ctx.createPattern(img, 'repeat');
+ const ctx = document.getElementById('canvas').getContext('2d');
+ const fillPattern = ctx.createPattern(img, 'repeat');
- var chart = new Chart(ctx, {
+ const chart = new Chart(ctx, {
data: {
labels: ['Item 1', 'Item 2', 'Item 3'],
datasets: [{
Using the [Patternomaly](https://github.com/ashiguruma/patternomaly) library you can generate patterns to fill datasets.
```javascript
-var chartData = {
+const chartData = {
datasets: [{
data: [45, 25, 20, 10],
backgroundColor: [
```javascript
color: function(context) {
- var index = context.dataIndex;
- var value = context.dataset.data[index];
+ const index = context.dataIndex;
+ const value = context.dataset.data[index];
return value < 0 ? 'red' : // draw negative values in red
index % 2 ? 'blue' : // else, alternate values in blue and green
'green';
},
borderColor: function(context, options) {
- var color = options.color; // resolve the value of another scriptable option: 'red', 'blue' or 'green'
+ const color = options.color; // resolve the value of another scriptable option: 'red', 'blue' or 'green'
return Chart.helpers.color(color).lighten(0.2);
}
```
<script>
// === include 'setup' then 'config' above ===
- var myChart = new Chart(
+ const myChart = new Chart(
document.getElementById('myChart'),
config
);
```html
<script src="path/to/chartjs/dist/chart.js"></script>
<script>
- var myChart = new Chart(ctx, {...});
+ const myChart = new Chart(ctx, {...});
</script>
```
## Common JS
```javascript
-var Chart = require('chart.js');
-var myChart = new Chart(ctx, {...});
+const Chart = require('chart.js');
+const myChart = new Chart(ctx, {...});
```
## Bundlers (Webpack, Rollup, etc.)
SubTitle
);
-var myChart = new Chart(ctx, {...});
+const myChart = new Chart(ctx, {...});
```
A short registration format is also available to quickly register everything.
```javascript
require(['path/to/chartjs/dist/chart.min.js'], function(Chart){
- var myChart = new Chart(ctx, {...});
+ const myChart = new Chart(ctx, {...});
});
```
```javascript
// Any of the following formats may be used
-var ctx = document.getElementById('myChart');
-var ctx = document.getElementById('myChart').getContext('2d');
-var ctx = $('#myChart');
-var ctx = 'myChart';
+const ctx = document.getElementById('myChart');
+const ctx = document.getElementById('myChart').getContext('2d');
+const ctx = $('#myChart');
+const ctx = 'myChart';
```
Once you have the element or context, you're ready to instantiate a pre-defined chart-type or create your own!
```html
<canvas id="myChart" width="400" height="400"></canvas>
<script>
-var ctx = document.getElementById('myChart');
-var myChart = new Chart(ctx, {
+const ctx = document.getElementById('myChart');
+const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
```html
<canvas id="myChart" width="400" height="400"></canvas>
<script>
-var ctx = document.getElementById('myChart').getContext('2d');
-var myChart = new Chart(ctx, {
+const ctx = document.getElementById('myChart').getContext('2d');
+const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
if (data.datasets.length > 0) {
data.labels = Utils.months({count: data.labels.length + 1});
- for (var index = 0; index < data.datasets.length; ++index) {
+ for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.rand(-100, 100));
}
if (data.datasets.length > 0) {
data.labels = Utils.months({count: data.labels.length + 1});
- for (var index = 0; index < data.datasets.length; ++index) {
+ for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.rand(-100, 100));
}
if (width !== chartWidth || height !== chartHeight) {
cache.clear();
}
- var gradient = cache.get(c1 + c2 + c3);
+ let gradient = cache.get(c1 + c2 + c3);
if (!gradient) {
// Create the gradient because this is either the first render
// or the size of the chart has changed
(chartArea.right - chartArea.left) / 2,
(chartArea.bottom - chartArea.top) / 2
);
- var ctx = context.chart.ctx;
+ const ctx = context.chart.ctx;
gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, r);
gradient.addColorStop(0, c1);
gradient.addColorStop(0.5, c2);
// </block:setup>
// <block:config:0>
-var delayed;
+let delayed;
const config = {
type: 'bar',
data: data,
if (data.datasets.length > 0) {
data.labels = Utils.months({count: data.labels.length + 1});
- for (var index = 0; index < data.datasets.length; ++index) {
+ for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.rand(-100, 100));
}
if (data.datasets.length > 0) {
data.labels = Utils.months({count: data.labels.length + 1});
- for (var index = 0; index < data.datasets.length; ++index) {
+ for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.rand(-100, 100));
}
if (data.datasets.length > 0) {
data.labels = Utils.months({count: data.labels.length + 1});
- for (var index = 0; index < data.datasets.length; ++index) {
+ for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.rand(-100, 100));
}
if (data.datasets.length > 0) {
data.labels = Utils.months({count: data.labels.length + 1});
- for (var index = 0; index < data.datasets.length; ++index) {
+ for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.rand(-100, 100));
}
if (data.datasets.length > 0) {
data.labels = Utils.months({count: data.labels.length + 1});
- for (var index = 0; index < data.datasets.length; ++index) {
+ for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.rand(-100, 100));
}
if (data.datasets.length > 0) {
data.labels = Utils.months({count: data.labels.length + 1});
- for (var index = 0; index < data.datasets.length; ++index) {
+ for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.rand(-100, 100));
}
const data = chart.data;
if (data.datasets.length > 0) {
- for (var index = 0; index < data.datasets.length; ++index) {
+ for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.bubbles({count: 1, rmin: 5, rmax: 15, min: 0, max: 100})[0]);
}
if (data.datasets.length > 0) {
data.labels = Utils.months({count: data.labels.length + 1});
- for (var index = 0; index < data.datasets.length; ++index) {
+ for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.rand(-100, 100));
}
if (data.datasets.length > 0) {
data.labels.push('data #' + (data.labels.length + 1));
- for (var index = 0; index < data.datasets.length; ++index) {
+ for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.rand(0, 100));
}
const labelsOriginal = original.call(this, chart);
// Build an array of colors used in the datasets of the chart
- var datasetColors = chart.data.datasets.map(function(e) {
+ let datasetColors = chart.data.datasets.map(function(e) {
return e.backgroundColor;
});
datasetColors = datasetColors.flat();
if (data.datasets.length > 0) {
data.labels.push('data #' + (data.labels.length + 1));
- for (var index = 0; index < data.datasets.length; ++index) {
+ for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.rand(0, 100));
}
if (data.datasets.length > 0) {
data.labels.push('data #' + (data.labels.length + 1));
- for (var index = 0; index < data.datasets.length; ++index) {
+ for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.rand(0, 100));
}
if (data.datasets.length > 0) {
data.labels = Utils.months({count: data.labels.length + 1});
- for (var index = 0; index < data.datasets.length; ++index) {
+ for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.rand(0, 100));
}
const data = chart.data;
if (data.datasets.length > 0) {
- for (var index = 0; index < data.datasets.length; ++index) {
+ for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.bubbles({count: 1, rmin: 1, rmax: 1, min: -100, max: 100})[0]);
}
const data = chart.data;
if (data.datasets.length > 0) {
- for (var index = 0; index < data.datasets.length; ++index) {
+ for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.bubbles({count: 1, rmin: 1, rmax: 1, min: 0, max: 100})[0]);
}
if (data.datasets.length > 0) {
data.labels = Utils.months({count: data.labels.length + 1});
- for (var index = 0; index < data.datasets.length; ++index) {
+ for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.rand(0, 100));
}
if (data.datasets.length > 0) {
data.labels = Utils.months({count: data.labels.length + 1});
- for (var index = 0; index < data.datasets.length; ++index) {
+ for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.rand(0, 100));
}
```js chart-editor
// <block:setup:2>
-var DATA_COUNT = 16;
+const DATA_COUNT = 16;
Utils.srand(110);
const actions = [
// <block:options:0>
function colorize(opaque) {
return (ctx) => {
- var v = ctx.parsed.y;
- var c = v < -50 ? '#D60000'
+ const v = ctx.parsed.y;
+ const c = v < -50 ? '#D60000'
: v < 0 ? '#F46300'
: v < 50 ? '#0358B6'
: '#44DE28';
// <block:data:1>
function generateData() {
- var data = [];
- var i;
+ const data = [];
+ let i;
for (i = 0; i < DATA_COUNT; ++i) {
data.push({
}
function colorize(opaque, context) {
- var value = context.raw;
- var x = value.x / 100;
- var y = value.y / 100;
- var r = channelValue(x, y, [250, 150, 50, 0]);
- var g = channelValue(x, y, [0, 50, 150, 250]);
- var b = channelValue(x, y, [0, 150, 150, 250]);
- var a = opaque ? 1 : 0.5 * value.v / 1000;
+ const value = context.raw;
+ const x = value.x / 100;
+ const y = value.y / 100;
+ const r = channelValue(x, y, [250, 150, 50, 0]);
+ const g = channelValue(x, y, [0, 50, 150, 250]);
+ const b = channelValue(x, y, [0, 150, 150, 250]);
+ const a = opaque ? 1 : 0.5 * value.v / 1000;
return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
}
},
radius: function(context) {
- var size = context.chart.width;
- var base = Math.abs(context.raw.v) / 1000;
+ const size = context.chart.width;
+ const base = Math.abs(context.raw.v) / 1000;
return (size / 24) * base;
}
}
}
function alternatePointStyles(ctx) {
- var index = ctx.dataIndex;
+ const index = ctx.dataIndex;
return index % 2 === 0 ? 'circle' : 'rect';
}
}
function adjustRadiusBasedOnData(ctx) {
- var v = ctx.parsed.y;
+ const v = ctx.parsed.y;
return v < 10 ? 5
: v < 25 ? 7
: v < 50 ? 9
// <block:options:0>
function colorize(opaque, hover, ctx) {
- var v = ctx.parsed;
- var c = v < -50 ? '#D60000'
+ const v = ctx.parsed;
+ const c = v < -50 ? '#D60000'
: v < 0 ? '#F46300'
: v < 50 ? '#0358B6'
: '#44DE28';
- var opacity = hover ? 1 - Math.abs(v / 150) - 0.2 : 1 - Math.abs(v / 150);
+ const opacity = hover ? 1 - Math.abs(v / 150) - 0.2 : 1 - Math.abs(v / 150);
return opaque ? c : Utils.transparentize(c, opacity);
}
// <block:options:0>
function colorize(opaque, hover, ctx) {
- var v = ctx.raw;
- var c = v < 35 ? '#D60000'
+ const v = ctx.raw;
+ const c = v < 35 ? '#D60000'
: v < 55 ? '#F46300'
: v < 75 ? '#0358B6'
: '#44DE28';
- var opacity = hover ? 1 - Math.abs(v / 150) - 0.2 : 1 - Math.abs(v / 150);
+ const opacity = hover ? 1 - Math.abs(v / 150) - 0.2 : 1 - Math.abs(v / 150);
return opaque ? c : Utils.transparentize(c, opacity);
}
}
function alternatePointStyles(ctx) {
- var index = ctx.dataIndex;
+ const index = ctx.dataIndex;
return index % 2 === 0 ? 'circle' : 'rect';
}
}
function adjustRadiusBasedOnData(ctx) {
- var v = ctx.parsed.y;
+ const v = ctx.parsed.y;
return v < 10 ? 5
: v < 25 ? 7
: v < 50 ? 9
projects / thirdparty / Chart.js.git / commitdiff
