| commit | author | age | ||
| 83c3f6 | 1 | # Linear Radial Axis |
| SP | 2 | |
| 3 | The linear scale is use to chart numerical data. As the name suggests, linear interpolation is used to determine where a value lies in relation the center of the axis. | |
| 4 | ||
| 5 | The following additional configuration options are provided by the radial linear scale. | |
| 6 | ||
| 7 | ## Configuration Options | |
| 8 | ||
| 9 | The axis has configuration properties for ticks, angle lines (line that appear in a radar chart outward from the center), pointLabels (labels around the edge in a radar chart). The following sections define each of the properties in those sections. | |
| 10 | ||
| 11 | | Name | Type | Description | |
| 12 | | ---- | ---- | ----------- | |
| 13 | | `angleLines` | `Object` | Angle line configuration. [more...](#angle-line-options) | |
| 14 | | `gridLines` | `Object` | Grid line configuration. [more...](../styling.md#grid-line-configuration) | |
| 15 | | `pointLabels` | `Object` | Point label configuration. [more...](#point-label-options) | |
| 16 | | `ticks` | `Object` | Tick configuration. [more...](#tick-options) | |
| 17 | ||
| 18 | ## Tick Options | |
| 19 | The following options are provided by the linear scale. They are all located in the `ticks` sub options. The [common tick configuration](../styling.md#tick-configuration) options are supported by this axis. | |
| 20 | ||
| 21 | | Name | Type | Default | Description | |
| 22 | | -----| ---- | --------| ----------- | |
| 23 | | `backdropColor` | `Color` | `'rgba(255, 255, 255, 0.75)'` | Color of label backdrops | |
| 24 | | `backdropPaddingX` | `Number` | `2` | Horizontal padding of label backdrop. | |
| 25 | | `backdropPaddingY` | `Number` | `2` | Vertical padding of label backdrop. | |
| 26 | | `beginAtZero` | `Boolean` | `false` | if true, scale will include 0 if it is not already included. | |
| 27 | | `min` | `Number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](#axis-range-settings) | |
| 28 | | `max` | `Number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](#axis-range-settings) | |
| 29 | | `maxTicksLimit` | `Number` | `11` | Maximum number of ticks and gridlines to show. | |
| 30 | | `precision` | `Number` | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places. | |
| 31 | | `stepSize` | `Number` | | User defined fixed step size for the scale. [more...](#step-size) | |
| 32 | | `suggestedMax` | `Number` | | Adjustment used when calculating the maximum data value. [more...](#axis-range-settings) | |
| 33 | | `suggestedMin` | `Number` | | Adjustment used when calculating the minimum data value. [more...](#axis-range-settings) | |
| 34 | | `showLabelBackdrop` | `Boolean` | `true` | If true, draw a background behind the tick labels | |
| 35 | ||
| 36 | ## Axis Range Settings | |
| 37 | ||
| 38 | Given the number of axis range settings, it is important to understand how they all interact with each other. | |
| 39 | ||
| 40 | The `suggestedMax` and `suggestedMin` settings only change the data values that are used to scale the axis. These are useful for extending the range of the axis while maintaining the auto fit behaviour. | |
| 41 | ||
| 42 | ```javascript | |
| 43 | let minDataValue = Math.min(mostNegativeValue, options.ticks.suggestedMin); | |
| 44 | let maxDataValue = Math.max(mostPositiveValue, options.ticks.suggestedMax); | |
| 45 | ``` | |
| 46 | ||
| 47 | In this example, the largest positive value is 50, but the data maximum is expanded out to 100. However, because the lowest data value is below the `suggestedMin` setting, it is ignored. | |
| 48 | ||
| 49 | ```javascript | |
| 50 | let chart = new Chart(ctx, { | |
| 51 | type: 'radar', | |
| 52 | data: { | |
| 53 | datasets: [{ | |
| 54 | label: 'First dataset', | |
| 55 | data: [0, 20, 40, 50] | |
| 56 | }], | |
| 57 | labels: ['January', 'February', 'March', 'April'] | |
| 58 | }, | |
| 59 | options: { | |
| 60 | scale: { | |
| 61 | ticks: { | |
| 62 | suggestedMin: 50, | |
| 63 | suggestedMax: 100 | |
| 64 | } | |
| 65 | } | |
| 66 | } | |
| 67 | }); | |
| 68 | ``` | |
| 69 | ||
| 70 | In contrast to the `suggested*` settings, the `min` and `max` settings set explicit ends to the axes. When these are set, some data points may not be visible. | |
| 71 | ||
| 72 | ## Step Size | |
| 73 | If set, the scale ticks will be enumerated by multiple of stepSize, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm. | |
| 74 | ||
| 75 | This example sets up a chart with a y axis that creates ticks at `0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5`. | |
| 76 | ||
| 77 | ```javascript | |
| 78 | let options = { | |
| 79 | scale: { | |
| 80 | ticks: { | |
| 81 | max: 5, | |
| 82 | min: 0, | |
| 83 | stepSize: 0.5 | |
| 84 | } | |
| 85 | } | |
| 86 | }; | |
| 87 | ``` | |
| 88 | ||
| 89 | ## Angle Line Options | |
| 90 | ||
| 91 | The following options are used to configure angled lines that radiate from the center of the chart to the point labels. They can be found in the `angleLines` sub options. Note that these options only apply if `angleLines.display` is true. | |
| 92 | ||
| 93 | | Name | Type | Default | Description | |
| 94 | | -----| ---- | --------| ----------- | |
| 95 | | `display` | `Boolean` | `true` | if true, angle lines are shown | |
| 96 | | `color` | `Color` | `rgba(0, 0, 0, 0.1)` | Color of angled lines | |
| 97 | | `lineWidth` | `Number` | `1` | Width of angled lines | |
| 98 | ||
| 99 | ## Point Label Options | |
| 100 | ||
| 101 | The following options are used to configure the point labels that are shown on the perimeter of the scale. They can be found in the `pointLabels` sub options. Note that these options only apply if `pointLabels.display` is true. | |
| 102 | ||
| 103 | | Name | Type | Default | Description | |
| 104 | | -----| ---- | --------| ----------- | |
| 105 | | `callback` | `Function` | | Callback function to transform data labels to point labels. The default implementation simply returns the current string. | |
| 106 | | `fontColor` | `Color/Color[]` | `'#666'` | Font color for point labels. | |
| 107 | | `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family to use when rendering labels. | |
| 108 | | `fontSize` | `Number` | 10 | font size in pixels | |
| 109 | | `fontStyle` | `String` | `'normal'` | Font style to use when rendering point labels. | |
