The following options can be included in a polar area chart dataset to configure options for that specific dataset.
-| Name | Type | Description
-| ---- | ---- | -----------
-| `backgroundColor` | `Color/Color[]` | The fill color of the arcs in the dataset. See [Colors](../general/colors.md#colors).
-| `borderColor` | `Color/Color[]` | The border color of the arcs in the dataset. See [Colors](../general/colors.md#colors).
-| `borderWidth` | `Number/Number[]` | The border width of the arcs in the dataset.
-| `borderAlign` | `String/String[]` | The border alignment of the arcs in the dataset. [more...](#border-alignment)
-| `hoverBackgroundColor` | `Color/Color[]` | The fill colour of the arcs when hovered.
-| `hoverBorderColor` | `Color/Color[]` | The stroke colour of the arcs when hovered.
-| `hoverBorderWidth` | `Number/Number[]` | The stroke width of the arcs when hovered.
+| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
+| ---- | ---- | :----: | :----: | ----
+| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'`
+| [`borderAlign`](#border-alignment) | `String` | Yes | Yes | `'center'`
+| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
+| [`borderWidth`](#styling) | `Number` | Yes | Yes | `2`
+| [`data`](#data-structure) | `Number[]` | - | - | **required**
+| [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
+| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
+| [`hoverBorderWidth`](#interactions) | `Number` | Yes | Yes | `undefined`
+
+### Styling
+
+The style of each arc can be controlled with the following properties:
+
+| Name | Description
+| ---- | ----
+| `backgroundColor` | arc background color.
+| `borderColor` | arc border color.
+| `borderWidth` | arc border width (in pixels).
+
+All these values, if `undefined`, fallback to the associated [`elements.arc.*`](../configuration/elements.md#arc-configuration) options.
### Border Alignment
When `'center'` is set, the borders of arcs next to each other will overlap. When `'inner'` is set, it is guaranteed that all the borders are not overlap.
+### Interactions
+
+The interaction with each arc can be controlled with the following properties:
+
+| Name | Description
+| ---- | -----------
+| `hoverBackgroundColor` | arc background color when hovered.
+| `hoverBorderColor` | arc border color when hovered.
+| `hoverBorderWidth` | arc border width when hovered (in pixels).
+
+All these values, if `undefined`, fallback to the associated [`elements.arc.*`](../configuration/elements.md#arc-configuration) options.
+
## Config Options
These are the customisation options specific to Polar Area charts. These options are merged with the [global chart default options](#default-options), and form the options of the chart.
}
for (i = 0, ilen = arcs.length; i < ilen; ++i) {
- arcs[i]._options = me._resolveElementOptions(arcs[i], i, reset);
+ arcs[i]._options = me._resolveElementOptions(arcs[i], i);
}
chart.borderWidth = me.getMaxBorderWidth();
var start = me.chart.options.startAngle || 0;
var starts = me._starts = [];
var angles = me._angles = [];
+ var arcs = meta.data;
var i, ilen, angle;
me._updateRadius();
start += angle;
}
- helpers.each(meta.data, function(arc, index) {
- me.updateElement(arc, index, reset);
- });
+ for (i = 0, ilen = arcs.length; i < ilen; ++i) {
+ arcs[i]._options = me._resolveElementOptions(arcs[i], i);
+ me.updateElement(arcs[i], i, reset);
+ }
},
/**
var endAngle = startAngle + (arc.hidden ? 0 : me._angles[index]);
var resetRadius = animationOpts.animateScale ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);
+ var options = arc._options || {};
helpers.extend(arc, {
// Utility
// Desired view properties
_model: {
+ backgroundColor: options.backgroundColor,
+ borderColor: options.borderColor,
+ borderWidth: options.borderWidth,
+ borderAlign: options.borderAlign,
x: centerX,
y: centerY,
innerRadius: 0,
}
});
- // Apply border and fill style
- var elementOpts = this.chart.options.elements.arc;
- var custom = arc.custom || {};
- var model = arc._model;
-
- model.backgroundColor = resolve([custom.backgroundColor, dataset.backgroundColor, elementOpts.backgroundColor], undefined, index);
- model.borderColor = resolve([custom.borderColor, dataset.borderColor, elementOpts.borderColor], undefined, index);
- model.borderWidth = resolve([custom.borderWidth, dataset.borderWidth, elementOpts.borderWidth], undefined, index);
- model.borderAlign = resolve([custom.borderAlign, dataset.borderAlign, elementOpts.borderAlign], undefined, index);
-
arc.pivot();
},
return count;
},
+ /**
+ * @protected
+ */
+ setHoverStyle: function(arc) {
+ var model = arc._model;
+ var options = arc._options;
+ var getHoverColor = helpers.getHoverColor;
+ var valueOrDefault = helpers.valueOrDefault;
+
+ arc.$previousStyle = {
+ backgroundColor: model.backgroundColor,
+ borderColor: model.borderColor,
+ borderWidth: model.borderWidth,
+ };
+
+ model.backgroundColor = valueOrDefault(options.hoverBackgroundColor, getHoverColor(options.backgroundColor));
+ model.borderColor = valueOrDefault(options.hoverBorderColor, getHoverColor(options.borderColor));
+ model.borderWidth = valueOrDefault(options.hoverBorderWidth, options.borderWidth);
+ },
+
+ /**
+ * @private
+ */
+ _resolveElementOptions: function(arc, index) {
+ var me = this;
+ var chart = me.chart;
+ var dataset = me.getDataset();
+ var custom = arc.custom || {};
+ var options = chart.options.elements.arc;
+ var values = {};
+ var i, ilen, key;
+
+ // Scriptable options
+ var context = {
+ chart: chart,
+ dataIndex: index,
+ dataset: dataset,
+ datasetIndex: me.index
+ };
+
+ var keys = [
+ 'backgroundColor',
+ 'borderColor',
+ 'borderWidth',
+ 'borderAlign',
+ 'hoverBackgroundColor',
+ 'hoverBorderColor',
+ 'hoverBorderWidth',
+ ];
+
+ for (i = 0, ilen = keys.length; i < ilen; ++i) {
+ key = keys[i];
+ values[key] = resolve([
+ custom[key],
+ dataset[key],
+ options[key]
+ ], context, index);
+ }
+
+ return values;
+ },
+
/**
* @private
*/
ctx.save();
ctx.beginPath();
- ctx.arc(vm.x, vm.y, vm.outerRadius - pixelMargin, sA, eA);
+ ctx.arc(vm.x, vm.y, Math.max(vm.outerRadius - pixelMargin, 0), sA, eA);
ctx.arc(vm.x, vm.y, vm.innerRadius, eA, sA, true);
ctx.closePath();
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 2, 4, null, 6, 8],
+ backgroundColor: [
+ '#ff0000',
+ '#00ff00',
+ '#0000ff',
+ '#ffff00',
+ '#ff00ff',
+ '#000000'
+ ]
+ },
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ scale: {
+ display: false
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in element (fallback)
+ data: [0, 2, 4, null, 6, 8],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: [
+ '#ff88ff',
+ '#888888',
+ '#ff8800',
+ '#00ff88',
+ '#8800ff',
+ '#ffff88'
+ ]
+ }
+ },
+ scale: {
+ display: false
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 2, 4, null, 6, 8],
+ backgroundColor: function(ctx) {
+ var value = ctx.dataset.data[ctx.dataIndex] || 0;
+ return value > 8 ? '#ff0000'
+ : value > 6 ? '#00ff00'
+ : value > 2 ? '#0000ff'
+ : '#ff00ff';
+ }
+ },
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ scale: {
+ display: false
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in element (fallback)
+ data: [0, 2, 4, null, 6, 8],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: function(ctx) {
+ var value = ctx.dataset.data[ctx.dataIndex] || 0;
+ return value > 8 ? '#ff0000'
+ : value > 6 ? '#00ff00'
+ : value > 2 ? '#0000ff'
+ : '#ff00ff';
+ }
+ }
+ },
+ scale: {
+ display: false
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 2, 4, null, 6, 8],
+ backgroundColor: '#ff0000'
+ },
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ scale: {
+ display: false
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in element (fallback)
+ data: [0, 2, 4, null, 6, 8],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: '#00ff00'
+ }
+ },
+ scale: {
+ display: false
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 2, 4, null, 6, 8],
+ borderAlign: [
+ 'center',
+ 'inner',
+ 'center',
+ 'inner',
+ 'center',
+ 'inner',
+ ],
+ borderColor: '#00ff00'
+ },
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: 'transparent',
+ borderColor: '#ff0000',
+ borderWidth: 5,
+ }
+ },
+ scale: {
+ display: false
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in element (fallback)
+ data: [0, 2, 4, null, 6, 8],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: 'transparent',
+ borderColor: '#ff0000',
+ borderWidth: 5,
+ borderAlign: [
+ 'center',
+ 'inner',
+ 'center',
+ 'inner',
+ 'center',
+ 'inner',
+ ]
+ }
+ },
+ scale: {
+ display: false
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 2, 4, null, 6, 8],
+ borderAlign: function(ctx) {
+ var value = ctx.dataset.data[ctx.dataIndex] || 0;
+ return value > 4 ? 'inner' : 'center';
+ },
+ borderColor: '#0000ff',
+ },
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: 'transparent',
+ borderColor: '#ff00ff',
+ borderWidth: 8,
+ }
+ },
+ scale: {
+ display: false
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in element (fallback)
+ data: [0, 2, 4, null, 6, 8],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: 'transparent',
+ borderColor: '#ff00ff',
+ borderWidth: 8,
+ borderAlign: function(ctx) {
+ var value = ctx.dataset.data[ctx.dataIndex] || 0;
+ return value > 4 ? 'center' : 'inner';
+ }
+ }
+ },
+ scale: {
+ display: false
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 2, 4, null, 6, 8],
+ borderAlign: 'inner',
+ borderColor: '#00ff00',
+ },
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: 'transparent',
+ borderColor: '#0000ff',
+ borderWidth: 4,
+ }
+ },
+ scale: {
+ display: false
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in element (fallback)
+ data: [0, 2, 4, null, 6, 8],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: 'transparent',
+ borderAlign: 'center',
+ borderColor: '#0000ff',
+ borderWidth: 4,
+ }
+ },
+ scale: {
+ display: false
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 2, 4, null, 6, 8],
+ borderColor: [
+ '#ff0000',
+ '#00ff00',
+ '#0000ff',
+ '#ffff00',
+ '#ff00ff',
+ '#000000'
+ ]
+ },
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: 'transparent',
+ borderWidth: 8
+ }
+ },
+ scale: {
+ display: false
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in element (fallback)
+ data: [0, 2, 4, null, 6, 8],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: 'transparent',
+ borderColor: [
+ '#ff88ff',
+ '#888888',
+ '#ff8800',
+ '#00ff88',
+ '#8800ff',
+ '#ffff88'
+ ],
+ borderWidth: 8
+ }
+ },
+ scale: {
+ display: false
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 2, 4, null, 6, 8],
+ borderColor: function(ctx) {
+ var value = ctx.dataset.data[ctx.dataIndex] || 0;
+ return value > 8 ? '#ff0000'
+ : value > 6 ? '#00ff00'
+ : value > 2 ? '#0000ff'
+ : '#ff00ff';
+ }
+ },
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: 'transparent',
+ borderWidth: 8
+ }
+ },
+ scale: {
+ display: false
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in element (fallback)
+ data: [0, 2, 4, null, 6, 8],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: 'transparent',
+ borderColor: function(ctx) {
+ var value = ctx.dataset.data[ctx.dataIndex] || 0;
+ return value > 8 ? '#ff00ff'
+ : value > 6 ? '#0000ff'
+ : value > 2 ? '#ff0000'
+ : '#00ff00';
+ },
+ borderWidth: 8
+ }
+ },
+ scale: {
+ display: false
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 2, 4, null, 6, 8],
+ borderColor: '#ff0000'
+ },
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: 'transparent',
+ borderWidth: 8
+ }
+ },
+ scale: {
+ display: false
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in element (fallback)
+ data: [0, 2, 4, null, 6, 8],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: 'transparent',
+ borderColor: '#00ff00',
+ borderWidth: 8
+ }
+ },
+ scale: {
+ display: false
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 2, 4, null, 6, 8],
+ borderWidth: [
+ 0,
+ 1,
+ 2,
+ 3,
+ 4,
+ 5
+ ]
+ },
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: 'transparent',
+ borderColor: '#888',
+ }
+ },
+ scale: {
+ display: false,
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in element (fallback)
+ data: [0, 2, 4, null, 6, 8],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: 'transparent',
+ borderColor: '#888',
+ borderWidth: [
+ 5,
+ 4,
+ 3,
+ 2,
+ 1,
+ 0
+ ]
+ }
+ },
+ scale: {
+ display: false
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 2, 4, null, 6, 8],
+ borderWidth: function(ctx) {
+ var value = ctx.dataset.data[ctx.dataIndex] || 0;
+ return Math.abs(value);
+ }
+ },
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: 'transparent',
+ borderColor: '#888',
+ }
+ },
+ scale: {
+ display: false,
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in element (fallback)
+ data: [0, 2, 4, null, 6, 8],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: 'transparent',
+ borderColor: '#888',
+ borderWidth: function(ctx) {
+ return ctx.dataIndex * 2;
+ }
+ }
+ },
+ scale: {
+ display: false
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in dataset
+ data: [0, 2, 4, null, 6, 8],
+ borderWidth: 2
+ },
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: 'transparent',
+ borderColor: '#888',
+ }
+ },
+ scale: {
+ display: false,
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ labels: [0, 1, 2, 3, 4, 5],
+ datasets: [
+ {
+ // option in element (fallback)
+ data: [0, 2, 4, null, 6, 8],
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ elements: {
+ arc: {
+ backgroundColor: 'transparent',
+ borderColor: '#888',
+ borderWidth: 4
+ }
+ },
+ scale: {
+ display: false,
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
expect(meta.data[4] instanceof Chart.elements.Arc).toBe(true);
});
- it('should set arc hover styles', function() {
- var chart = window.acquireChart({
- type: 'polarArea',
- data: {
- datasets: [{
- data: [10, 15, 0, -4],
- label: 'dataset2'
- }],
- labels: ['label1', 'label2', 'label3', 'label4']
- },
- options: {
- showLines: true,
- elements: {
- arc: {
- backgroundColor: 'rgb(255, 0, 0)',
- borderColor: 'rgb(0, 255, 0)',
- borderWidth: 1.2
+ describe('Interactions', function() {
+ beforeEach(function() {
+ this.chart = window.acquireChart({
+ type: 'polarArea',
+ data: {
+ labels: ['label1', 'label2', 'label3', 'label4'],
+ datasets: [{
+ data: [10, 15, 0, 4]
+ }]
+ },
+ options: {
+ cutoutPercentage: 0,
+ elements: {
+ arc: {
+ backgroundColor: 'rgb(100, 150, 200)',
+ borderColor: 'rgb(50, 100, 150)',
+ borderWidth: 2,
+ }
}
}
- }
+ });
});
- var meta = chart.getDatasetMeta(0);
- var arc = meta.data[0];
-
- meta.controller.setHoverStyle(arc);
- expect(arc._model.backgroundColor).toBe('rgb(230, 0, 0)');
- expect(arc._model.borderColor).toBe('rgb(0, 230, 0)');
- expect(arc._model.borderWidth).toBe(1.2);
-
- // Can set hover style per dataset
- chart.data.datasets[0].hoverBackgroundColor = 'rgb(77, 79, 81)';
- chart.data.datasets[0].hoverBorderColor = 'rgb(123, 125, 127)';
- chart.data.datasets[0].hoverBorderWidth = 2.1;
-
- meta.controller.setHoverStyle(arc);
- expect(arc._model.backgroundColor).toBe('rgb(77, 79, 81)');
- expect(arc._model.borderColor).toBe('rgb(123, 125, 127)');
- expect(arc._model.borderWidth).toBe(2.1);
-
- // Custom style
- arc.custom = {
- hoverBorderWidth: 5.5,
- hoverBackgroundColor: 'rgb(0, 0, 0)',
- hoverBorderColor: 'rgb(10, 10, 10)'
- };
+ it ('should handle default hover styles', function() {
+ var chart = this.chart;
+ var arc = chart.getDatasetMeta(0).data[0];
- meta.controller.setHoverStyle(arc);
- expect(arc._model.backgroundColor).toBe('rgb(0, 0, 0)');
- expect(arc._model.borderColor).toBe('rgb(10, 10, 10)');
- expect(arc._model.borderWidth).toBe(5.5);
- });
+ jasmine.triggerMouseEvent(chart, 'mousemove', arc);
+ expect(arc._model.backgroundColor).toBe('rgb(49, 135, 221)');
+ expect(arc._model.borderColor).toBe('rgb(22, 89, 156)');
+ expect(arc._model.borderWidth).toBe(2);
- it('should remove hover styles', function() {
- var chart = window.acquireChart({
- type: 'polarArea',
- data: {
- datasets: [{
- data: [10, 15, 0, -4],
- label: 'dataset2'
- }],
- labels: ['label1', 'label2', 'label3', 'label4']
- },
- options: {
- showLines: true,
- elements: {
- arc: {
- backgroundColor: 'rgb(255, 0, 0)',
- borderColor: 'rgb(0, 255, 0)',
- borderWidth: 1.2
- }
- }
- }
+ jasmine.triggerMouseEvent(chart, 'mouseout', arc);
+ expect(arc._model.backgroundColor).toBe('rgb(100, 150, 200)');
+ expect(arc._model.borderColor).toBe('rgb(50, 100, 150)');
+ expect(arc._model.borderWidth).toBe(2);
});
- var meta = chart.getDatasetMeta(0);
- var arc = meta.data[0];
+ it ('should handle hover styles defined via dataset properties', function() {
+ var chart = this.chart;
+ var arc = chart.getDatasetMeta(0).data[0];
- chart.options.elements.arc.backgroundColor = 'rgb(45, 46, 47)';
- chart.options.elements.arc.borderColor = 'rgb(50, 51, 52)';
- chart.options.elements.arc.borderWidth = 10.1;
+ Chart.helpers.merge(chart.data.datasets[0], {
+ hoverBackgroundColor: 'rgb(200, 100, 150)',
+ hoverBorderColor: 'rgb(150, 50, 100)',
+ hoverBorderWidth: 8.4,
+ });
- meta.controller.setHoverStyle(arc);
- chart.update();
- expect(arc._model.backgroundColor).toBe('rgb(45, 46, 47)');
- expect(arc._model.borderColor).toBe('rgb(50, 51, 52)');
- expect(arc._model.borderWidth).toBe(10.1);
+ chart.update();
- meta.controller.removeHoverStyle(arc);
- chart.update();
- expect(arc._model.backgroundColor).toBe('rgb(45, 46, 47)');
- expect(arc._model.borderColor).toBe('rgb(50, 51, 52)');
- expect(arc._model.borderWidth).toBe(10.1);
+ jasmine.triggerMouseEvent(chart, 'mousemove', arc);
+ expect(arc._model.backgroundColor).toBe('rgb(200, 100, 150)');
+ expect(arc._model.borderColor).toBe('rgb(150, 50, 100)');
+ expect(arc._model.borderWidth).toBe(8.4);
- // Can set hover style per dataset
- chart.data.datasets[0].backgroundColor = 'rgb(77, 79, 81)';
- chart.data.datasets[0].borderColor = 'rgb(123, 125, 127)';
- chart.data.datasets[0].borderWidth = 2.1;
+ jasmine.triggerMouseEvent(chart, 'mouseout', arc);
+ expect(arc._model.backgroundColor).toBe('rgb(100, 150, 200)');
+ expect(arc._model.borderColor).toBe('rgb(50, 100, 150)');
+ expect(arc._model.borderWidth).toBe(2);
+ });
- meta.controller.removeHoverStyle(arc);
- chart.update();
- expect(arc._model.backgroundColor).toBe('rgb(77, 79, 81)');
- expect(arc._model.borderColor).toBe('rgb(123, 125, 127)');
- expect(arc._model.borderWidth).toBe(2.1);
-
- // Custom style
- arc.custom = {
- borderWidth: 5.5,
- backgroundColor: 'rgb(0, 0, 0)',
- borderColor: 'rgb(10, 10, 10)'
- };
+ it ('should handle hover styles defined via element options', function() {
+ var chart = this.chart;
+ var arc = chart.getDatasetMeta(0).data[0];
- meta.controller.removeHoverStyle(arc);
- chart.update();
- expect(arc._model.backgroundColor).toBe('rgb(0, 0, 0)');
- expect(arc._model.borderColor).toBe('rgb(10, 10, 10)');
- expect(arc._model.borderWidth).toBe(5.5);
+ Chart.helpers.merge(chart.options.elements.arc, {
+ hoverBackgroundColor: 'rgb(200, 100, 150)',
+ hoverBorderColor: 'rgb(150, 50, 100)',
+ hoverBorderWidth: 8.4,
+ });
+
+ chart.update();
+
+ jasmine.triggerMouseEvent(chart, 'mousemove', arc);
+ expect(arc._model.backgroundColor).toBe('rgb(200, 100, 150)');
+ expect(arc._model.borderColor).toBe('rgb(150, 50, 100)');
+ expect(arc._model.borderWidth).toBe(8.4);
+
+ jasmine.triggerMouseEvent(chart, 'mouseout', arc);
+ expect(arc._model.backgroundColor).toBe('rgb(100, 150, 200)');
+ expect(arc._model.borderColor).toBe('rgb(50, 100, 150)');
+ expect(arc._model.borderWidth).toBe(2);
+ });
+
+ it ('should handle hover styles defined via element custom', function() {
+ var chart = this.chart;
+ var arc = chart.getDatasetMeta(0).data[0];
+
+ arc.custom = {
+ hoverBackgroundColor: 'rgb(200, 100, 150)',
+ hoverBorderColor: 'rgb(150, 50, 100)',
+ hoverBorderWidth: 8.4,
+ };
+
+ chart.update();
+
+ jasmine.triggerMouseEvent(chart, 'mousemove', arc);
+ expect(arc._model.backgroundColor).toBe('rgb(200, 100, 150)');
+ expect(arc._model.borderColor).toBe('rgb(150, 50, 100)');
+ expect(arc._model.borderWidth).toBe(8.4);
+
+ jasmine.triggerMouseEvent(chart, 'mouseout', arc);
+ expect(arc._model.backgroundColor).toBe('rgb(100, 150, 200)');
+ expect(arc._model.borderColor).toBe('rgb(50, 100, 150)');
+ expect(arc._model.borderWidth).toBe(2);
+ });
});
});
projects / thirdparty / Chart.js.git / commitdiff
