Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Radar scriptable options #6041

Merged
merged 5 commits into from Feb 9, 2019
Merged

Radar scriptable options #6041

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3f0960c
Add radar scriptable options
nagix Jan 31, 2019
2443e38
Remove the check for line._model.tension
nagix Feb 4, 2019
23a41fb
Add the suggested refactoring
nagix Feb 4, 2019
658e85f
Remove the unnecessary resolution of tension option
nagix Feb 4, 2019
b9874a3
Port per-point custom.tension logic to the line controller
nagix Feb 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
116 changes: 75 additions & 41 deletions docs/charts/radar.md
View file
Open in desktop
Expand Up @@ -64,46 +64,80 @@ var myRadarChart = new Chart(ctx, {

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.

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.

| Name | Type | Description
| ---- | ---- | -----------
| `label` | `string` | The label for the dataset which appears in the legend and tooltips.
| `backgroundColor` | `Color` | The fill color under the line. See [Colors](../general/colors.md#colors).
| `borderColor` | `Color` | The color of the line. See [Colors](../general/colors.md#colors).
| `borderWidth` | `number` | The width of the line in pixels.
| `borderDash` | `number[]` | Length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `borderDashOffset` | `number` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `borderCapStyle` | `string` | Cap style of the line. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap).
| `borderJoinStyle` | `string` | Line joint style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
| `fill` | <code>boolean&#124;string</code> | How to fill the area under the line. See [area charts](area.md).
| `lineTension` | `number` | Bezier curve tension of the line. Set to 0 to draw straightlines.
| `pointBackgroundColor` | <code>Color&#124;Color[]</code> | The fill color for points.
| `pointBorderColor` | <code>Color&#124;Color[]</code> | The border color for points.
| `pointBorderWidth` | <code>number&#124;number[]</code> | The width of the point border in pixels.
| `pointRadius` | <code>number&#124;number[]</code> | The radius of the point shape. If set to 0, the point is not rendered.
| `pointRotation` | <code>number&#124;number[]</code> | The rotation of the point in degrees.
| `pointStyle` | <code>string&#124;string[]&#124;Image&#124;Image[]</code> | Style of the point. [more...](#pointstyle)
| `pointHitRadius` | <code>number&#124;number[]</code> | The pixel size of the non-displayed point that reacts to mouse events.
| `pointHoverBackgroundColor` | <code>Color&#124;Color[]</code> | Point background color when hovered.
| `pointHoverBorderColor` | <code>Color&#124;Color[]</code> | Point border color when hovered.
| `pointHoverBorderWidth` | <code>number&#124;number[]</code> | Border width of point when hovered.
| `pointHoverRadius` | <code>number&#124;number[]</code> | The radius of the point when hovered.

### pointStyle
The style of point. Options are:
* `'circle'`
* `'cross'`
* `'crossRot'`
* `'dash'.`
* `'line'`
* `'rect'`
* `'rectRounded'`
* `'rectRot'`
* `'star'`
* `'triangle'`

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).
| 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&#124;string</code> | - | - | `true`
| [`label`](#general) | `string` | - | - | `''`
| [`lineTension`](#line-styling) | `number` | - | - | `0.4`
| [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`pointBorderColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`pointBorderWidth`](#point-styling) | `number` | Yes | Yes | `1`
| [`pointHitRadius`](#point-styling) | `number` | Yes | Yes | `1`
| [`pointHoverBackgroundColor`](#interactions) | `Color` | Yes | Yes | `undefined`
| [`pointHoverBorderColor`](#interactions) | `Color` | Yes | Yes | `undefined`
| [`pointHoverBorderWidth`](#interactions) | `number` | Yes | Yes | `1`
| [`pointHoverRadius`](#interactions) | `number` | Yes | Yes | `4`
| [`pointRadius`](#point-styling) | `number` | Yes | Yes | `3`
| [`pointRotation`](#point-styling) | `number` | Yes | Yes | `0`
| [`pointStyle`](#point-styling) | <code>string&#124;Image</code> | Yes | Yes | `'circle'`

### General

| Name | Description
| ---- | ----
| `label` | The label for the dataset which appears in the legend and tooltips.

### Point Styling

The style of each point can be controlled with the following properties:

| Name | Description
| ---- | ----
| `pointBackgroundColor` | The fill color for points.
| `pointBorderColor` | The border color for points.
| `pointBorderWidth` | The width of the point border in pixels.
| `pointHitRadius` | The pixel size of the non-displayed point that reacts to mouse events.
| `pointRadius` | The radius of the point shape. If set to 0, the point is not rendered.
| `pointRotation` | The rotation of the point in degrees.
| `pointStyle` | Style of the point. [more...](../configuration/elements#point-styles)

All these values, if `undefined`, fallback first to the dataset options then to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.

### Line Styling

The style of the line can be controlled with the following properties:

| Name | Description
| ---- | ----
| `backgroundColor` | The line fill color.
| `borderCapStyle` | Cap style of the line. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap).
| `borderColor` | The line color.
| `borderDash` | Length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `borderDashOffset` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `borderJoinStyle` | Line joint style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
| `borderWidth` | The line width (in pixels).
| `fill` | How to fill the area under the line. See [area charts](area.md).
| `lineTension` | Bezier curve tension of the line. Set to 0 to draw straightlines.

All these values, if `undefined`, fallback to the associated [`elements.line.*`](../configuration/elements.md#line-configuration) options.

### Interactions

The interaction with each point can be controlled with the following properties:

| Name | Description
| ---- | -----------
| `pointHoverBackgroundColor` | Point background color when hovered.
| `pointHoverBorderColor` | Point border color when hovered.
| `pointHoverBorderWidth` | Border width of point when hovered.
| `pointHoverRadius` | The radius of the point when hovered.

## Configuration Options

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

## Data Structure

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.
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.

```javascript
data: [20, 10]
Expand Down
12 changes: 6 additions & 6 deletions src/controllers/controller.line.js
View file
Open in desktop
Expand Up @@ -91,6 +91,7 @@ module.exports = DatasetController.extend({
var value = dataset.data[index];
var yScale = me.getScaleForId(meta.yAxisID);
var xScale = me.getScaleForId(meta.xAxisID);
var lineModel = meta.dataset._model;
var x, y;

var options = me._resolvePointOptions(point, index);
Expand All @@ -117,10 +118,10 @@ module.exports = DatasetController.extend({
backgroundColor: options.backgroundColor,
borderColor: options.borderColor,
borderWidth: options.borderWidth,
tension: meta.dataset._model ? meta.dataset._model.tension : 0,
steppedLine: meta.dataset._model ? meta.dataset._model.steppedLine : false,
tension: lineModel ? lineModel.tension : 0,
steppedLine: lineModel ? lineModel.steppedLine : false,
// Tooltip
hitRadius: options.hitRadius,
hitRadius: options.hitRadius
};
},

Expand Down Expand Up @@ -256,7 +257,7 @@ module.exports = DatasetController.extend({
var lineModel = meta.dataset._model;
var area = chart.chartArea;
var points = meta.data || [];
var i, ilen, point, model, controlPoints;
var i, ilen, model, controlPoints;

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