| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
| ---- | ---- | :----: | :----: | ----
-| [`backgroundColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0, 0, 0, 0.1)'`
-| [`borderCapStyle`](#line-styling) | `string` | - | - | `'butt'`
-| [`borderColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0, 0, 0, 0.1)'`
-| [`borderDash`](#line-styling) | `number[]` | - | - | `[]`
-| [`borderDashOffset`](#line-styling) | `number` | - | - | `0.0`
-| [`borderJoinStyle`](#line-styling) | `string` | - | - | `'miter'`
-| [`borderWidth`](#line-styling) | `number` | - | - | `3`
-| [`cubicInterpolationMode`](#cubicinterpolationmode) | `string` | - | - | `''`
-| [`fill`](#line-styling) | <code>boolean|string</code> | - | - | `true`
+| [`backgroundColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `'rgba(0, 0, 0, 0.1)'`
+| [`borderCapStyle`](#line-styling) | `string` | Yes | - | `'butt'`
+| [`borderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `'rgba(0, 0, 0, 0.1)'`
+| [`borderDash`](#line-styling) | `number[]` | Yes | - | `[]`
+| [`borderDashOffset`](#line-styling) | `number` | Yes | - | `0.0`
+| [`borderJoinStyle`](#line-styling) | `string` | Yes | - | `'miter'`
+| [`borderWidth`](#line-styling) | `number` | Yes | - | `3`
+| [`cubicInterpolationMode`](#cubicinterpolationmode) | `string` | Yes | - | `''`
+| [`fill`](#line-styling) | <code>boolean|string</code> | Yes | - | `true`
| [`label`](#general) | `string` | - | - | `''`
| [`lineTension`](#line-styling) | `number` | - | - | `0.4`
| [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
utils.srand(110);
+ function getLineColor(ctx) {
+ return utils.color(ctx.datasetIndex);
+ }
+
function alternatePointStyles(ctx) {
var index = ctx.dataIndex;
return index % 2 === 0 ? 'circle' : 'rect';
}
function makeHalfAsOpaque(ctx) {
- var c = ctx.dataset.backgroundColor;
- return utils.transparentize(c);
+ return utils.transparentize(getLineColor(ctx));
}
function adjustRadiusBasedOnData(ctx) {
var data = {
labels: utils.months({count: DATA_COUNT}),
datasets: [{
- data: generateData(),
- backgroundColor: '#4dc9f6',
- borderColor: '#4dc9f6',
+ data: generateData()
}]
};
elements: {
line: {
fill: false,
+ backgroundColor: getLineColor,
+ borderColor: getLineColor,
},
point: {
+ backgroundColor: getLineColor,
hoverBackgroundColor: makeHalfAsOpaque,
radius: adjustRadiusBasedOnData,
pointStyle: alternatePointStyles,
// eslint-disable-next-line no-unused-vars
function addDataset() {
- var newColor = utils.color(chart.data.datasets.length);
-
chart.data.datasets.push({
- data: generateData(),
- backgroundColor: newColor,
- borderColor: newColor
+ data: generateData()
});
chart.update();
}
_resolveLineOptions: function(element) {
var me = this;
var chart = me.chart;
- var dataset = chart.data.datasets[me.index];
+ var datasetIndex = me.index;
+ var dataset = chart.data.datasets[datasetIndex];
var custom = element.custom || {};
var options = chart.options;
var elementOptions = options.elements.line;
var values = {};
var i, ilen, key;
+ // Scriptable options
+ var context = {
+ chart: chart,
+ dataset: dataset,
+ datasetIndex: datasetIndex
+ };
+
var keys = [
'backgroundColor',
- 'borderWidth',
- 'borderColor',
'borderCapStyle',
+ 'borderColor',
'borderDash',
'borderDashOffset',
'borderJoinStyle',
- 'fill',
- 'cubicInterpolationMode'
+ 'borderWidth',
+ 'cubicInterpolationMode',
+ 'fill'
];
for (i = 0, ilen = keys.length; i < ilen; ++i) {
custom[key],
dataset[key],
elementOptions[key]
- ]);
+ ], context);
}
// The default behavior of lines is to break at null values, according
datasets: [
{
// option in dataset
- data: [0, 5, 10, null, -10, -5],
- pointBackgroundColor: function(ctx) {
- var value = ctx.dataset.data[ctx.dataIndex] || 0;
- return value > 8 ? '#ff0000'
- : value > 0 ? '#00ff00'
- : value > -8 ? '#0000ff'
+ data: [4, 5, 10, null, -10, -5],
+ backgroundColor: function(ctx) {
+ var index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex);
+ return index === 0 ? '#ff0000'
+ : index === 1 ? '#00ff00'
: '#ff00ff';
}
},
{
// option in element (fallback)
- data: [4, -5, -10, null, 10, 5],
+ data: [-4, -5, -10, null, 10, 5],
}
]
},
title: false,
elements: {
line: {
- fill: false,
+ backgroundColor: function(ctx) {
+ var index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex);
+ return index === 0 ? '#ff0000'
+ : index === 1 ? '#00ff00'
+ : '#ff00ff';
+ }
},
point: {
- backgroundColor: function(ctx) {
- var value = ctx.dataset.data[ctx.dataIndex] || 0;
- return value > 8 ? '#ff00ff'
- : value > 0 ? '#0000ff'
- : value > -8 ? '#ff0000'
- : '#00ff00';
- },
- radius: 10,
+ backgroundColor: '#0000ff',
+ radius: 10
}
},
+ layout: {
+ padding: 32
+ },
scales: {
xAxes: [{display: false}],
yAxes: [
{
// option in dataset
data: [0, 5, 10, null, -10, -5],
- pointBackgroundColor: '#ff0000'
+ backgroundColor: '#ff0000'
},
{
// option in element (fallback)
title: false,
elements: {
line: {
- fill: false,
+ backgroundColor: '#00ff00'
},
point: {
- backgroundColor: '#00ff00',
- radius: 10,
+ radius: 10
}
},
+ layout: {
+ padding: 32
+ },
scales: {
xAxes: [{display: false}],
yAxes: [{display: false}]
--- /dev/null
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ labels: [0, 1, 2, 3],
+ datasets: [
+ {
+ // option in dataset
+ data: [null, 3, 3],
+ borderCapStyle: function(ctx) {
+ var index = (ctx.datasetIndex % 2);
+ return index === 0 ? 'round'
+ : index === 1 ? 'square'
+ : 'butt';
+ }
+ },
+ {
+ // option in element (fallback)
+ data: [null, 2, 2],
+ },
+ {
+ // option in element (fallback)
+ data: [null, 1, 1],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ borderCapStyle: function(ctx) {
+ var index = (ctx.datasetIndex % 3);
+ return index === 0 ? 'round'
+ : index === 1 ? 'square'
+ : 'butt';
+ },
+ borderColor: '#ff0000',
+ borderWidth: 32,
+ fill: false
+ },
+ point: {
+ radius: 10,
+ }
+ },
+ layout: {
+ padding: 32
+ },
+ scales: {
+ xAxes: [{display: false}],
+ yAxes: [
+ {
+ display: false,
+ ticks: {
+ beginAtZero: true
+ }
+ }
+ ]
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ labels: [0, 1, 2, 3],
+ datasets: [
+ {
+ // option in dataset
+ data: [null, 3, 3],
+ borderCapStyle: 'round',
+ },
+ {
+ // option in dataset
+ data: [null, 2, 2],
+ borderCapStyle: 'square',
+ },
+ {
+ // option in element (fallback)
+ data: [null, 1, 1],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ borderCapStyle: 'butt',
+ borderColor: '#00ff00',
+ borderWidth: 32,
+ fill: false,
+ },
+ point: {
+ radius: 10,
+ }
+ },
+ layout: {
+ padding: 32
+ },
+ scales: {
+ xAxes: [{display: false}],
+ yAxes: [{display: false}]
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
datasets: [
{
// option in dataset
- data: [0, 5, 10, null, -10, -5],
- pointBorderColor: function(ctx) {
- var value = ctx.dataset.data[ctx.dataIndex] || 0;
- return value > 8 ? '#ff0000'
- : value > 0 ? '#00ff00'
- : value > -8 ? '#0000ff'
- : '#ff00ff';
+ data: [4, 5, 10, null, -10, -5],
+ borderColor: function(ctx) {
+ var index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex);
+ return index === 0 ? '#ff0000'
+ : index === 1 ? '#00ff00'
+ : '#0000ff';
}
},
{
// option in element (fallback)
- data: [4, -5, -10, null, 10, 5],
+ data: [-4, -5, -10, null, 10, 5]
}
]
},
title: false,
elements: {
line: {
- fill: false,
- },
- point: {
borderColor: function(ctx) {
- var value = ctx.dataset.data[ctx.dataIndex] || 0;
- return value > 8 ? '#ff00ff'
- : value > 0 ? '#0000ff'
- : value > -8 ? '#ff0000'
- : '#00ff00';
+ var index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex);
+ return index === 0 ? '#ff0000'
+ : index === 1 ? '#00ff00'
+ : '#0000ff';
},
- radius: 10,
+ borderWidth: 10,
+ fill: false
+ },
+ point: {
+ borderColor: '#ff0000',
+ borderWidth: 10,
+ radius: 16
}
},
+ layout: {
+ padding: 32
+ },
scales: {
xAxes: [{display: false}],
yAxes: [
{
// option in dataset
data: [0, 5, 10, null, -10, -5],
- pointBorderColor: '#ff0000'
+ borderColor: '#ff0000'
},
{
// option in element (fallback)
title: false,
elements: {
line: {
+ borderColor: '#0000ff',
fill: false,
},
point: {
- borderColor: '#00ff00',
+ borderColor: '#0000ff',
radius: 10,
}
},
+ layout: {
+ padding: 32
+ },
scales: {
xAxes: [{display: false}],
yAxes: [{display: false}]
--- /dev/null
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [4, 5, 10, null, -10, -5],
+ borderDash: function(ctx) {
+ return ctx.datasetIndex === 0 ? [5] : [10];
+ }
+ },
+ {
+ // option in element (fallback)
+ data: [-4, -5, -10, null, 10, 5]
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ borderColor: '#00ff00',
+ borderDash: function(ctx) {
+ return ctx.datasetIndex === 0 ? [5] : [10];
+ }
+ },
+ point: {
+ radius: 10,
+ }
+ },
+ layout: {
+ padding: 32
+ },
+ scales: {
+ xAxes: [{display: false}],
+ yAxes: [
+ {
+ display: false,
+ ticks: {
+ beginAtZero: true
+ }
+ }
+ ]
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 5, 10, null, -10, -5],
+ borderColor: '#ff0000',
+ borderDash: [5]
+ },
+ {
+ // option in element (fallback)
+ data: [4, -5, -10, null, 10, 5],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ borderColor: '#00ff00',
+ borderDash: [10],
+ fill: false,
+ },
+ point: {
+ radius: 10,
+ }
+ },
+ layout: {
+ padding: 32
+ },
+ scales: {
+ xAxes: [{display: false}],
+ yAxes: [{display: false}]
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ labels: [0, 1, 2, 3],
+ datasets: [
+ {
+ // option in dataset
+ data: [1, 1, 1, 1],
+ borderColor: '#ff0000',
+ borderDash: [20],
+ borderDashOffset: function(ctx) {
+ return ctx.datasetIndex === 0 ? 5.0 : 0.0;
+ }
+ },
+ {
+ // option in element (fallback)
+ data: [0, 0, 0, 0]
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ borderColor: '#00ff00',
+ borderDash: [20],
+ borderDashOffset: function(ctx) {
+ return ctx.datasetIndex === 0 ? 5.0 : 0.0;
+ },
+ fill: false,
+ },
+ point: {
+ radius: 10,
+ }
+ },
+ layout: {
+ padding: 32
+ },
+ scales: {
+ xAxes: [{display: false}],
+ yAxes: [{display: false}]
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [1, 1, 1, 1, 1, 1],
+ borderColor: '#ff0000',
+ borderDash: [20],
+ borderDashOffset: 5.0
+ },
+ {
+ // option in element (fallback)
+ data: [0, 0, 0, 0, 0, 0]
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ borderColor: '#00ff00',
+ borderDash: [20],
+ borderDashOffset: 0.0, // default
+ fill: false,
+ },
+ point: {
+ radius: 10,
+ }
+ },
+ layout: {
+ padding: 32
+ },
+ scales: {
+ xAxes: [{display: false}],
+ yAxes: [{display: false}]
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ labels: [0, 1, 2],
+ datasets: [
+ {
+ // option in dataset
+ data: [6, 18, 6],
+ borderColor: '#ff0000',
+ borderJoinStyle: function(ctx) {
+ var index = ctx.datasetIndex % 3;
+ return index === 0 ? 'round'
+ : index === 1 ? 'miter'
+ : 'bevel';
+ }
+ },
+ {
+ // option in element (fallback)
+ data: [2, 14, 2],
+ borderColor: '#0000ff',
+ },
+ {
+ // option in element (fallback)
+ data: [-2, 10, -2]
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ borderColor: '#00ff00',
+ borderJoinStyle: function(ctx) {
+ var index = (ctx.datasetIndex % 3);
+ return index === 0 ? 'round'
+ : index === 1 ? 'miter'
+ : 'bevel';
+ },
+ borderWidth: 25,
+ fill: false,
+ tension: 0
+ }
+ },
+ layout: {
+ padding: 32
+ },
+ scales: {
+ xAxes: [{display: false}],
+ yAxes: [{display: false}]
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ labels: [0, 1, 2],
+ datasets: [
+ {
+ // option in dataset
+ data: [6, 18, 6],
+ borderColor: '#ff0000',
+ borderJoinStyle: 'round',
+ },
+ {
+ // option in element (fallback)
+ data: [2, 14, 2],
+ borderColor: '#0000ff',
+ borderJoinStyle: 'bevel',
+ },
+ {
+ // option in element (fallback)
+ data: [-2, 10, -2]
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ borderColor: '#00ff00',
+ borderJoinStyle: 'miter',
+ borderWidth: 25,
+ fill: false,
+ tension: 0
+ }
+ },
+ layout: {
+ padding: 32
+ },
+ scales: {
+ xAxes: [{display: false}],
+ yAxes: [{display: false}]
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
datasets: [
{
// option in dataset
- data: [0, 5, 10, null, -10, -5],
- pointBorderColor: '#0000ff',
- pointBorderWidth: function(ctx) {
- var value = ctx.dataset.data[ctx.dataIndex] || 0;
- return value > 4 ? 10
- : value > -4 ? 5
- : 2;
- }
+ data: [4, 5, 10, null, -10, -5],
+ borderColor: '#0000ff',
+ borderWidth: function(ctx) {
+ var index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex);
+ return index % 2 ? 10 : 20;
+ },
+ pointBorderColor: '#00ff00'
},
{
// option in element (fallback)
- data: [4, -5, -10, null, 10, 5],
+ data: [-4, -5, -10, null, 10, 5],
}
]
},
title: false,
elements: {
line: {
- fill: false,
- },
- point: {
borderColor: '#ff0000',
borderWidth: function(ctx) {
- var value = ctx.dataset.data[ctx.dataIndex] || 0;
- return value > 4 ? 2
- : value > -4 ? 5
- : 10;
+ var index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex);
+ return index % 2 ? 10 : 20;
},
- radius: 10,
+ fill: false,
+ },
+ point: {
+ borderColor: '#00ff00',
+ borderWidth: 5,
+ radius: 10
}
},
+ layout: {
+ padding: 32
+ },
scales: {
xAxes: [{display: false}],
yAxes: [
{
// option in dataset
data: [0, 5, 10, null, -10, -5],
- pointBorderColor: '#0000ff',
- pointBorderWidth: 6
+ borderColor: '#0000ff',
+ borderWidth: 6
},
{
// option in element (fallback)
title: false,
elements: {
line: {
+ borderColor: '#00ff00',
+ borderWidth: 3,
fill: false,
},
point: {
- borderColor: '#00ff00',
- borderWidth: 3,
radius: 10,
}
},
+ layout: {
+ padding: 32
+ },
scales: {
xAxes: [{display: false}],
yAxes: [{display: false}]
--- /dev/null
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 4, 2, 6, 4, 8],
+ borderColor: '#ff0000',
+ cubicInterpolationMode: function(ctx) {
+ return ctx.datasetIndex === 0 ? 'monotone' : 'default';
+ }
+ },
+ {
+ // option in element (fallback)
+ data: [2, 6, 4, 8, 6, 10],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ borderColor: '#00ff00',
+ borderWidth: 20,
+ cubicInterpolationMode: function(ctx) {
+ return ctx.datasetIndex === 0 ? 'monotone' : 'default';
+ },
+ fill: false
+ }
+ },
+ layout: {
+ padding: 32
+ },
+ scales: {
+ xAxes: [{display: false}],
+ yAxes: [{display: false}]
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 4, 2, 6, 4, 8],
+ borderColor: '#ff0000',
+ cubicInterpolationMode: 'monotone'
+ },
+ {
+ // option in element (fallback)
+ data: [2, 6, 4, 8, 6, 10]
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ borderColor: '#00ff00',
+ borderWidth: 20,
+ cubicInterpolationMode: 'default',
+ fill: false,
+ }
+ },
+ layout: {
+ padding: 32
+ },
+ scales: {
+ xAxes: [{display: false}],
+ yAxes: [{display: false}]
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [-2, -6, -4, -8, -6, -10],
+ backgroundColor: '#ff0000',
+ fill: function(ctx) {
+ return ctx.datasetIndex === 0 ? true : false;
+ }
+ },
+ {
+ // option in element (fallback)
+ data: [0, 4, 2, 6, 4, 8],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ backgroundColor: '#00ff00',
+ fill: function(ctx) {
+ return ctx.datasetIndex === 0 ? true : false;
+ }
+ }
+ },
+ layout: {
+ padding: 32
+ },
+ scales: {
+ xAxes: [{display: false}],
+ yAxes: [{display: false}]
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [-2, -6, -4, -8, -6, -10],
+ backgroundColor: '#ff0000',
+ fill: false
+ },
+ {
+ // option in element (fallback)
+ data: [0, 4, 2, 6, 4, 8],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ backgroundColor: '#00ff00',
+ fill: true,
+ }
+ },
+ layout: {
+ padding: 32
+ },
+ scales: {
+ xAxes: [{display: false}],
+ yAxes: [{display: false}]
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 5, 10, null, -10, -5],
+ pointBackgroundColor: function(ctx) {
+ var value = ctx.dataset.data[ctx.dataIndex] || 0;
+ return value > 8 ? '#ff0000'
+ : value > 0 ? '#00ff00'
+ : value > -8 ? '#0000ff'
+ : '#ff00ff';
+ }
+ },
+ {
+ // option in element (fallback)
+ data: [4, -5, -10, null, 10, 5],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ fill: false,
+ },
+ point: {
+ backgroundColor: function(ctx) {
+ var value = ctx.dataset.data[ctx.dataIndex] || 0;
+ return value > 8 ? '#ff00ff'
+ : value > 0 ? '#0000ff'
+ : value > -8 ? '#ff0000'
+ : '#00ff00';
+ },
+ radius: 10,
+ }
+ },
+ scales: {
+ xAxes: [{display: false}],
+ yAxes: [
+ {
+ display: false,
+ ticks: {
+ beginAtZero: true
+ }
+ }
+ ]
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 5, 10, null, -10, -5],
+ pointBackgroundColor: '#ff0000'
+ },
+ {
+ // option in element (fallback)
+ data: [4, -5, -10, null, 10, 5],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ fill: false,
+ },
+ point: {
+ backgroundColor: '#00ff00',
+ radius: 10,
+ }
+ },
+ scales: {
+ xAxes: [{display: false}],
+ yAxes: [{display: false}]
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 5, 10, null, -10, -5],
+ pointBorderColor: function(ctx) {
+ var value = ctx.dataset.data[ctx.dataIndex] || 0;
+ return value > 8 ? '#ff0000'
+ : value > 0 ? '#00ff00'
+ : value > -8 ? '#0000ff'
+ : '#ff00ff';
+ }
+ },
+ {
+ // option in element (fallback)
+ data: [4, -5, -10, null, 10, 5],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ fill: false,
+ },
+ point: {
+ borderColor: function(ctx) {
+ var value = ctx.dataset.data[ctx.dataIndex] || 0;
+ return value > 8 ? '#ff00ff'
+ : value > 0 ? '#0000ff'
+ : value > -8 ? '#ff0000'
+ : '#00ff00';
+ },
+ radius: 10,
+ }
+ },
+ scales: {
+ xAxes: [{display: false}],
+ yAxes: [
+ {
+ display: false,
+ ticks: {
+ beginAtZero: true
+ }
+ }
+ ]
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 5, 10, null, -10, -5],
+ pointBorderColor: '#ff0000'
+ },
+ {
+ // option in element (fallback)
+ data: [4, -5, -10, null, 10, 5],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ fill: false,
+ },
+ point: {
+ borderColor: '#00ff00',
+ radius: 10,
+ }
+ },
+ scales: {
+ xAxes: [{display: false}],
+ yAxes: [{display: false}]
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 5, 10, null, -10, -5],
+ pointBorderColor: '#0000ff',
+ pointBorderWidth: function(ctx) {
+ var value = ctx.dataset.data[ctx.dataIndex] || 0;
+ return value > 4 ? 10
+ : value > -4 ? 5
+ : 2;
+ }
+ },
+ {
+ // option in element (fallback)
+ data: [4, -5, -10, null, 10, 5],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ fill: false,
+ },
+ point: {
+ borderColor: '#ff0000',
+ borderWidth: function(ctx) {
+ var value = ctx.dataset.data[ctx.dataIndex] || 0;
+ return value > 4 ? 2
+ : value > -4 ? 5
+ : 10;
+ },
+ radius: 10,
+ }
+ },
+ scales: {
+ xAxes: [{display: false}],
+ yAxes: [
+ {
+ display: false,
+ ticks: {
+ beginAtZero: true
+ }
+ }
+ ]
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 5, 10, null, -10, -5],
+ pointBorderColor: '#0000ff',
+ pointBorderWidth: 6
+ },
+ {
+ // option in element (fallback)
+ data: [4, -5, -10, null, 10, 5],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ fill: false,
+ },
+ point: {
+ borderColor: '#00ff00',
+ borderWidth: 3,
+ radius: 10,
+ }
+ },
+ scales: {
+ xAxes: [{display: false}],
+ yAxes: [{display: false}]
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
it('should initialize config with default options', function() {
var callback = function() {};
-
var defaults = Chart.defaults;
+
defaults.global.responsiveAnimationDuration = 42;
defaults.global.hover.onHover = callback;
- defaults.line.hover.mode = 'x-axis';
defaults.line.spanGaps = true;
+ defaults.line.hover.mode = 'x-axis';
var chart = acquireChart({
type: 'line'
expect(options.responsiveAnimationDuration).toBe(42);
expect(options.hover.onHover).toBe(callback);
expect(options.hover.mode).toBe('x-axis');
+
+ defaults.global.responsiveAnimationDuration = 0;
+ defaults.global.hover.onHover = null;
+ defaults.line.spanGaps = false;
+ defaults.line.hover.mode = 'label';
});
it('should override default options', function() {
var defaults = Chart.defaults;
+
defaults.global.responsiveAnimationDuration = 42;
defaults.line.hover.mode = 'x-axis';
defaults.line.spanGaps = true;
expect(options.spanGaps).toBe(false);
expect(options.hover.mode).toBe('dataset');
expect(options.title.position).toBe('bottom');
+
+ defaults.global.responsiveAnimationDuration = 0;
+ defaults.line.hover.mode = 'label';
+ defaults.line.spanGaps = false;
});
it('should override axis positions that are incorrect', function() {
{fill: null},
{fill: []},
{fill: {}},
- {fill: function() {}}
]
}
});
false, // null
false, // array
false, // object
- false, // function
]);
});
});
projects / thirdparty / Chart.js.git / commitdiff
