Skip to content

Commit c07e695

Browse files
nagixsimonbrunel
nagix
authored and
simonbrunel
committed
Implement scriptable options for points in radar charts (chartjs#6041)
1 parent f4c1d5e commit c07e695

40 files changed

+1261
-273
lines changed

‎docs/charts/radar.md‎

Lines changed: 75 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -64,46 +64,80 @@ var myRadarChart = new Chart(ctx, {
6464

6565
The radar chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way.
6666

67-
All `point*` properties can be specified as an array. If these are set to an array value, the first value applies to the first point, the second value to the second point, and so on.
68-
69-
| Name | Type | Description
70-
| ---- | ---- | -----------
71-
| `label` | `string` | The label for the dataset which appears in the legend and tooltips.
72-
| `backgroundColor` | `Color` | The fill color under the line. See [Colors](../general/colors.md#colors).
73-
| `borderColor` | `Color` | The color of the line. See [Colors](../general/colors.md#colors).
74-
| `borderWidth` | `number` | The width of the line in pixels.
75-
| `borderDash` | `number[]` | Length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
76-
| `borderDashOffset` | `number` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
77-
| `borderCapStyle` | `string` | Cap style of the line. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap).
78-
| `borderJoinStyle` | `string` | Line joint style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
79-
| `fill` | <code>boolean&#124;string</code> | How to fill the area under the line. See [area charts](area.md).
80-
| `lineTension` | `number` | Bezier curve tension of the line. Set to 0 to draw straightlines.
81-
| `pointBackgroundColor` | <code>Color&#124;Color[]</code> | The fill color for points.
82-
| `pointBorderColor` | <code>Color&#124;Color[]</code> | The border color for points.
83-
| `pointBorderWidth` | <code>number&#124;number[]</code> | The width of the point border in pixels.
84-
| `pointRadius` | <code>number&#124;number[]</code> | The radius of the point shape. If set to 0, the point is not rendered.
85-
| `pointRotation` | <code>number&#124;number[]</code> | The rotation of the point in degrees.
86-
| `pointStyle` | <code>string&#124;string[]&#124;Image&#124;Image[]</code> | Style of the point. [more...](#pointstyle)
87-
| `pointHitRadius` | <code>number&#124;number[]</code> | The pixel size of the non-displayed point that reacts to mouse events.
88-
| `pointHoverBackgroundColor` | <code>Color&#124;Color[]</code> | Point background color when hovered.
89-
| `pointHoverBorderColor` | <code>Color&#124;Color[]</code> | Point border color when hovered.
90-
| `pointHoverBorderWidth` | <code>number&#124;number[]</code> | Border width of point when hovered.
91-
| `pointHoverRadius` | <code>number&#124;number[]</code> | The radius of the point when hovered.
92-
93-
### pointStyle
94-
The style of point. Options are:
95-
* `'circle'`
96-
* `'cross'`
97-
* `'crossRot'`
98-
* `'dash'.`
99-
* `'line'`
100-
* `'rect'`
101-
* `'rectRounded'`
102-
* `'rectRot'`
103-
* `'star'`
104-
* `'triangle'`
105-
106-
If the option is an image, that image is drawn on the canvas using [drawImage](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage).
67+
| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
68+
| ---- | ---- | :----: | :----: | ----
69+
| [`backgroundColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0, 0, 0, 0.1)'`
70+
| [`borderCapStyle`](#line-styling) | `string` | - | - | `'butt'`
71+
| [`borderColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0, 0, 0, 0.1)'`
72+
| [`borderDash`](#line-styling) | `number[]` | - | - | `[]`
73+
| [`borderDashOffset`](#line-styling) | `number` | - | - | `0.0`
74+
| [`borderJoinStyle`](#line-styling) | `string` | - | - | `'miter'`
75+
| [`borderWidth`](#line-styling) | `number` | - | - | `3`
76+
| [`fill`](#line-styling) | <code>boolean&#124;string</code> | - | - | `true`
77+
| [`label`](#general) | `string` | - | - | `''`
78+
| [`lineTension`](#line-styling) | `number` | - | - | `0.4`
79+
| [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
80+
| [`pointBorderColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
81+
| [`pointBorderWidth`](#point-styling) | `number` | Yes | Yes | `1`
82+
| [`pointHitRadius`](#point-styling) | `number` | Yes | Yes | `1`
83+
| [`pointHoverBackgroundColor`](#interactions) | `Color` | Yes | Yes | `undefined`
84+
| [`pointHoverBorderColor`](#interactions) | `Color` | Yes | Yes | `undefined`
85+
| [`pointHoverBorderWidth`](#interactions) | `number` | Yes | Yes | `1`
86+
| [`pointHoverRadius`](#interactions) | `number` | Yes | Yes | `4`
87+
| [`pointRadius`](#point-styling) | `number` | Yes | Yes | `3`
88+
| [`pointRotation`](#point-styling) | `number` | Yes | Yes | `0`
89+
| [`pointStyle`](#point-styling) | <code>string&#124;Image</code> | Yes | Yes | `'circle'`
90+
91+
### General
92+
93+
| Name | Description
94+
| ---- | ----
95+
| `label` | The label for the dataset which appears in the legend and tooltips.
96+
97+
### Point Styling
98+
99+
The style of each point can be controlled with the following properties:
100+
101+
| Name | Description
102+
| ---- | ----
103+
| `pointBackgroundColor` | The fill color for points.
104+
| `pointBorderColor` | The border color for points.
105+
| `pointBorderWidth` | The width of the point border in pixels.
106+
| `pointHitRadius` | The pixel size of the non-displayed point that reacts to mouse events.
107+
| `pointRadius` | The radius of the point shape. If set to 0, the point is not rendered.
108+
| `pointRotation` | The rotation of the point in degrees.
109+
| `pointStyle` | Style of the point. [more...](../configuration/elements#point-styles)
110+
111+
All these values, if `undefined`, fallback first to the dataset options then to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.
112+
113+
### Line Styling
114+
115+
The style of the line can be controlled with the following properties:
116+
117+
| Name | Description
118+
| ---- | ----
119+
| `backgroundColor` | The line fill color.
120+
| `borderCapStyle` | Cap style of the line. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap).
121+
| `borderColor` | The line color.
122+
| `borderDash` | Length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
123+
| `borderDashOffset` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
124+
| `borderJoinStyle` | Line joint style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
125+
| `borderWidth` | The line width (in pixels).
126+
| `fill` | How to fill the area under the line. See [area charts](area.md).
127+
| `lineTension` | Bezier curve tension of the line. Set to 0 to draw straightlines.
128+
129+
All these values, if `undefined`, fallback to the associated [`elements.line.*`](../configuration/elements.md#line-configuration) options.
130+
131+
### Interactions
132+
133+
The interaction with each point can be controlled with the following properties:
134+
135+
| Name | Description
136+
| ---- | -----------
137+
| `pointHoverBackgroundColor` | Point background color when hovered.
138+
| `pointHoverBorderColor` | Point border color when hovered.
139+
| `pointHoverBorderWidth` | Border width of point when hovered.
140+
| `pointHoverRadius` | The radius of the point when hovered.
107141

108142
## Configuration Options
109143

@@ -128,7 +162,7 @@ It is common to want to apply a configuration setting to all created radar chart
128162

129163
## Data Structure
130164

131-
The `data` property of a dataset for a radar chart is specified as an array of numbers. Each point in the data array corresponds to the label at the same index on the x axis.
165+
The `data` property of a dataset for a radar chart is specified as an array of numbers. Each point in the data array corresponds to the label at the same index.
132166

133167
```javascript
134168
data: [20, 10]

‎src/controllers/controller.line.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ module.exports = DatasetController.extend({
9191
var value = dataset.data[index];
9292
var yScale = me.getScaleForId(meta.yAxisID);
9393
var xScale = me.getScaleForId(meta.xAxisID);
94+
var lineModel = meta.dataset._model;
9495
var x, y;
9596

9697
var options = me._resolvePointOptions(point, index);
@@ -117,10 +118,10 @@ module.exports = DatasetController.extend({
117118
backgroundColor: options.backgroundColor,
118119
borderColor: options.borderColor,
119120
borderWidth: options.borderWidth,
120-
tension: meta.dataset._model ? meta.dataset._model.tension : 0,
121-
steppedLine: meta.dataset._model ? meta.dataset._model.steppedLine : false,
121+
tension: valueOrDefault(custom.tension, lineModel ? lineModel.tension : 0),
122+
steppedLine: lineModel ? lineModel.steppedLine : false,
122123
// Tooltip
123-
hitRadius: options.hitRadius,
124+
hitRadius: options.hitRadius
124125
};
125126
},
126127

@@ -155,7 +156,7 @@ module.exports = DatasetController.extend({
155156
hoverRadius: 'pointHoverRadius',
156157
pointStyle: 'pointStyle',
157158
radius: 'pointRadius',
158-
rotation: 'pointRotation',
159+
rotation: 'pointRotation'
159160
};
160161
var keys = Object.keys(ELEMENT_OPTIONS);
161162

@@ -210,7 +211,7 @@ module.exports = DatasetController.extend({
210211
// to https://github.com/chartjs/Chart.js/issues/2435#issuecomment-216718158
211212
// This option gives lines the ability to span gaps
212213
values.spanGaps = valueOrDefault(dataset.spanGaps, options.spanGaps);
213-
values.tension = resolve([custom.tension, dataset.lineTension, elementOptions.tension]);
214+
values.tension = valueOrDefault(dataset.lineTension, elementOptions.tension);
214215
values.steppedLine = resolve([custom.steppedLine, dataset.steppedLine, elementOptions.stepped]);
215216

216217
return values;
@@ -256,7 +257,7 @@ module.exports = DatasetController.extend({
256257
var lineModel = meta.dataset._model;
257258
var area = chart.chartArea;
258259
var points = meta.data || [];
259-
var i, ilen, point, model, controlPoints;
260+
var i, ilen, model, controlPoints;
260261

261262
// Only consider points that are drawn in case the spanGaps option is used
262263
if (lineModel.spanGaps) {
@@ -273,8 +274,7 @@ module.exports = DatasetController.extend({
273274
helpers.splineCurveMonotone(points);
274275
} else {
275276
for (i = 0, ilen = points.length; i < ilen; ++i) {
276-
point = points[i];
277-
model = point._model;
277+
model = points[i]._model;
278278
controlPoints = helpers.splineCurve(
279279
helpers.previousItem(points, i)._model,
280280
model,

0 commit comments

Comments
 (0)