| 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`
-| [`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`
+| [`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 make20PercentOpaque(ctx) {
+ return utils.transparentize(getLineColor(ctx), 0.8);
}
function adjustRadiusBasedOnData(ctx) {
var data = {
labels: [['Eating', 'Dinner'], ['Drinking', 'Water'], 'Sleeping', ['Designing', 'Graphics'], 'Coding', 'Cycling', 'Running'],
datasets: [{
- data: generateData(),
- backgroundColor: Chart.helpers.color('#4dc9f6').alpha(0.2).rgbString(),
- borderColor: '#4dc9f6',
+ data: generateData()
}]
};
legend: false,
tooltips: true,
elements: {
+ line: {
+ backgroundColor: make20PercentOpaque,
+ 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: Chart.helpers.color(newColor).alpha(0.2).rgbString(),
- borderColor: newColor
+ data: generateData()
});
chart.update();
}
{
// 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'
+ 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
}
},
scale: {
{
// option in dataset
data: [0, 5, 10, null, -10, -5],
- pointBackgroundColor: '#ff0000'
+ backgroundColor: '#ff0000'
},
{
// 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: '#00ff00'
},
point: {
- backgroundColor: '#00ff00',
- radius: 10,
+ radius: 10
}
},
scale: {
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ data: {
+ labels: [0, 1, 2],
+ 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
+ },
+ scale: {
+ display: false,
+ ticks: {
+ beginAtZero: true
+ }
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 512,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ data: {
+ labels: [0, 1, 2],
+ 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
+ },
+ scale: {
+ display: false,
+ ticks: {
+ beginAtZero: true
+ }
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 512,
+ width: 512
+ }
+ }
+};
{
// 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';
+ borderColor: function(ctx) {
+ var index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex);
+ return index === 0 ? '#ff0000'
+ : index === 1 ? '#00ff00'
+ : '#0000ff';
}
},
{
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
}
},
scale: {
{
// option in dataset
data: [0, 5, 10, null, -10, -5],
- pointBorderColor: '#ff0000'
+ borderColor: '#ff0000'
},
{
// option in element (fallback)
- data: [4, -5, -10, null, 10, 5],
+ data: [4, -5, -10, null, 10, 5]
}
]
},
title: false,
elements: {
line: {
- fill: false,
+ borderColor: '#0000ff',
+ fill: false
},
point: {
- borderColor: '#00ff00',
- radius: 10,
+ borderColor: '#0000ff',
+ radius: 10
}
},
scale: {
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 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
+ }
+ },
+ scale: {
+ display: false,
+ ticks: {
+ min: -15
+ }
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 512,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ 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
+ }
+ },
+ scale: {
+ display: false,
+ ticks: {
+ min: -15
+ }
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 512,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ 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
+ },
+ scale: {
+ display: false,
+ ticks: {
+ min: -1
+ }
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 512,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ 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
+ },
+ scale: {
+ display: false,
+ ticks: {
+ min: -1
+ }
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 512,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ data: {
+ labels: [0, 1, 2, 3],
+ datasets: [
+ {
+ // option in dataset
+ data: [3, 3, null, 3],
+ borderColor: '#ff0000',
+ borderJoinStyle: function(ctx) {
+ var index = ctx.datasetIndex % 3;
+ return index === 0 ? 'round'
+ : index === 1 ? 'miter'
+ : 'bevel';
+ }
+ },
+ {
+ // option in element (fallback)
+ data: [2, 2, null, 2],
+ borderColor: '#0000ff'
+ },
+ {
+ // option in element (fallback)
+ data: [1, 1, null, 1]
+ }
+ ]
+ },
+ 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
+ },
+ scale: {
+ display: false,
+ ticks: {
+ beginAtZero: true
+ }
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 512,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ data: {
+ labels: [0, 1, 2, 3],
+ datasets: [
+ {
+ // option in dataset
+ data: [3, 3, null, 3],
+ borderColor: '#ff0000',
+ borderJoinStyle: 'round'
+ },
+ {
+ // option in element (fallback)
+ data: [2, 2, null, 2],
+ borderColor: '#0000ff',
+ borderJoinStyle: 'bevel'
+ },
+ {
+ // option in element (fallback)
+ data: [1, 1, null, 1]
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ borderColor: '#00ff00',
+ borderJoinStyle: 'miter',
+ borderWidth: 25,
+ fill: false,
+ tension: 0
+ }
+ },
+ layout: {
+ padding: 32
+ },
+ scale: {
+ display: false,
+ ticks: {
+ beginAtZero: true
+ }
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 512,
+ width: 512
+ }
+ }
+};
{
// 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;
- }
+ 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
}
},
scale: {
{
// option in dataset
data: [0, 5, 10, null, -10, -5],
- pointBorderColor: '#0000ff',
- pointBorderWidth: 6
+ borderColor: '#0000ff',
+ borderWidth: 6
},
{
// 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: '#00ff00',
borderWidth: 3,
- radius: 10,
+ fill: false
+ },
+ point: {
+ radius: 10
}
},
scale: {
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 5, 10, null, -10, -5],
+ backgroundColor: '#ff0000',
+ fill: function(ctx) {
+ return ctx.datasetIndex === 0 ? true : false;
+ }
+ },
+ {
+ // option in element (fallback)
+ data: [4, -5, -10, null, 10, 5]
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ backgroundColor: '#00ff00',
+ fill: function(ctx) {
+ return ctx.datasetIndex === 0 ? true : false;
+ }
+ }
+ },
+ scale: {
+ display: false,
+ ticks: {
+ min: -15
+ }
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 512,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 5, 10, null, -10, -5],
+ backgroundColor: '#ff0000',
+ fill: false
+ },
+ {
+ // option in element (fallback)
+ data: [4, -5, -10, null, 10, 5]
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ line: {
+ backgroundColor: '#00ff00',
+ fill: true
+ }
+ },
+ scale: {
+ display: false,
+ ticks: {
+ min: -15
+ }
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 512,
+ width: 512
+ }
+ }
+};
},
{
// option in element (fallback)
- data: [4, -5, -10, null, 10, 5],
+ data: [4, -5, -10, null, 10, 5]
}
]
},
title: false,
elements: {
line: {
- fill: false,
+ fill: false
},
point: {
backgroundColor: [
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ 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
+ }
+ },
+ scale: {
+ display: false,
+ ticks: {
+ min: -15
+ }
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 512,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ 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
+ }
+ },
+ scale: {
+ display: false,
+ ticks: {
+ min: -15
+ }
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 512,
+ width: 512
+ }
+ }
+};
},
{
// option in element (fallback)
- data: [4, -5, -10, null, 10, 5],
+ data: [4, -5, -10, null, 10, 5]
}
]
},
title: false,
elements: {
line: {
- fill: false,
+ fill: false
},
point: {
borderColor: [
'#8800ff',
'#ffff88'
],
+ borderWidth: 5,
radius: 10
}
},
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ 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';
+ },
+ borderWidth: 5,
+ radius: 10
+ }
+ },
+ scale: {
+ display: false,
+ ticks: {
+ min: -15
+ }
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 512,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ 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',
+ borderWidth: 5,
+ radius: 10
+ }
+ },
+ scale: {
+ display: false,
+ ticks: {
+ min: -15
+ }
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 512,
+ width: 512
+ }
+ }
+};
},
{
// option in element (fallback)
- data: [4, -5, -10, null, 10, 5],
+ data: [4, -5, -10, null, 10, 5]
}
]
},
title: false,
elements: {
line: {
- fill: false,
+ fill: false
},
point: {
borderColor: '#ff0000',
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ 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
+ }
+ },
+ scale: {
+ display: false,
+ ticks: {
+ min: -15
+ }
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 512,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ 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
+ }
+ },
+ scale: {
+ display: false,
+ ticks: {
+ min: -15
+ }
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 512,
+ width: 512
+ }
+ }
+};
projects / thirdparty / Chart.js.git / commitdiff
