nav: [
{text: 'Home', link: '/'},
{text: 'API', link: '/api/'},
- // TODO: Make local when samples moved to vuepress
{text: 'Samples', link: `/samples/`},
{
text: 'Ecosystem',
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `align` | `string` | `'center'` | The tick alignment along the axis. Can be `'start'`, `'center'`, or `'end'`.
-| `crossAlign` | `string` | `'near'` | The tick alignment perpendicular to the axis. Can be `'near'`, `'center'`, or `'far'`. See [Tick Alignment](./index#tick-alignment)
+| `crossAlign` | `string` | `'near'` | The tick alignment perpendicular to the axis. Can be `'near'`, `'center'`, or `'far'`. See [Tick Alignment](/axes/cartesian/#tick-alignment)
| `sampleSize` | `number` | `ticks.length` | The number of ticks to examine when deciding how many labels will fit. Setting a smaller value will be faster, but may be less accurate when there is large variability in label length.
| `autoSkip` | `boolean` | `true` | If true, automatically calculates how many labels can be shown and hides labels accordingly. Labels will be rotated up to `maxRotation` before skipping any. Turn `autoSkip` off to show all labels no matter what.
| `autoSkipPadding` | `number` | `3` | Padding between the ticks on the horizontal axis when `autoSkip` is enabled.
Axes that follow a cartesian grid are known as 'Cartesian Axes'. Cartesian axes are used for line, bar, and bubble charts. Four cartesian axes are included in Chart.js by default.
-* [linear](./linear)
-* [logarithmic](./logarithmic)
-* [category](./category)
-* [time](./time)
-* [timeseries](./timeseries)
+* [linear](./linear.md)
+* [logarithmic](./logarithmic.md)
+* [category](./category.md)
+* [time](./time.md)
+* [timeseries](./timeseries.md)
## Visual Components
# Axes
-Axes are an integral part of a chart. They are used to determine how data maps to a pixel value on the chart. In a cartesian chart, there is 1 or more X-axis and 1 or more Y-axis to map points onto the 2-dimensional canvas. These axes are known as ['cartesian axes'](./cartesian/index#cartesian-axes).
+Axes are an integral part of a chart. They are used to determine how data maps to a pixel value on the chart. In a cartesian chart, there is 1 or more X-axis and 1 or more Y-axis to map points onto the 2-dimensional canvas. These axes are known as ['cartesian axes'](./cartesian/).
-In a radial chart, such as a radar chart or a polar area chart, there is a single axis that maps points in the angular and radial directions. These are known as ['radial axes'](./radial/index#radial-axes).
+In a radial chart, such as a radar chart or a polar area chart, there is a single axis that maps points in the angular and radial directions. These are known as ['radial axes'](./radial/).
Scales in Chart.js >v2.0 are significantly more powerful, but also different than those of v1.0.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `tension` | `number` | `0` | Bézier curve tension (`0` for no Bézier curves).
-| `backgroundColor` | [`Color`](../general/colors.md) | `Chart.defaults.backgroundColor` | Line fill color.
+| `backgroundColor` | [`Color`](/general/colors.md) | `Chart.defaults.backgroundColor` | Line fill color.
| `borderWidth` | `number` | `3` | Line stroke width.
-| `borderColor` | [`Color`](../general/colors.md) | `Chart.defaults.borderColor` | Line stroke color.
+| `borderColor` | [`Color`](/general/colors.md) | `Chart.defaults.borderColor` | Line stroke color.
| `borderCapStyle` | `string` | `'butt'` | Line cap style. See [MDN](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap).
| `borderDash` | `number[]` | `[]` | Line dash. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `borderDashOffset` | `number` | `0.0` | Line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `borderJoinStyle` | `string` | `'miter'` | Line join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
| `capBezierPoints` | `boolean` | `true` | `true` to keep Bézier control inside the chart, `false` for no restriction.
-| `cubicInterpolationMode` | `string` | `'default'` | Interpolation mode to apply. [See more...](./charts/line.md/#cubicinterpolationmode)
-| `fill` | `boolean`\|`string` | `false` | How to fill the area under the line. See [area charts](../charts/area.md#filling-modes).
+| `cubicInterpolationMode` | `string` | `'default'` | Interpolation mode to apply. [See more...](/charts/line.md/#cubicinterpolationmode)
+| `fill` | `boolean`\|`string` | `false` | How to fill the area under the line. See [area charts](/charts/area.md#filling-modes).
| `stepped` | `boolean` | `false` | `true` to show the line as a stepped line (`tension` will be ignored).
## Bar Configuration
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
-| `backgroundColor` | [`Color`](../general/colors.md) | `Chart.defaults.backgroundColor` | Bar fill color.
+| `backgroundColor` | [`Color`](/general/colors.md) | `Chart.defaults.backgroundColor` | Bar fill color.
| `borderWidth` | `number` | `0` | Bar stroke width.
-| `borderColor` | [`Color`](../general/colors.md) | `Chart.defaults.borderColor` | Bar stroke color.
+| `borderColor` | [`Color`](/general/colors.md) | `Chart.defaults.borderColor` | Bar stroke color.
| `borderSkipped` | `string` | `'start'` | Skipped (excluded) border: `'start'`, `'end'`, `'bottom'`, `'left'`, `'top'` or `'right'`.
| `borderRadius` | `number`\|`object` | `0` | The bar border radius (in pixels).
| [`pointStyle`](#point-styles) | `string`\|`Image` | `'circle'` | Style of the point for legend.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `angle` - for polar only | `number` | `circumference / (arc count)` | Arc angle to cover.
-| `backgroundColor` | [`Color`](../general/colors.md) | `Chart.defaults.backgroundColor` | Arc fill color.
+| `backgroundColor` | [`Color`](/general/colors.md) | `Chart.defaults.backgroundColor` | Arc fill color.
| `borderAlign` | `string` | `'center'` | Arc stroke alignment.
-| `borderColor` | [`Color`](../general/colors.md) | `'#fff'` | Arc stroke color.
+| `borderColor` | [`Color`](/general/colors.md) | `'#fff'` | Arc stroke color.
| `borderWidth`| `number` | `2` | Arc stroke width.
});
```
-See [samples](https://www.chartjs.org/samples/) for examples on how to get started with external tooltips.
+See [samples](/samples/tooltip/html) for examples on how to get started with external tooltips.
## Tooltip Model
This is a shorthand for defining left/right and top/bottom to same values.
-For example, 10px left / right and 4px top / bottom padding on a Radial Linear Axis [tick backdropPadding](../axes/radial/linear#tick-configuration):
+For example, 10px left / right and 4px top / bottom padding on a Radial Linear Axis [tick backdropPadding](/axes/radial/linear.html#linear-radial-axis-specific-tick-options):
```javascript
let chart = new Chart(ctx, {
Decimating your data will achieve the best results. When there is a lot of data to display on the graph, it doesn't make sense to show tens of thousands of data points on a graph that is only a few hundred pixels wide.
-The [decimation plugin](./configuration/decimation.md) can be used with line charts to decimate data before the chart is rendered. This will provide the best performance since it will reduce the memory needed to render the chart.
+The [decimation plugin](/configuration/decimation.md) can be used with line charts to decimate data before the chart is rendered. This will provide the best performance since it will reduce the memory needed to render the chart.
Line charts are able to do [automatic data decimation during draw](#automatic-data-decimation-during-draw), when certain conditions are met. You should still consider decimating data yourself before passing it in for maximum performance since the automatic decimation occurs late in the chart life cycle.
### Rotation
-[Specify a rotation value](./axes/cartesian/index.md#tick-configuration) by setting `minRotation` and `maxRotation` to the same value, which avoids the chart from having to automatically determine a value to use.
+[Specify a rotation value](/axes/cartesian/index.md#tick-configuration) by setting `minRotation` and `maxRotation` to the same value, which avoids the chart from having to automatically determine a value to use.
### Sampling
-Set the [`ticks.sampleSize`](./axes/cartesian/index.md#tick-configuration) option. This will determine how large your labels are by looking at only a subset of them in order to render axes more quickly. This works best if there is not a large variance in the size of your labels.
+Set the [`ticks.sampleSize`](/axes/cartesian/index.md#tick-configuration) option. This will determine how large your labels are by looking at only a subset of them in order to render axes more quickly. This works best if there is not a large variance in the size of your labels.
## Disable Animations
Finally, render the chart using our configuration:
-```html
+```html
<script>
// === include 'setup' then 'config' above ===
-
+
var myChart = new Chart(
document.getElementById('myChart'),
config
It's that easy to get started using Chart.js! From here you can explore the many options that can help you customise your charts with scales, tooltips, labels, colors, custom actions, and much more.
-All our examples are [available online](https://www.chartjs.org/samples/latest/) but you can also download the `Chart.js.zip` archive attached to every [release](https://github.com/chartjs/Chart.js/releases) to experiment with our samples locally from the `/samples` folder.
+All our examples are [available online](/samples/) but you can also download the `Chart.js.zip` archive attached to every [release](https://github.com/chartjs/Chart.js/releases) to experiment with our samples locally from the `/samples` folder.
* The input properties of object data can now be freely specified, see [data structures](../general/data-structures.md) for details.
* Most options are resolved utilizing proxies, instead of merging with defaults. In addition to easily enabling different resolution routes for different contexts, it allows using other resolved options in scriptable options.
* Options are by default scriptable and indexable, unless disabled for some reason.
- * Scriptable options receive a option reolver as second parameter for accessing other options in same context.
- * Resolution falls to upper scopes, if no match is found earlier. See [options](./general/options.md) for details.
+ * Scriptable options receive a option resolver as second parameter for accessing other options in same context.
+ * Resolution falls to upper scopes, if no match is found earlier. See [options](../general/options.md) for details.
#### Specific changes
projects / thirdparty / Chart.js.git / commitdiff
