mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
Switch docs to Vuepress to match other chart.js repositories (#8751)
* Initial work * Update doc commands * Updated sidebar config * Move docs * Update theme version and enable * Convert to chart.js sample * Update scripts to point to local build * Chart.js from local build * Simplify getting-started example * Axis docs updated except for imported content * Common ticks import works * Chart type docs ported to editor plugin * Last pages to use editor * Fix small errors * Frontmatter title to heading * Remove duplicate example * Update sidebar * Add paths * Remove paths * Add getting-started back * Update menus and add copyright to license section of the docs * Add GA plugin * Style sub-groups * Remove unneeded license page since it is covered on the main page * Remove docusaurus readme page * Remove docusaurus files * Fix issues in docs * Build and deploy scripts for docs work * Conditional base URL for nice local testing * Use eslint-plugin-markdown * Remove hard coded lines * Remove mentions of docusaurus Co-authored-by: Jukka Kurkela <jukka.kurkela@gmail.com>
This commit is contained in:
Evert Timberg
GitHub
parent
88c585b11e
commit
ed2b96eeaf
@ -1,6 +1,7 @@
|
||||
extends:
|
||||
- chartjs
|
||||
- plugin:es/no-new-in-es2019
|
||||
- plugin:markdown/recommended
|
||||
|
||||
env:
|
||||
es6: true
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
MD013: false # line-length
|
||||
MD033: false # inline HTML
|
||||
MD041: false # first line heading
|
||||
163
docs/.vuepress/config.js
Normal file
163
docs/.vuepress/config.js
Normal file
@ -0,0 +1,163 @@
|
||||
const path = require('path');
|
||||
const docsVersion = "VERSION";
|
||||
const base = process.env.NODE_ENV === "development" ? '' : `/docs/${docsVersion}/`;
|
||||
|
||||
module.exports = {
|
||||
title: 'Chart.js',
|
||||
description: 'Open source HTML5 Charts for your website',
|
||||
theme: 'chartjs',
|
||||
base,
|
||||
dest: path.resolve(__dirname, '../../dist/docs'),
|
||||
head: [
|
||||
['link', {rel: 'icon', href: '/favicon.ico'}],
|
||||
],
|
||||
plugins: [
|
||||
'tabs',
|
||||
[
|
||||
'@vuepress/google-analytics',
|
||||
{
|
||||
'ga': 'UA-28909194-3'
|
||||
}
|
||||
],
|
||||
],
|
||||
chainWebpack(config) {
|
||||
config.merge({
|
||||
resolve: {
|
||||
alias: {
|
||||
'chart.js': path.resolve(__dirname, '../../dist/chart.esm.js'),
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
markdown: {
|
||||
extendMarkdown: md => {
|
||||
md.use(require('markdown-it-include'), path.resolve(__dirname, '../'));
|
||||
}
|
||||
},
|
||||
themeConfig: {
|
||||
repo: 'chartjs/Chart.js',
|
||||
logo: '/favicon.ico',
|
||||
lastUpdated: 'Last Updated',
|
||||
searchPlaceholder: 'Search...',
|
||||
editLinks: false,
|
||||
docsDir: 'docs',
|
||||
chart: {
|
||||
imports: [
|
||||
['scripts/register.js'],
|
||||
['scripts/utils.js', 'Utils'],
|
||||
]
|
||||
},
|
||||
nav: [
|
||||
{text: 'Home', link: '/'},
|
||||
// TODO: Make local when samples moved to vuepress
|
||||
{text: 'Samples', link: `https://www.chartjs.org/samples/${docsVersion}/`},
|
||||
{
|
||||
text: 'Ecosystem',
|
||||
ariaLabel: 'Community Menu',
|
||||
items: [
|
||||
{ text: 'Awesome', link: 'https://github.com/chartjs/awesome' },
|
||||
{ text: 'Slack', link: 'https://chartjs-slack.herokuapp.com/' },
|
||||
{ text: 'Stack Overflow', link: 'https://stackoverflow.com/questions/tagged/chart.js' }
|
||||
]
|
||||
}
|
||||
],
|
||||
sidebar: {
|
||||
'/': [
|
||||
'',
|
||||
{
|
||||
title: 'Getting Started',
|
||||
children: [
|
||||
'getting-started/',
|
||||
'getting-started/installation',
|
||||
'getting-started/integration',
|
||||
'getting-started/usage',
|
||||
'getting-started/v3-migration'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'General',
|
||||
children: [
|
||||
'general/data-structures',
|
||||
'general/accessibility',
|
||||
'general/options',
|
||||
'general/colors',
|
||||
'general/fonts',
|
||||
'general/padding',
|
||||
'general/performance'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Configuration',
|
||||
children: [
|
||||
'configuration/',
|
||||
'configuration/responsive',
|
||||
'configuration/device-pixel-ratio',
|
||||
'configuration/locale',
|
||||
'configuration/interactions',
|
||||
'configuration/canvas-background',
|
||||
'configuration/animations',
|
||||
'configuration/layout',
|
||||
'configuration/legend',
|
||||
'configuration/title',
|
||||
'configuration/tooltip',
|
||||
'configuration/elements',
|
||||
'configuration/decimation'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Chart Types',
|
||||
children: [
|
||||
'charts/line',
|
||||
'charts/bar',
|
||||
'charts/radar',
|
||||
'charts/doughnut',
|
||||
'charts/polar',
|
||||
'charts/bubble',
|
||||
'charts/scatter',
|
||||
'charts/area',
|
||||
'charts/mixed'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Axes',
|
||||
children: [
|
||||
'axes/',
|
||||
{
|
||||
title: 'Cartesian',
|
||||
children: [
|
||||
'axes/cartesian/',
|
||||
'axes/cartesian/category',
|
||||
'axes/cartesian/linear',
|
||||
'axes/cartesian/logarithmic',
|
||||
'axes/cartesian/time',
|
||||
'axes/cartesian/timeseries'
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Radial',
|
||||
children: [
|
||||
'axes/radial/linear'
|
||||
],
|
||||
},
|
||||
'axes/labelling',
|
||||
'axes/styling'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Developers',
|
||||
children: [
|
||||
'developers/',
|
||||
'developers/api',
|
||||
[`https://chartjs.org/docs/${docsVersion}/typedoc/`, 'TypeDoc'],
|
||||
'developers/updates',
|
||||
'developers/plugins',
|
||||
'developers/charts',
|
||||
'developers/axes',
|
||||
'developers/contributing',
|
||||
'developers/publishing'
|
||||
]
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
};
|
||||
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
36
docs/.vuepress/styles/index.styl
Normal file
36
docs/.vuepress/styles/index.styl
Normal file
@ -0,0 +1,36 @@
|
||||
@require '~vuepress-plugin-tabs/dist/themes/default.styl'
|
||||
|
||||
.sidebar-group.is-sub-group.depth-1
|
||||
> .sidebar-group-items
|
||||
border-left 1px solid rgba($accentColor, 0.25)
|
||||
|
||||
> .sidebar-heading:not(.open)
|
||||
border-left 1px solid rgba($accentColor, 0.25)
|
||||
margin-left: 0
|
||||
|
||||
> .sidebar-heading
|
||||
padding-left calc(1.475rem - 1px)
|
||||
transition border-color .25s
|
||||
padding 0.35rem 1.475rem
|
||||
border-left-width 3px
|
||||
margin-left -1px
|
||||
font-size 1em
|
||||
line-height 1.4
|
||||
opacity 1 !important
|
||||
|
||||
&.active, &.open
|
||||
border-left-color $accentColor
|
||||
color $accentColor
|
||||
font-weight bold
|
||||
|
||||
>.arrow
|
||||
display none
|
||||
|
||||
>.sidebar-group-items
|
||||
padding-left: 0
|
||||
|
||||
.sidebar-group.is-sub-group.depth-1:hover .sidebar-heading:not(.open)
|
||||
color $accentColor
|
||||
margin-left -1px
|
||||
border-left 3px solid rgba($accentColor, 0.25)
|
||||
padding-left calc(1.475rem - 1px)
|
||||
@ -1,33 +0,0 @@
|
||||
# Website
|
||||
|
||||
This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
## Local Development
|
||||
|
||||
```bash
|
||||
npm run start
|
||||
```
|
||||
|
||||
This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
|
||||
|
||||
### Build
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
This command generates static content into the `build` directory and can be served using any static contents hosting service.
|
||||
|
||||
### Deployment
|
||||
|
||||
```bash
|
||||
GIT_USER=<Your GitHub username> USE_SSH=true npm run deploy
|
||||
```
|
||||
|
||||
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
|
||||
@ -1,11 +1,4 @@
|
||||
---
|
||||
title: Category Axis
|
||||
---
|
||||
|
||||
import CommonAll from '../_common.md'
|
||||
import CommonCartesian from './_common.md'
|
||||
import CommonTicks from './_common_ticks.md'
|
||||
import CommonTicksAll from '../_common_ticks.md'
|
||||
# Category Axis
|
||||
|
||||
If the global configuration is used, labels are drawn from one of the label arrays included in the chart data. If only `data.labels` is defined, this will be used. If `data.xLabels` is defined and the axis is horizontal, this will be used. Similarly, if `data.yLabels` is defined and the axis is vertical, this property will be used. Using both `xLabels` and `yLabels` together can create a chart that uses strings for both the X and Y axes.
|
||||
|
||||
@ -54,13 +47,15 @@ Namespace: `options.scales[scaleId]`
|
||||
| `max` | `string`\|`number` | The maximum item to display. [more...](#min-max-configuration)
|
||||
| `labels` | `string[]`\|`string[][]` | An array of labels to display. When an individual label is an array of strings, each item is rendered on a new line.
|
||||
|
||||
<CommonCartesian />
|
||||
<CommonAll />
|
||||
!!!include(axes/cartesian/_common.md)!!!
|
||||
|
||||
!!!include(axes/_common.md)!!!
|
||||
|
||||
## Tick Configuration
|
||||
|
||||
<CommonTicks />
|
||||
<CommonTicksAll />
|
||||
!!!include(axes/cartesian/_common_ticks.md)!!!
|
||||
|
||||
!!!include(axes/_common_ticks.md)!!!
|
||||
|
||||
## Min Max Configuration
|
||||
|
||||
@ -1,12 +1,4 @@
|
||||
---
|
||||
title: Cartesian Axes
|
||||
---
|
||||
import CommonAll from '../_common.md'
|
||||
import CommonCartesian from './_common.md'
|
||||
import CommonTicks from './_common_ticks.md'
|
||||
import CommonTicksAll from '../_common_ticks.md'
|
||||
|
||||
import { useEffect } from 'react';
|
||||
# Cartesian Axes
|
||||
|
||||
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.
|
||||
|
||||
@ -26,101 +18,183 @@ A cartesian axis is composed of visual components that can be individually confi
|
||||
* [tick mark](#ticks-and-tick-marks)
|
||||
* [title](#title)
|
||||
|
||||
export const CartesianChartExample = ({id, xScaleConfig}) => {
|
||||
useEffect(() => {
|
||||
const cfg = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'Dataset 1',
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
||||
borderColor: 'rgb(54, 162, 235)',
|
||||
borderWidth: 1,
|
||||
data: [
|
||||
10, 20, 30, 40, 50, 0, 5
|
||||
]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
x: xScaleConfig,
|
||||
}
|
||||
}
|
||||
};
|
||||
const chart = new Chart(document.getElementById(id).getContext('2d'), cfg);
|
||||
return () => chart.destroy();
|
||||
});
|
||||
return <div className="chartjs-wrapper"><canvas id={id} className="chartjs"></canvas></div>;
|
||||
}
|
||||
|
||||
### Border
|
||||
|
||||
The axis border is drawn at the edge of the axis, beside the chart area. In the image below, it is drawn in red.
|
||||
|
||||
<CartesianChartExample
|
||||
id="chart-border"
|
||||
xScaleConfig={{
|
||||
grid: {
|
||||
borderColor: 'red',
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const labels = Utils.months({count: 7});
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
||||
borderColor: 'rgb(54, 162, 235)',
|
||||
borderWidth: 1,
|
||||
data: [10, 20, 30, 40, 50, 0, 5],
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'line',
|
||||
data,
|
||||
options: {
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
borderColor: 'red'
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
### Grid lines
|
||||
|
||||
The grid lines for an axis are drawn on the chart area. In the image below, they are red.
|
||||
|
||||
<CartesianChartExample
|
||||
id="chart-grid"
|
||||
xScaleConfig={{
|
||||
grid: {
|
||||
color: 'red',
|
||||
borderColor: 'grey',
|
||||
tickColor: 'grey'
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const labels = Utils.months({count: 7});
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
||||
borderColor: 'rgb(54, 162, 235)',
|
||||
borderWidth: 1,
|
||||
data: [10, 20, 30, 40, 50, 0, 5],
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'line',
|
||||
data,
|
||||
options: {
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
color: 'red',
|
||||
borderColor: 'grey',
|
||||
tickColor: 'grey'
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
### Ticks and Tick Marks
|
||||
|
||||
Ticks represent data values on the axis that appear as labels. The tick mark is the extension of the grid line from the axis border to the label.
|
||||
In this example, the tick mark is drawn in red while the tick label is drawn in blue.
|
||||
|
||||
<CartesianChartExample
|
||||
id="chart-ticks"
|
||||
xScaleConfig={{
|
||||
grid: {
|
||||
//color: 'red',
|
||||
//borderColor: 'grey',
|
||||
tickColor: 'red'
|
||||
},
|
||||
ticks: {
|
||||
color: 'blue',
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const labels = Utils.months({count: 7});
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
||||
borderColor: 'rgb(54, 162, 235)',
|
||||
borderWidth: 1,
|
||||
data: [10, 20, 30, 40, 50, 0, 5],
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'line',
|
||||
data,
|
||||
options: {
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
tickColor: 'red'
|
||||
},
|
||||
ticks: {
|
||||
color: 'blue',
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
### Title
|
||||
|
||||
The title component of the axis is used to label the data. In the example below, it is shown in red.
|
||||
|
||||
<CartesianChartExample
|
||||
id="chart-title"
|
||||
xScaleConfig={{
|
||||
title: {
|
||||
color: 'red',
|
||||
display: true,
|
||||
text: 'Month'
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const labels = Utils.months({count: 7});
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
||||
borderColor: 'rgb(54, 162, 235)',
|
||||
borderWidth: 1,
|
||||
data: [10, 20, 30, 40, 50, 0, 5],
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'line',
|
||||
data,
|
||||
options: {
|
||||
scales: {
|
||||
x: {
|
||||
title: {
|
||||
color: 'red',
|
||||
display: true,
|
||||
text: 'Month'
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
## Common Configuration
|
||||
|
||||
<CommonCartesian />
|
||||
!!!include(axes/cartesian/_common.md)!!!
|
||||
|
||||
<CommonAll />
|
||||
!!!include(axes/_common.md)!!!
|
||||
|
||||
### Axis Position
|
||||
|
||||
@ -147,64 +221,71 @@ The `bounds` property controls the scale boundary strategy (bypassed by `min`/`m
|
||||
|
||||
### Tick Configuration
|
||||
|
||||
<CommonTicks />
|
||||
<CommonTicksAll />
|
||||
!!!include(axes/cartesian/_common_ticks.md)!!!
|
||||
|
||||
!!!include(axes/_common_ticks.md)!!!
|
||||
|
||||
### Tick Alignment
|
||||
|
||||
The alignment of ticks is primarily controlled using two settings on the tick configuration object: `align` and `crossAlign`. The `align` setting configures how labels align with the tick mark along the axis direction (i.e. horizontal for a horizontal axis and vertical for a vertical axis). The `crossAlign` setting configures how labels align with the tick mark in the perpendicular direction (i.e. vertical for a horizontal axis and horizontal for a vertical axis). In the example below, the `crossAlign` setting is used to left align the labels on the Y axis.
|
||||
|
||||
```jsx live
|
||||
function exampleAlignment() {
|
||||
useEffect(() => {
|
||||
const cfg = {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
axis: 'y',
|
||||
label: 'My First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(255, 159, 64, 0.2)',
|
||||
'rgba(255, 205, 86, 0.2)',
|
||||
'rgba(75, 192, 192, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(153, 102, 255, 0.2)',
|
||||
'rgba(201, 203, 207, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(255, 159, 64)',
|
||||
'rgb(255, 205, 86)',
|
||||
'rgb(75, 192, 192)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(153, 102, 255)',
|
||||
'rgb(201, 203, 207)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
indexAxis: 'y',
|
||||
scales: {
|
||||
y: {
|
||||
ticks: {
|
||||
crossAlign: 'far',
|
||||
}
|
||||
}
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const labels = Utils.months({count: 7});
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(255, 159, 64, 0.2)',
|
||||
'rgba(255, 205, 86, 0.2)',
|
||||
'rgba(75, 192, 192, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(153, 102, 255, 0.2)',
|
||||
'rgba(201, 203, 207, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(255, 159, 64)',
|
||||
'rgb(255, 205, 86)',
|
||||
'rgb(75, 192, 192)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(153, 102, 255)',
|
||||
'rgb(201, 203, 207)'
|
||||
],
|
||||
borderWidth: 1,
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'bar',
|
||||
data,
|
||||
options: {
|
||||
indexAxis: 'y',
|
||||
scales: {
|
||||
y: {
|
||||
ticks: {
|
||||
crossAlign: 'far',
|
||||
}
|
||||
}
|
||||
};
|
||||
const chart = new Chart(document.getElementById('chartjs-1').getContext('2d'), cfg);
|
||||
return () => chart.destroy();
|
||||
});
|
||||
return <div className="chartjs-wrapper"><canvas id="chartjs-1" className="chartjs"></canvas></div>;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
**Note:** the `crossAlign` setting is not used the the tick rotation is not `0`, the axis position is `'center'` or the position is with respect to a data value.
|
||||
::: tip
|
||||
The `crossAlign` setting is not used the the tick rotation is not `0`, the axis position is `'center'` or the position is with respect to a data value.
|
||||
:::
|
||||
|
||||
### Axis ID
|
||||
|
||||
@ -1,11 +1,4 @@
|
||||
---
|
||||
title: Linear Axis
|
||||
---
|
||||
|
||||
import CommonAll from '../_common.md'
|
||||
import CommonCartesian from './_common.md'
|
||||
import CommonTicks from './_common_ticks.md'
|
||||
import CommonTicksAll from '../_common_ticks.md'
|
||||
# Linear Axis
|
||||
|
||||
The linear scale is used to chart numerical data. It can be placed on either the x or y-axis. The scatter chart type automatically configures a line chart to use one of these scales for the x-axis. As the name suggests, linear interpolation is used to determine where a value lies on the axis.
|
||||
|
||||
@ -20,8 +13,9 @@ Namespace: `options.scales[scaleId]`
|
||||
| `beginAtZero` | `boolean` | if true, scale will include 0 if it is not already included.
|
||||
| `grace` | `number`\|`string` | Percentage (string ending with `%`) or amount (number) for added room in the scale range above and below data. [more...](#grace)
|
||||
|
||||
<CommonCartesian />
|
||||
<CommonAll />
|
||||
!!!include(axes/cartesian/_common.md)!!!
|
||||
|
||||
!!!include(axes/_common.md)!!!
|
||||
|
||||
## Tick Configuration
|
||||
|
||||
@ -37,8 +31,9 @@ Namespace: `options.scales[scaleId].ticks`
|
||||
| `precision` | `number` | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places.
|
||||
| `stepSize` | `number` | | User-defined fixed step size for the scale. [more...](#step-size)
|
||||
|
||||
<CommonTicks />
|
||||
<CommonTicksAll />
|
||||
!!!include(axes/cartesian/_common_ticks.md)!!!
|
||||
|
||||
!!!include(axes/_common_ticks.md)!!!
|
||||
|
||||
## Step Size
|
||||
|
||||
@ -65,38 +60,40 @@ let options = {
|
||||
If the value is string ending with `%`, its treat as percentage. If number, its treat as value.
|
||||
The value is added to the maximum data value and subtracted from the minimum data. This extends the scale range as if the data values were that much greater.
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const labels = Utils.months({count: 7});
|
||||
const data = {
|
||||
labels: ['Positive', 'Negative'],
|
||||
datasets: [{
|
||||
data: [100, -50],
|
||||
backgroundColor: 'rgb(255, 99, 132)'
|
||||
}],
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
```jsx live
|
||||
function example() {
|
||||
const canvas = useRef(null);
|
||||
useEffect(() => {
|
||||
const cfg = {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Positive', 'Negative'],
|
||||
datasets: [{
|
||||
data: [100, -50],
|
||||
backgroundColor: 'rgb(255, 99, 132)'
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
type: 'linear',
|
||||
grace: '5%'
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: false
|
||||
}
|
||||
}
|
||||
};
|
||||
const chart = new Chart(canvas.current.getContext('2d'), cfg);
|
||||
return () => chart.destroy();
|
||||
});
|
||||
return <div className="chartjs-wrapper"><canvas ref={canvas} className="chartjs"></canvas></div>;
|
||||
}
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'bar',
|
||||
data,
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
type: 'linear',
|
||||
grace: '5%'
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: false
|
||||
}
|
||||
}
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
## Internal data format
|
||||
@ -1,18 +1,12 @@
|
||||
---
|
||||
title: Logarithmic Axis
|
||||
---
|
||||
|
||||
import CommonAll from '../_common.md'
|
||||
import CommonCartesian from './_common.md'
|
||||
import CommonTicks from './_common_ticks.md'
|
||||
import CommonTicksAll from '../_common_ticks.md'
|
||||
# Logarithmic Axis
|
||||
|
||||
The logarithmic scale is used to chart numerical data. It can be placed on either the x or y-axis. As the name suggests, logarithmic interpolation is used to determine where a value lies on the axis.
|
||||
|
||||
## Configuration Options
|
||||
|
||||
<CommonCartesian />
|
||||
<CommonAll />
|
||||
!!!include(axes/cartesian/_common.md)!!!
|
||||
|
||||
!!!include(axes/_common.md)!!!
|
||||
|
||||
## Tick Configuration
|
||||
|
||||
@ -24,8 +18,9 @@ Namespace: `options.scales[scaleId]`
|
||||
| ---- | ---- | ------- | -----------
|
||||
| `format` | `object` | | The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) options used by the default label formatter
|
||||
|
||||
<CommonTicks />
|
||||
<CommonTicksAll />
|
||||
!!!include(axes/cartesian/_common_ticks.md)!!!
|
||||
|
||||
!!!include(axes/_common_ticks.md)!!!
|
||||
|
||||
## Internal data format
|
||||
|
||||
@ -1,10 +1,4 @@
|
||||
---
|
||||
title: Time Cartesian Axis
|
||||
---
|
||||
|
||||
import CommonAll from '../_common.md'
|
||||
import CommonCartesian from './_common.md'
|
||||
import CommonTicks from './_common_ticks.md'
|
||||
# Time Cartesian Axis
|
||||
|
||||
The time scale is used to display times and dates. Data are spread according to the amount of time between data points. When building its ticks, it will automatically calculate the most comfortable unit base on the size of the scale.
|
||||
|
||||
@ -42,8 +36,9 @@ Namespace: `options.scales[scaleId]`
|
||||
| `time.stepSize` | `number` | `1` | The number of units between grid lines.
|
||||
| `time.minUnit` | `string` | `'millisecond'` | The minimum display format to be used for a time unit.
|
||||
|
||||
<CommonCartesian />
|
||||
<CommonAll />
|
||||
!!!include(axes/cartesian/_common.md)!!!
|
||||
|
||||
!!!include(axes/_common.md)!!!
|
||||
|
||||
#### Time Units
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Time Series Axis
|
||||
---
|
||||
# Time Series Axis
|
||||
|
||||
The time series scale extends from the time scale and supports all the same options. However, for the time series scale, each data point is spread equidistant.
|
||||
|
||||
@ -1,9 +1,4 @@
|
||||
---
|
||||
title: Axes
|
||||
---
|
||||
|
||||
import Common from './_common.md'
|
||||
import CommonTicks from './_common_ticks.md'
|
||||
# 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).
|
||||
|
||||
@ -18,11 +13,11 @@ Scales in Chart.js >v2.0 are significantly more powerful, but also different tha
|
||||
|
||||
## Common Configuration
|
||||
|
||||
<Common />
|
||||
!!!include(axes/_common.md)!!!
|
||||
|
||||
## Tick Configuration
|
||||
|
||||
<CommonTicks />
|
||||
!!!include(axes/_common_ticks.md)!!!
|
||||
|
||||
## Axis Range Settings
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Labeling Axes
|
||||
---
|
||||
# Labeling Axes
|
||||
|
||||
When creating a chart, you want to tell the viewer what data they are viewing. To do this, you need to label the axis.
|
||||
|
||||
178
docs/axes/radial/index.md
Normal file
178
docs/axes/radial/index.md
Normal file
@ -0,0 +1,178 @@
|
||||
# Radial Axes
|
||||
|
||||
Radial axes are used specifically for the radar and polar area chart types. These axes overlay the chart area, rather than being positioned on one of the edges. One radial axis is included by default in Chart.js.
|
||||
|
||||
* [radialLinear](./linear.mdx)
|
||||
|
||||
## Visual Components
|
||||
|
||||
A radial axis is composed of visual components that can be individually configured. These components are:
|
||||
|
||||
* [angle lines](#angle-lines)
|
||||
* [grid lines](#grid-lines)
|
||||
* [point labels](#point-labels)
|
||||
* [ticks](#ticks)
|
||||
|
||||
### Angle Lines
|
||||
|
||||
The grid lines for an axis are drawn on the chart area. They stretch out from the center towards the edge of the canvas. In the example below, they are red.
|
||||
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const labels = Utils.months({count: 7});
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
||||
borderColor: 'rgb(54, 162, 235)',
|
||||
borderWidth: 1,
|
||||
data: [10, 20, 30, 40, 50, 0, 5],
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'radar',
|
||||
data,
|
||||
options: {
|
||||
scales: {
|
||||
r: {
|
||||
angleLines: {
|
||||
color: 'red'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
### Grid Lines
|
||||
|
||||
The grid lines for an axis are drawn on the chart area. In the example below, they are red.
|
||||
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const labels = Utils.months({count: 7});
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
||||
borderColor: 'rgb(54, 162, 235)',
|
||||
borderWidth: 1,
|
||||
data: [10, 20, 30, 40, 50, 0, 5],
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'radar',
|
||||
data,
|
||||
options: {
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: 'red'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
### Point Labels
|
||||
|
||||
The point labels indicate the value for each angle line. In the example below, they are red.
|
||||
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const labels = Utils.months({count: 7});
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
||||
borderColor: 'rgb(54, 162, 235)',
|
||||
borderWidth: 1,
|
||||
data: [10, 20, 30, 40, 50, 0, 5],
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'radar',
|
||||
data,
|
||||
options: {
|
||||
scales: {
|
||||
r: {
|
||||
pointLabels: {
|
||||
color: 'red'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
### Ticks
|
||||
|
||||
The ticks are used to label values based on how far they are from the center of the axis. In the example below, they are red.
|
||||
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const labels = Utils.months({count: 7});
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
||||
borderColor: 'rgb(54, 162, 235)',
|
||||
borderWidth: 1,
|
||||
data: [10, 20, 30, 40, 50, 0, 5],
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'radar',
|
||||
data,
|
||||
options: {
|
||||
scales: {
|
||||
r: {
|
||||
ticks: {
|
||||
color: 'red'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
@ -1,9 +1,4 @@
|
||||
---
|
||||
title: Linear Radial Axis
|
||||
---
|
||||
|
||||
import CommonAll from '../_common.md'
|
||||
import CommonTicksAll from '../_common_ticks.md'
|
||||
# Linear Radial Axis
|
||||
|
||||
The linear radial scale is used to chart numerical data. As the name suggests, linear interpolation is used to determine where a value lies in relation to the center of the axis.
|
||||
|
||||
@ -23,7 +18,7 @@ Namespace: `options.scales[scaleId]`
|
||||
| `pointLabels` | `object` | | Point label configuration. [more...](#point-label-options)
|
||||
| `startAngle` | `number` | `0` | Starting angle of the scale. In degrees, 0 is at top.
|
||||
|
||||
<CommonAll />
|
||||
!!!include(axes/_common.md)!!!
|
||||
|
||||
## Tick Configuration
|
||||
|
||||
@ -42,7 +37,7 @@ Namespace: `options.scales[scaleId].ticks`
|
||||
| `stepSize` | `number` | Yes | | User defined fixed step size for the scale. [more...](#step-size)
|
||||
| `showLabelBackdrop` | `boolean` | Yes | `true` | If true, draw a background behind the tick labels.
|
||||
|
||||
<CommonTicksAll />
|
||||
!!!include(axes/_common_ticks.md)!!!
|
||||
|
||||
The scriptable context is described in [Options](../../general/options.md#tick) section.
|
||||
|
||||
@ -1,8 +1,4 @@
|
||||
---
|
||||
title: Styling
|
||||
---
|
||||
|
||||
import CommonTicks from './_common_ticks.md'
|
||||
# Styling
|
||||
|
||||
There are a number of options to allow styling an axis. There are settings to control [grid lines](#grid-line-configuration) and [ticks](#tick-configuration).
|
||||
|
||||
@ -35,7 +31,7 @@ The scriptable context is described in [Options](../general/options.md#tick) sec
|
||||
|
||||
## Tick Configuration
|
||||
|
||||
<CommonTicks />
|
||||
!!!include(axes/_common_ticks.md)!!!
|
||||
|
||||
The scriptable context is described in [Options](../general/options.md#tick) section.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Area Chart
|
||||
---
|
||||
# Area Chart
|
||||
|
||||
Both [line](./line.mdx) and [radar](./radar.mdx) charts support a `fill` option on the dataset object which can be used to create space between two datasets or a dataset and a boundary, i.e. the scale `origin`, `start,` or `end` (see [filling modes](#filling-modes)).
|
||||
|
||||
> **Note:** this feature is implemented by the [`filler` plugin](https://github.com/chartjs/Chart.js/blob/master/src/plugins/plugin.filler.js).
|
||||
:::tip
|
||||
This feature is implemented by the [`filler` plugin](https://github.com/chartjs/Chart.js/blob/master/src/plugins/plugin.filler.js).
|
||||
:::
|
||||
|
||||
## Filling modes
|
||||
|
||||
@ -1,64 +1,57 @@
|
||||
---
|
||||
title: Bar Chart
|
||||
---
|
||||
# Bar Chart
|
||||
|
||||
A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
|
||||
|
||||
import { useEffect } from 'react';
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const labels = Utils.months({count: 7});
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'My First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(255, 159, 64, 0.2)',
|
||||
'rgba(255, 205, 86, 0.2)',
|
||||
'rgba(75, 192, 192, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(153, 102, 255, 0.2)',
|
||||
'rgba(201, 203, 207, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(255, 159, 64)',
|
||||
'rgb(255, 205, 86)',
|
||||
'rgb(75, 192, 192)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(153, 102, 255)',
|
||||
'rgb(201, 203, 207)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
export const ExampleChart0 = () => {
|
||||
useEffect(() => {
|
||||
const cfg = {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July'
|
||||
],
|
||||
datasets: [{
|
||||
label: 'My First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(255, 159, 64, 0.2)',
|
||||
'rgba(255, 205, 86, 0.2)',
|
||||
'rgba(75, 192, 192, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(153, 102, 255, 0.2)',
|
||||
'rgba(201, 203, 207, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(255, 159, 64)',
|
||||
'rgb(255, 205, 86)',
|
||||
'rgb(75, 192, 192)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(153, 102, 255)',
|
||||
'rgb(201, 203, 207)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'bar',
|
||||
data: data,
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
};
|
||||
const chart = new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
|
||||
return () => chart.destroy();
|
||||
});
|
||||
return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
<ExampleChart0/>
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
## Example Usage
|
||||
|
||||
@ -130,7 +123,9 @@ This setting is used to avoid drawing the bar stroke at the base of the fill, or
|
||||
In general, this does not need to be changed except when creating chart types
|
||||
that derive from a bar chart.
|
||||
|
||||
**Note:** for negative bars in a vertical chart, `top` and `bottom` are flipped. Same goes for `left` and `right` in a horizontal chart.
|
||||
:::tip
|
||||
For negative bars in a vertical chart, `top` and `bottom` are flipped. Same goes for `left` and `right` in a horizontal chart.
|
||||
:::
|
||||
|
||||
Options are:
|
||||
|
||||
@ -299,65 +294,53 @@ A horizontal bar chart is a variation on a vertical bar chart. It is sometimes u
|
||||
To achieve this you will have to set the `indexAxis` property in the options object to `'y'`.
|
||||
The default for this property is `'x'` and thus will show vertical bars.
|
||||
|
||||
export const ExampleChart1 = () => {
|
||||
useEffect(() => {
|
||||
const cfg = {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
axis: 'y',
|
||||
label: 'My First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(255, 159, 64, 0.2)',
|
||||
'rgba(255, 205, 86, 0.2)',
|
||||
'rgba(75, 192, 192, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(153, 102, 255, 0.2)',
|
||||
'rgba(201, 203, 207, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(255, 159, 64)',
|
||||
'rgb(255, 205, 86)',
|
||||
'rgb(75, 192, 192)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(153, 102, 255)',
|
||||
'rgb(201, 203, 207)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
indexAxis: 'y',
|
||||
scales: {
|
||||
x: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
const chart = new Chart(document.getElementById('chartjs-1').getContext('2d'), cfg);
|
||||
return () => chart.destroy();
|
||||
});
|
||||
return <div className="chartjs-wrapper"><canvas id="chartjs-1" className="chartjs"></canvas></div>;
|
||||
}
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const labels = Utils.months({count: 7});
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
axis: 'y',
|
||||
label: 'My First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(255, 159, 64, 0.2)',
|
||||
'rgba(255, 205, 86, 0.2)',
|
||||
'rgba(75, 192, 192, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(153, 102, 255, 0.2)',
|
||||
'rgba(201, 203, 207, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(255, 159, 64)',
|
||||
'rgb(255, 205, 86)',
|
||||
'rgb(75, 192, 192)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(153, 102, 255)',
|
||||
'rgb(201, 203, 207)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
<ExampleChart1/>
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'bar',
|
||||
data,
|
||||
options: {
|
||||
indexAxis: 'y',
|
||||
}
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
## Example
|
||||
|
||||
```javascript
|
||||
var myBarChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: data,
|
||||
options: {
|
||||
indexAxis: 'y'
|
||||
}
|
||||
});
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
### Horizontal Bar Chart config Options
|
||||
@ -1,38 +1,38 @@
|
||||
---
|
||||
title: Bubble Chart
|
||||
---
|
||||
# Bubble Chart
|
||||
|
||||
A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles.
|
||||
|
||||
import { useEffect } from 'react';
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const data = {
|
||||
datasets: [{
|
||||
label: 'First Dataset',
|
||||
data: [{
|
||||
x: 20,
|
||||
y: 30,
|
||||
r: 15
|
||||
}, {
|
||||
x: 40,
|
||||
y: 10,
|
||||
r: 10
|
||||
}],
|
||||
backgroundColor: 'rgb(255, 99, 132)'
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
export const ExampleChart = () => {
|
||||
useEffect(() => {
|
||||
const cfg = {
|
||||
type: 'bubble',
|
||||
data: {
|
||||
datasets: [{
|
||||
label: 'First Dataset',
|
||||
data: [{
|
||||
x: 20,
|
||||
y: 30,
|
||||
r: 15
|
||||
}, {
|
||||
x: 40,
|
||||
y: 10,
|
||||
r: 10
|
||||
}],
|
||||
backgroundColor: 'rgb(255, 99, 132)'
|
||||
}]
|
||||
}
|
||||
};
|
||||
const chart = new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
|
||||
return () => chart.destroy();
|
||||
});
|
||||
return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
|
||||
}
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'bubble',
|
||||
data: data,
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
<ExampleChart/>
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
## Example Usage
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Doughnut and Pie Charts
|
||||
---
|
||||
# Doughnut and Pie Charts
|
||||
|
||||
Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data.
|
||||
|
||||
@ -10,87 +8,85 @@ Pie and doughnut charts are effectively the same class in Chart.js, but have one
|
||||
|
||||
They are also registered under two aliases in the `Chart` core. Other than their different default value, and different alias, they are exactly the same.
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
:::: tabs
|
||||
|
||||
<Tabs
|
||||
defaultValue='doughnut'
|
||||
values={[
|
||||
{label: 'Doughnut', value: 'doughnut' },
|
||||
{label: 'Pie', value: 'pie' },
|
||||
]}
|
||||
>
|
||||
<TabItem value="doughnut">
|
||||
::: tab Doughnut
|
||||
|
||||
```jsx live
|
||||
function example() {
|
||||
const canvas = useRef(null);
|
||||
useEffect(() => {
|
||||
const cfg = {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: [
|
||||
'Red',
|
||||
'Blue',
|
||||
'Yellow'
|
||||
],
|
||||
datasets: [{
|
||||
label: 'My First Dataset',
|
||||
data: [300, 50, 100],
|
||||
backgroundColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(255, 205, 86)'
|
||||
],
|
||||
hoverOffset: 4
|
||||
}]
|
||||
}
|
||||
};
|
||||
const chart = new Chart(canvas.current.getContext('2d'), cfg);
|
||||
return () => chart.destroy();
|
||||
});
|
||||
return <div className="chartjs-wrapper"><canvas ref={canvas} className="chartjs"></canvas></div>;
|
||||
}
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const data = {
|
||||
labels: [
|
||||
'Red',
|
||||
'Blue',
|
||||
'Yellow'
|
||||
],
|
||||
datasets: [{
|
||||
label: 'My First Dataset',
|
||||
data: [300, 50, 100],
|
||||
backgroundColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(255, 205, 86)'
|
||||
],
|
||||
hoverOffset: 4
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'doughnut',
|
||||
data: data,
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
:::
|
||||
|
||||
<TabItem value="pie">
|
||||
:::tab Pie
|
||||
|
||||
```jsx live
|
||||
function example() {
|
||||
const canvas = useRef(null);
|
||||
useEffect(() => {
|
||||
const cfg = {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: [
|
||||
'Red',
|
||||
'Blue',
|
||||
'Yellow'
|
||||
],
|
||||
datasets: [{
|
||||
label: 'My First Dataset',
|
||||
data: [300, 50, 100],
|
||||
backgroundColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(255, 205, 86)'
|
||||
],
|
||||
hoverOffset: 4
|
||||
}]
|
||||
}
|
||||
};
|
||||
const chart = new Chart(canvas.current.getContext('2d'), cfg);
|
||||
return () => chart.destroy();
|
||||
});
|
||||
return <div className="chartjs-wrapper"><canvas ref={canvas} className="chartjs"></canvas></div>;
|
||||
}
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const data = {
|
||||
labels: [
|
||||
'Red',
|
||||
'Blue',
|
||||
'Yellow'
|
||||
],
|
||||
datasets: [{
|
||||
label: 'My First Dataset',
|
||||
data: [300, 50, 100],
|
||||
backgroundColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(255, 205, 86)'
|
||||
],
|
||||
hoverOffset: 4
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'pie',
|
||||
data: data,
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
## Dataset Properties
|
||||
|
||||
@ -1,43 +1,34 @@
|
||||
---
|
||||
title: Line Chart
|
||||
---
|
||||
# Line Chart
|
||||
|
||||
A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.
|
||||
|
||||
import { useEffect } from 'react';
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const labels = Utils.months({count: 7});
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'My First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
borderColor: 'rgb(75, 192, 192)',
|
||||
tension: 0.1
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
export const ExampleChart = () => {
|
||||
useEffect(() => {
|
||||
const cfg = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July'
|
||||
],
|
||||
datasets: [{
|
||||
label: 'My First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
borderColor: 'rgb(75, 192, 192)',
|
||||
tension: 0.1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
}
|
||||
};
|
||||
const chart = new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
|
||||
return () => chart.destroy();
|
||||
});
|
||||
return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
|
||||
}
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'line',
|
||||
data: data,
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
<ExampleChart/>
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
## Example Usage
|
||||
|
||||
@ -224,54 +215,59 @@ A vertical line chart is a variation on the horizontal line chart.
|
||||
To achieve this you will have to set the `indexAxis` property in the options object to `'y'`.
|
||||
The default for this property is `'x'` and thus will show horizontal lines.
|
||||
|
||||
export const ExampleChart1 = () => {
|
||||
useEffect(() => {
|
||||
const cfg = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
axis: 'y',
|
||||
label: 'My First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(255, 159, 64, 0.2)',
|
||||
'rgba(255, 205, 86, 0.2)',
|
||||
'rgba(75, 192, 192, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(153, 102, 255, 0.2)',
|
||||
'rgba(201, 203, 207, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(255, 159, 64)',
|
||||
'rgb(255, 205, 86)',
|
||||
'rgb(75, 192, 192)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(153, 102, 255)',
|
||||
'rgb(201, 203, 207)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
indexAxis: 'y',
|
||||
scales: {
|
||||
x: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
const chart = new Chart(document.getElementById('chartjs-1').getContext('2d'), cfg);
|
||||
return () => chart.destroy();
|
||||
});
|
||||
return <div className="chartjs-wrapper"><canvas id="chartjs-1" className="chartjs"></canvas></div>;
|
||||
}
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const labels = Utils.months({count: 7});
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
axis: 'y',
|
||||
label: 'My First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(255, 159, 64, 0.2)',
|
||||
'rgba(255, 205, 86, 0.2)',
|
||||
'rgba(75, 192, 192, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(153, 102, 255, 0.2)',
|
||||
'rgba(201, 203, 207, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(255, 159, 64)',
|
||||
'rgb(255, 205, 86)',
|
||||
'rgb(75, 192, 192)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(153, 102, 255)',
|
||||
'rgb(201, 203, 207)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
<ExampleChart1/>
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
indexAxis: 'y',
|
||||
scales: {
|
||||
x: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Mixed Chart Types
|
||||
---
|
||||
# Mixed Chart Types
|
||||
|
||||
With Chart.js, it is possible to create mixed charts that are a combination of two or more different chart types. A common example is a bar chart that also includes a line dataset.
|
||||
|
||||
@ -26,47 +24,50 @@ var mixedChart = new Chart(ctx, {
|
||||
|
||||
At this point, we have a chart rendering how we'd like. It's important to note that the default options for the charts are only considered at the dataset level and are not merged at the chart level in this case.
|
||||
|
||||
import { useEffect } from 'react';
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const data = {
|
||||
labels: [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April'
|
||||
],
|
||||
datasets: [{
|
||||
type: 'bar',
|
||||
label: 'Bar Dataset',
|
||||
data: [10, 20, 30, 40],
|
||||
borderColor: 'rgb(255, 99, 132)',
|
||||
backgroundColor: 'rgba(255, 99, 132, 0.2)'
|
||||
}, {
|
||||
type: 'line',
|
||||
label: 'Line Dataset',
|
||||
data: [50, 50, 50, 50],
|
||||
fill: false,
|
||||
borderColor: 'rgb(54, 162, 235)'
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
export const ExampleChart = () => {
|
||||
useEffect(() => {
|
||||
const cfg = {
|
||||
data: {
|
||||
labels: [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April'
|
||||
],
|
||||
datasets: [{
|
||||
type: 'bar',
|
||||
label: 'Bar Dataset',
|
||||
data: [10, 20, 30, 40],
|
||||
borderColor: 'rgb(255, 99, 132)',
|
||||
backgroundColor: 'rgba(255, 99, 132, 0.2)'
|
||||
}, {
|
||||
type: 'line',
|
||||
label: 'Line Dataset',
|
||||
data: [50, 50, 50, 50],
|
||||
fill: false,
|
||||
borderColor: 'rgb(54, 162, 235)'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'scatter',
|
||||
data: data,
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
};
|
||||
const chart = new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
|
||||
return () => chart.destroy();
|
||||
});
|
||||
return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
<ExampleChart/>
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
## Drawing order
|
||||
|
||||
@ -1,45 +1,45 @@
|
||||
---
|
||||
title: Polar Area Chart
|
||||
---
|
||||
# Polar Area Chart
|
||||
|
||||
Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.
|
||||
|
||||
This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.
|
||||
|
||||
import { useEffect } from 'react';
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const data = {
|
||||
labels: [
|
||||
'Red',
|
||||
'Green',
|
||||
'Yellow',
|
||||
'Grey',
|
||||
'Blue'
|
||||
],
|
||||
datasets: [{
|
||||
label: 'My First Dataset',
|
||||
data: [11, 16, 7, 3, 14],
|
||||
backgroundColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(75, 192, 192)',
|
||||
'rgb(255, 205, 86)',
|
||||
'rgb(201, 203, 207)',
|
||||
'rgb(54, 162, 235)'
|
||||
]
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
export const ExampleChart = () => {
|
||||
useEffect(() => {
|
||||
const cfg = {
|
||||
type: 'polarArea',
|
||||
data: {
|
||||
labels: [
|
||||
'Red',
|
||||
'Green',
|
||||
'Yellow',
|
||||
'Grey',
|
||||
'Blue'
|
||||
],
|
||||
datasets: [{
|
||||
label: 'My First Dataset',
|
||||
data: [11, 16, 7, 3, 14],
|
||||
backgroundColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(75, 192, 192)',
|
||||
'rgb(255, 205, 86)',
|
||||
'rgb(201, 203, 207)',
|
||||
'rgb(54, 162, 235)'
|
||||
]
|
||||
}]
|
||||
}
|
||||
};
|
||||
const chart = new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
|
||||
return () => chart.destroy();
|
||||
});
|
||||
return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
|
||||
}
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'polarArea',
|
||||
data: data,
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
<ExampleChart/>
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
## Example Usage
|
||||
|
||||
@ -1,63 +1,64 @@
|
||||
---
|
||||
title: Radar Chart
|
||||
---
|
||||
# Radar Chart
|
||||
|
||||
A radar chart is a way of showing multiple data points and the variation between them.
|
||||
|
||||
They are often useful for comparing the points of two or more different data sets.
|
||||
|
||||
import { useEffect } from 'react';
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const data = {
|
||||
labels: [
|
||||
'Eating',
|
||||
'Drinking',
|
||||
'Sleeping',
|
||||
'Designing',
|
||||
'Coding',
|
||||
'Cycling',
|
||||
'Running'
|
||||
],
|
||||
datasets: [{
|
||||
label: 'My First Dataset',
|
||||
data: [65, 59, 90, 81, 56, 55, 40],
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
||||
borderColor: 'rgb(255, 99, 132)',
|
||||
pointBackgroundColor: 'rgb(255, 99, 132)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgb(255, 99, 132)'
|
||||
}, {
|
||||
label: 'My Second Dataset',
|
||||
data: [28, 48, 40, 19, 96, 27, 100],
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
||||
borderColor: 'rgb(54, 162, 235)',
|
||||
pointBackgroundColor: 'rgb(54, 162, 235)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgb(54, 162, 235)'
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
export const ExampleChart = () => {
|
||||
useEffect(() => {
|
||||
const cfg = {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: [
|
||||
'Eating',
|
||||
'Drinking',
|
||||
'Sleeping',
|
||||
'Designing',
|
||||
'Coding',
|
||||
'Cycling',
|
||||
'Running'
|
||||
],
|
||||
datasets: [{
|
||||
label: 'My First Dataset',
|
||||
data: [65, 59, 90, 81, 56, 55, 40],
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
||||
borderColor: 'rgb(255, 99, 132)',
|
||||
pointBackgroundColor: 'rgb(255, 99, 132)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgb(255, 99, 132)'
|
||||
}, {
|
||||
label: 'My Second Dataset',
|
||||
data: [28, 48, 40, 19, 96, 27, 100],
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
||||
borderColor: 'rgb(54, 162, 235)',
|
||||
pointBackgroundColor: 'rgb(54, 162, 235)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgb(54, 162, 235)'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0,
|
||||
borderWidth: 3
|
||||
}
|
||||
}
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'radar',
|
||||
data: data,
|
||||
options: {
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 3
|
||||
}
|
||||
};
|
||||
const chart = new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
|
||||
return () => chart.destroy();
|
||||
});
|
||||
return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
<ExampleChart/>
|
||||
|
||||
72
docs/charts/scatter.md
Normal file
72
docs/charts/scatter.md
Normal file
@ -0,0 +1,72 @@
|
||||
# Scatter Chart
|
||||
|
||||
Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 4 points.
|
||||
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const data = {
|
||||
datasets: [{
|
||||
label: 'Scatter Dataset',
|
||||
data: [{
|
||||
x: -10,
|
||||
y: 0
|
||||
}, {
|
||||
x: 0,
|
||||
y: 10
|
||||
}, {
|
||||
x: 10,
|
||||
y: 5
|
||||
}, {
|
||||
x: 0.5,
|
||||
y: 5.5
|
||||
}],
|
||||
backgroundColor: 'rgb(255, 99, 132)'
|
||||
}],
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'scatter',
|
||||
data: data,
|
||||
options: {
|
||||
scales: {
|
||||
x: {
|
||||
type: 'linear',
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
## Dataset Properties
|
||||
|
||||
The scatter chart supports all of the same properties as the [line chart](./charts/line.mdx#dataset-properties).
|
||||
By default, the scatter chart will override the showLine property of the line chart to `false`.
|
||||
|
||||
The index scale is of the type `linear`. This means if you are using the labels array the values have to be numbers or parsable to numbers, the same applies to the object format for the keys.
|
||||
|
||||
## Data Structure
|
||||
|
||||
Unlike the line chart where data can be supplied in two different formats, the scatter chart only accepts data in a point format.
|
||||
|
||||
```javascript
|
||||
data: [{
|
||||
x: 10,
|
||||
y: 20
|
||||
}, {
|
||||
x: 15,
|
||||
y: 10
|
||||
}]
|
||||
```
|
||||
|
||||
## Internal data format
|
||||
|
||||
`{x, y}`
|
||||
@ -1,115 +1,111 @@
|
||||
---
|
||||
title: Animations
|
||||
---
|
||||
# Animations
|
||||
|
||||
Chart.js animates charts out of the box. A number of options are provided to configure how the animation looks and how long it takes.
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
:::: tabs
|
||||
|
||||
<Tabs
|
||||
defaultValue='tension'
|
||||
values={[
|
||||
{label: 'Looping tension [property]', value: 'tension' },
|
||||
{label: 'Hide and show [mode]', value: 'hideshow' },
|
||||
]}
|
||||
>
|
||||
<TabItem value="tension">
|
||||
::: tab "Looping tension [property]"
|
||||
|
||||
```jsx live
|
||||
function example() {
|
||||
useEffect(() => {
|
||||
const ctx = document.getElementById('chartjs-a0').getContext('2d');
|
||||
const cfg = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'Looping tension',
|
||||
data: [65, 59, 80, 81, 26, 55, 40],
|
||||
fill: false,
|
||||
borderColor: 'rgb(75, 192, 192)',
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const data = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'Looping tension',
|
||||
data: [65, 59, 80, 81, 26, 55, 40],
|
||||
fill: false,
|
||||
borderColor: 'rgb(75, 192, 192)',
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
animations: {
|
||||
tension: {
|
||||
duration: 1000,
|
||||
easing: 'linear',
|
||||
from: 1,
|
||||
to: 0,
|
||||
loop: true
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: { // defining min and max so hiding the dataset does not change scale range
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab "Hide and show [mode]"
|
||||
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const data = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'Try hiding me',
|
||||
data: [65, 59, 80, 81, 26, 55, 40],
|
||||
fill: false,
|
||||
borderColor: 'rgb(75, 192, 192)',
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
transitions: {
|
||||
show: {
|
||||
animations: {
|
||||
tension: {
|
||||
duration: 1000,
|
||||
easing: 'linear',
|
||||
from: 1,
|
||||
to: 0,
|
||||
loop: true
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: { // defining min and max so hiding the dataset does not change scale range
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
const chart = new Chart(ctx, cfg);
|
||||
return () => chart.destroy();
|
||||
});
|
||||
return <div className="chartjs-wrapper"><canvas id="chartjs-a0" className="chartjs"></canvas></div>;
|
||||
}
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="hideshow">
|
||||
|
||||
```jsx live
|
||||
function example() {
|
||||
useEffect(() => {
|
||||
const ctx = document.getElementById('chartjs-a1').getContext('2d');
|
||||
const cfg = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'Try hiding me',
|
||||
data: [65, 59, 80, 81, 26, 55, 40],
|
||||
fill: false,
|
||||
borderColor: 'rgb(75, 192, 192)',
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
transitions: {
|
||||
show: {
|
||||
animations: {
|
||||
x: {
|
||||
from: 0
|
||||
},
|
||||
y: {
|
||||
from: 0
|
||||
}
|
||||
}
|
||||
x: {
|
||||
from: 0
|
||||
},
|
||||
hide: {
|
||||
animations: {
|
||||
x: {
|
||||
to: 0
|
||||
},
|
||||
y: {
|
||||
to: 0
|
||||
}
|
||||
}
|
||||
y: {
|
||||
from: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
hide: {
|
||||
animations: {
|
||||
x: {
|
||||
to: 0
|
||||
},
|
||||
y: {
|
||||
to: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
const chart = new Chart(ctx, cfg);
|
||||
return () => chart.destroy();
|
||||
});
|
||||
return <div className="chartjs-wrapper"><canvas id="chartjs-a1" className="chartjs"></canvas></div>;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
## Animation configuration
|
||||
|
||||
@ -131,7 +127,7 @@ These paths are valid under `defaults` for global confuguration and `options` fo
|
||||
|
||||
## animation
|
||||
|
||||
The default configuration is defined here: <a href="https://github.com/chartjs/Chart.js/blob/master/src/core/core.animations.js#L9-L56" target="_blank">core.animations.js</a>
|
||||
The default configuration is defined here: <a href="https://github.com/chartjs/Chart.js/blob/master/src/core/core.animations.js" target="_blank">core.animations.js</a>
|
||||
|
||||
Namespace: `options.animation`
|
||||
|
||||
@ -168,7 +164,7 @@ Namespace: `options.animations[animation]`
|
||||
| `colors` | `properties` | `['color', 'borderColor', 'backgroundColor']`
|
||||
| `colors` | `type` | `'color'`
|
||||
|
||||
:::note
|
||||
:::tip
|
||||
These default animations are overridden by most of the dataset controllers.
|
||||
:::
|
||||
|
||||
124
docs/configuration/canvas-background.md
Normal file
124
docs/configuration/canvas-background.md
Normal file
@ -0,0 +1,124 @@
|
||||
# Canvas background
|
||||
|
||||
In some use cases you would want a background image or color over the whole canvas. There is no build in support for this, the way you can achieve this is by writing a custom plugin.
|
||||
|
||||
In the two example plugins underneath here you can see how you can draw an color or image to the canvas as background. This way of giving the chart a background is only necessary if you want to export the chart with that specific background.
|
||||
For normal use you can set the background more easily with [CSS](https://www.w3schools.com/cssref/css3_pr_background.asp).
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab Color
|
||||
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const data = {
|
||||
labels: [
|
||||
'Red',
|
||||
'Blue',
|
||||
'Yellow'
|
||||
],
|
||||
datasets: [{
|
||||
label: 'My First Dataset',
|
||||
data: [300, 50, 100],
|
||||
backgroundColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(255, 205, 86)'
|
||||
],
|
||||
hoverOffset: 4
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
// <block:plugin:2>
|
||||
// Note: changes to the plugin code is not reflected to the chart, because the plugin is loaded at chart construction time and editor changes only trigger an chart.update().
|
||||
const plugin = {
|
||||
id: 'custom_canvas_background_color',
|
||||
beforeDraw: (chart) => {
|
||||
const ctx = chart.canvas.getContext('2d');
|
||||
ctx.save();
|
||||
ctx.globalCompositeOperation = 'destination-over';
|
||||
ctx.fillStyle = 'lightGreen';
|
||||
ctx.fillRect(0, 0, chart.width, chart.height);
|
||||
ctx.restore();
|
||||
}
|
||||
};
|
||||
// </block:plugin>
|
||||
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'doughnut',
|
||||
data: data,
|
||||
plugins: [plugin],
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab Image
|
||||
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const data = {
|
||||
labels: [
|
||||
'Red',
|
||||
'Blue',
|
||||
'Yellow'
|
||||
],
|
||||
datasets: [{
|
||||
label: 'My First Dataset',
|
||||
data: [300, 50, 100],
|
||||
backgroundColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(255, 205, 86)'
|
||||
],
|
||||
hoverOffset: 4
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
// <block:plugin:2>
|
||||
// Note: changes to the plugin code is not reflected to the chart, because the plugin is loaded at chart construction time and editor changes only trigger an chart.update().
|
||||
const image = new Image();
|
||||
image.src = 'https://www.chartjs.org/img/chartjs-logo.svg';
|
||||
|
||||
const plugin = {
|
||||
id: 'custom_canvas_background_image',
|
||||
beforeDraw: (chart) => {
|
||||
if (image.complete) {
|
||||
const ctx = chart.ctx;
|
||||
const {top, left, width, height} = chart.chartArea;
|
||||
const x = left + width / 2 - image.width / 2;
|
||||
const y = top + height / 2 - image.height / 2;
|
||||
ctx.drawImage(image, x, y);
|
||||
} else {
|
||||
image.onload = () => chart.draw();
|
||||
}
|
||||
}
|
||||
};
|
||||
// </block:plugin>
|
||||
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'doughnut',
|
||||
data: data,
|
||||
plugins: [plugin],
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::::
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Data Decimation
|
||||
---
|
||||
# Data Decimation
|
||||
|
||||
The decimation plugin can be used with line charts to automatically decimate data at the start of the chart lifecycle. Before enabling this plugin, review the [requirements](#requirements) to ensure that it will work with the chart you want to create.
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Device Pixel Ratio
|
||||
---
|
||||
# Device Pixel Ratio
|
||||
|
||||
By default the chart's canvas will use a 1:1 pixel ratio, unless the physical display has a higher pixel ratio (e.g. Retina displays).
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Elements
|
||||
---
|
||||
# Elements
|
||||
|
||||
While chart types provide settings to configure the styling of each dataset, you sometimes want to style **all datasets the same way**. A common example would be to stroke all of the bars in a bar chart with the same colour but change the fill per dataset. Options can be configured for four different types of elements: **[arc](#arc-configuration)**, **[lines](#line-configuration)**, **[points](#point-configuration)**, and **[bars](#bar-configuration)**. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset.
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Configuration
|
||||
---
|
||||
# Configuration
|
||||
|
||||
The configuration is used to change how the chart behaves. There are properties to control styling, fonts, the legend, etc.
|
||||
|
||||
@ -1,6 +1,62 @@
|
||||
---
|
||||
title: Interaction Modes
|
||||
---
|
||||
# Interactions
|
||||
|
||||
Namespace: `options.interaction`, the global interaction configuration is at `Chart.defaults.interaction`. To configure which events trigger chart interactions, see [events](events.md#events).
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| ---- | ---- | ------- | -----------
|
||||
| `mode` | `string` | `'nearest'` | Sets which elements appear in the interaction. See [Interaction Modes](modes.md#interaction-modes) for details.
|
||||
| `intersect` | `boolean` | `true` | if true, the interaction mode only applies when the mouse position intersects an item on the chart.
|
||||
| `axis` | `string` | `'x'` | Can be set to `'x'`, `'y'`, or `'xy'` to define which directions are used in calculating distances. Defaults to `'x'` for `'index'` mode and `'xy'` in `dataset` and `'nearest'` modes.
|
||||
|
||||
By default, these options apply to both the hover and tooltip interactions. The same options can be set in the `options.hover` namespace, in which case they will only affect the hover interaction. Similarly, the options can be set in the `options.plugins.tooltip` namespace to independently configure the tooltip interactions.
|
||||
|
||||
## Events
|
||||
|
||||
The following properties define how the chart interacts with events.
|
||||
Namespace: `options`
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| ---- | ---- | ------- | -----------
|
||||
| `events` | `string[]` | `['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']` | The `events` option defines the browser events that the chart should listen to for tooltips and hovering. [more...](#event-option)
|
||||
| `onHover` | `function` | `null` | Called when any of the events fire. Passed the event, an array of active elements (bars, points, etc), and the chart.
|
||||
| `onClick` | `function` | `null` | Called if the event is of type `'mouseup'` or `'click'`. Passed the event, an array of active elements, and the chart.
|
||||
|
||||
### Event Option
|
||||
|
||||
For example, to have the chart only respond to click events, you could do:
|
||||
|
||||
```javascript
|
||||
var chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
// This chart will not respond to mousemove, etc
|
||||
events: ['click']
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Converting Events to Data Values
|
||||
|
||||
A common occurrence is taking an event, such as a click, and finding the data coordinates on the chart where the event occurred. Chart.js provides helpers that make this a straightforward process.
|
||||
|
||||
```javascript
|
||||
const chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
onClick: (e) => {
|
||||
const canvasPosition = Chart.helpers.getRelativePosition(e, chart);
|
||||
|
||||
// Substitute the appropriate scale IDs
|
||||
const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
|
||||
const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Modes
|
||||
|
||||
When configuring the interaction with the graph via `interaction`, `hover` or `tooltips`, a number of different modes are available.
|
||||
|
||||
@ -8,7 +64,7 @@ When configuring the interaction with the graph via `interaction`, `hover` or `t
|
||||
|
||||
The modes are detailed below and how they behave in conjunction with the `intersect` setting.
|
||||
|
||||
## point
|
||||
### point
|
||||
|
||||
Finds all of the items that intersect the point.
|
||||
|
||||
@ -24,7 +80,7 @@ var chart = new Chart(ctx, {
|
||||
});
|
||||
```
|
||||
|
||||
## nearest
|
||||
### nearest
|
||||
|
||||
Gets the items that are at the nearest distance to the point. The nearest item is determined based on the distance to the center of the chart item (point, bar). You can use the `axis` setting to define which directions are used in distance calculation. If `intersect` is true, this is only triggered when the mouse position intersects an item in the graph. This is very useful for combo charts where points are hidden behind bars.
|
||||
|
||||
@ -40,7 +96,7 @@ var chart = new Chart(ctx, {
|
||||
});
|
||||
```
|
||||
|
||||
## index
|
||||
### index
|
||||
|
||||
Finds item at the same index. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item, in the x direction, is used to determine the index.
|
||||
|
||||
@ -71,7 +127,7 @@ var chart = new Chart(ctx, {
|
||||
});
|
||||
```
|
||||
|
||||
## dataset
|
||||
### dataset
|
||||
|
||||
Finds items in the same dataset. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item is used to determine the index.
|
||||
|
||||
@ -87,7 +143,7 @@ var chart = new Chart(ctx, {
|
||||
});
|
||||
```
|
||||
|
||||
## x
|
||||
### x
|
||||
|
||||
Returns all items that would intersect based on the `X` coordinate of the position only. Would be useful for a vertical cursor implementation. Note that this only applies to cartesian charts.
|
||||
|
||||
@ -103,7 +159,7 @@ var chart = new Chart(ctx, {
|
||||
});
|
||||
```
|
||||
|
||||
## y
|
||||
### y
|
||||
|
||||
Returns all items that would intersect based on the `Y` coordinate of the position. This would be useful for a horizontal cursor implementation. Note that this only applies to cartesian charts.
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Layout
|
||||
---
|
||||
# Layout
|
||||
|
||||
Namespace: `options.layout`, the global options for the chart layout is defined in `Chart.defaults.layout`.
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Legend
|
||||
---
|
||||
# Legend
|
||||
|
||||
The chart legend displays data about the datasets that are appearing on the chart.
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Locale
|
||||
---
|
||||
# Locale
|
||||
|
||||
For applications where the numbers of ticks on scales must be formatted accordingly with a language sensitive number formatting, you can enable this kind of formatting by setting the `locale` option.
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Responsive Charts
|
||||
---
|
||||
# Responsive Charts
|
||||
|
||||
When it comes to changing the chart size based on the window size, a major limitation is that the canvas *render* size (`canvas.width` and `.height`) can **not** be expressed with relative values, contrary to the *display* size (`canvas.style.width` and `.height`). Furthermore, these sizes are independent from each other and thus the canvas *render* size does not adjust automatically based on the *display* size, making the rendering inaccurate.
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Title
|
||||
---
|
||||
# Title
|
||||
|
||||
The chart title defines text to draw at the top of the chart.
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Tooltip
|
||||
---
|
||||
# Tooltip
|
||||
|
||||
## Tooltip Configuration
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: API
|
||||
---
|
||||
# API
|
||||
|
||||
For each chart, there are a set of global prototype methods on the shared chart type which you may find useful. These are available on all charts created with Chart.js, but for the examples, let's use a line chart we've made.
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: New Axes
|
||||
---
|
||||
# New Axes
|
||||
|
||||
Axes in Chart.js can be individually extended. Axes should always derive from `Chart.Scale` but this is not a mandatory requirement.
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: New Charts
|
||||
---
|
||||
# New Charts
|
||||
|
||||
Chart.js 2.0 introduced the concept of controllers for each dataset. Like scales, new controllers can be written as needed.
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Contributing
|
||||
---
|
||||
# Contributing
|
||||
|
||||
New contributions to the library are welcome, but we ask that you please follow these guidelines:
|
||||
|
||||
@ -39,12 +37,10 @@ The following commands are now available from the repository root:
|
||||
|
||||
### Documentation
|
||||
|
||||
We use [Docusaurus v2](https://v2.docusaurus.io/docs/introduction) to manage the docs which are contained as Markdown files in the docs directory. You can run the doc server locally using the commands provided by Docusaurus:
|
||||
We use [Vuepress](https://vuepress.vuejs.org/) to manage the docs which are contained as Markdown files in the docs directory. You can run the doc server locally using these commands:
|
||||
|
||||
```bash
|
||||
> cd docs
|
||||
> npm install
|
||||
> npm run start
|
||||
> npm run docs:dev
|
||||
```
|
||||
|
||||
### Image-Based Tests
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Developers
|
||||
---
|
||||
# Developers
|
||||
|
||||
Developer features allow extending and enhancing Chart.js in many different ways.
|
||||
|
||||
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
@ -1,7 +1,4 @@
|
||||
---
|
||||
title: Plugins
|
||||
---
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
# Plugins
|
||||
|
||||
Plugins are the most efficient way to customize or change the default behavior of a chart. They have been introduced at [version 2.1.0](https://github.com/chartjs/Chart.js/releases/tag/2.1.0) (global plugins only) and extended at [version 2.5.0](https://github.com/chartjs/Chart.js/releases/tag/v2.5.0) (per chart plugins and options).
|
||||
|
||||
@ -27,7 +24,9 @@ var chart3 = new Chart(ctx, {});
|
||||
|
||||
Plugins can also be defined directly in the chart `plugins` config (a.k.a. *inline plugins*):
|
||||
|
||||
> Note: *inline* plugins are not registered. Some plugins require registering, i.e. can't be used *inline*.
|
||||
:::warning
|
||||
*inline* plugins are not registered. Some plugins require registering, i.e. can't be used *inline*.
|
||||
:::
|
||||
|
||||
```javascript
|
||||
var chart = new Chart(ctx, {
|
||||
@ -51,7 +50,9 @@ Chart.register({
|
||||
});
|
||||
```
|
||||
|
||||
> Note: *inline* plugins can't be registered globally.
|
||||
:::warning
|
||||
*inline* plugins can't be registered globally.
|
||||
:::
|
||||
|
||||
## Configuration
|
||||
|
||||
@ -121,22 +122,22 @@ var chart = new Chart(ctx, {
|
||||
|
||||
## Plugin Core API
|
||||
|
||||
Read more about the [existing plugin extension hooks](https://github.com/chartjs/Chart.js/blob/master/types/index.esm.d.ts#L733).
|
||||
Read more about the [existing plugin extension hooks](https://github.com/chartjs/Chart.js/blob/master/types/index.esm.d.ts).
|
||||
|
||||
### Chart Initialization
|
||||
|
||||
Plugins are notified during the initialization process. These hooks can be used to setup data needed for the plugin to operate.
|
||||
|
||||
<img alt="Chart.js init flowchart" src={useBaseUrl('img/init_flowchart.png')} />
|
||||
|
||||
|
||||
### Chart Update
|
||||
|
||||
Plugins are notified during throughout the update process.
|
||||
|
||||
<img alt="Chart.js update flowchart" src={useBaseUrl('img/update_flowchart.png')} />
|
||||
|
||||
|
||||
### Rendering
|
||||
|
||||
Plugins can interact with the chart throughout the render process. The rendering process is documented in the flowchart below. Each of the green processes is a plugin notification. The red lines indicate how cancelling part of the render process can occur when a plugin returns `false` from a hook. Not all hooks are cancelable, however, in general most `before*` hooks can be cancelled.
|
||||
|
||||
<img alt="Chart.js render pipeline flowchart" src={useBaseUrl('img/render_flowchart.png')} />
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Publishing an extension
|
||||
---
|
||||
# Publishing an extension
|
||||
|
||||
If you are planning on publishing an extension for Chart.js, here are a some pointers.
|
||||
|
||||
@ -27,12 +25,13 @@ For example `import {isNullOrUndef} from 'chart.js/helpers'` is available at `Ch
|
||||
`output.globals` can be used to convert the helpers.
|
||||
|
||||
```js
|
||||
{
|
||||
output: {
|
||||
globals: {
|
||||
'chart.js': 'Chart',
|
||||
'chart.js/helpers': 'Chart.helpers'
|
||||
}
|
||||
module.exports = {
|
||||
// ...
|
||||
output: {
|
||||
globals: {
|
||||
'chart.js': 'Chart',
|
||||
'chart.js/helpers': 'Chart.helpers'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 95 KiB |
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Updating Charts
|
||||
---
|
||||
# Updating Charts
|
||||
|
||||
It's pretty common to want to update charts after they've been created. When the chart data or options are changed, Chart.js will animate to the new data values and options.
|
||||
|
||||
@ -1,103 +0,0 @@
|
||||
---
|
||||
title: Radial Axes
|
||||
---
|
||||
import { useEffect } from 'react';
|
||||
|
||||
Radial axes are used specifically for the radar and polar area chart types. These axes overlay the chart area, rather than being positioned on one of the edges. One radial axis is included by default in Chart.js.
|
||||
|
||||
* [radialLinear](./linear.mdx)
|
||||
|
||||
## Visual Components
|
||||
|
||||
A radial axis is composed of visual components that can be individually configured. These components are:
|
||||
|
||||
* [angle lines](#angle-lines)
|
||||
* [grid lines](#grid-lines)
|
||||
* [point labels](#point-labels)
|
||||
* [ticks](#ticks)
|
||||
|
||||
export const RadialChartExample = ({id, rScaleConfig}) => {
|
||||
useEffect(() => {
|
||||
const cfg = {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'Dataset 1',
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
||||
borderColor: 'rgb(54, 162, 235)',
|
||||
borderWidth: 1,
|
||||
data: [
|
||||
10, 20, 30, 40, 50, 0, 5
|
||||
]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
r: rScaleConfig,
|
||||
}
|
||||
}
|
||||
};
|
||||
const chart = new Chart(document.getElementById(id).getContext('2d'), cfg);
|
||||
return () => chart.destroy();
|
||||
});
|
||||
return (
|
||||
<div className="chartjs-center">
|
||||
<div className="chartjs-wrapper chartjs-small-chart">
|
||||
<canvas id={id} className="chartjs"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
### Angle Lines
|
||||
|
||||
The grid lines for an axis are drawn on the chart area. They stretch out from the center towards the edge of the canvas. In the example below, they are red.
|
||||
|
||||
<RadialChartExample
|
||||
id="chart-angle"
|
||||
rScaleConfig={{
|
||||
angleLines: {
|
||||
color: 'red'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
### Grid Lines
|
||||
|
||||
The grid lines for an axis are drawn on the chart area. In the example below, they are red.
|
||||
|
||||
<RadialChartExample
|
||||
id="chart-grid"
|
||||
rScaleConfig={{
|
||||
grid: {
|
||||
color: 'red'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
### Point Labels
|
||||
|
||||
The point labels indicate the value for each angle line. In the example below, they are red.
|
||||
|
||||
<RadialChartExample
|
||||
id="chart-point-labels"
|
||||
rScaleConfig={{
|
||||
pointLabels: {
|
||||
color: 'red'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
### Ticks
|
||||
|
||||
The ticks are used to label values based on how far they are from the center of the axis. In the example below, they are red.
|
||||
|
||||
<RadialChartExample
|
||||
id="chart-ticks"
|
||||
rScaleConfig={{
|
||||
ticks: {
|
||||
color: 'red'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@ -1,73 +0,0 @@
|
||||
---
|
||||
title: Scatter Chart
|
||||
---
|
||||
|
||||
Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 4 points.
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
```jsx live
|
||||
function example() {
|
||||
const canvas = useRef(null);
|
||||
useEffect(() => {
|
||||
const cfg = {
|
||||
type: 'scatter',
|
||||
data: {
|
||||
datasets: [{
|
||||
label: 'Scatter Dataset',
|
||||
data: [{
|
||||
x: -10,
|
||||
y: 0
|
||||
}, {
|
||||
x: 0,
|
||||
y: 10
|
||||
}, {
|
||||
x: 10,
|
||||
y: 5
|
||||
}, {
|
||||
x: 0.5,
|
||||
y: 5.5
|
||||
}],
|
||||
backgroundColor: 'rgb(255, 99, 132)'
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
x: {
|
||||
type: 'linear',
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
const chart = new Chart(canvas.current.getContext('2d'), cfg);
|
||||
return () => chart.destroy();
|
||||
});
|
||||
return <div className="chartjs-wrapper"><canvas ref={canvas} className="chartjs"></canvas></div>;
|
||||
}
|
||||
```
|
||||
|
||||
## Dataset Properties
|
||||
|
||||
The scatter chart supports all of the same properties as the [line chart](./charts/line.mdx#dataset-properties).
|
||||
By default, the scatter chart will override the showLine property of the line chart to `false`.
|
||||
|
||||
The index scale is of the type `linear`. This means if you are using the labels array the values have to be numbers or parsable to numbers, the same applies to the object format for the keys.
|
||||
|
||||
## Data Structure
|
||||
|
||||
Unlike the line chart where data can be supplied in two different formats, the scatter chart only accepts data in a point format.
|
||||
|
||||
```javascript
|
||||
data: [{
|
||||
x: 10,
|
||||
y: 20
|
||||
}, {
|
||||
x: 15,
|
||||
y: 10
|
||||
}]
|
||||
```
|
||||
|
||||
## Internal data format
|
||||
|
||||
`{x, y}`
|
||||
@ -1,117 +0,0 @@
|
||||
---
|
||||
title: Canvas background
|
||||
---
|
||||
|
||||
In some use cases you would want a background image or color over the whole canvas. There is no build in support for this, the way you can achieve this is by writing a custom plugin.
|
||||
|
||||
In the two example plugins underneath here you can see how you can draw an color or image to the canvas as background. This way of giving the chart a background is only necessary if you want to export the chart with that specific background.
|
||||
For normal use you can set the background more easily with [CSS](https://www.w3schools.com/cssref/css3_pr_background.asp).
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
|
||||
<Tabs
|
||||
defaultValue='color'
|
||||
values={[
|
||||
{label: 'Color', value: 'color' },
|
||||
{label: 'Image', value: 'image' },
|
||||
]}
|
||||
>
|
||||
<TabItem value="color">
|
||||
|
||||
```jsx live
|
||||
function example() {
|
||||
const canvas = useRef(null);
|
||||
useEffect(() => {
|
||||
const cfg = {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: [
|
||||
'Red',
|
||||
'Blue',
|
||||
'Yellow'
|
||||
],
|
||||
datasets: [{
|
||||
label: 'My First Dataset',
|
||||
data: [300, 50, 100],
|
||||
backgroundColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(255, 205, 86)'
|
||||
],
|
||||
hoverOffset: 4
|
||||
}]
|
||||
},
|
||||
plugins: [{
|
||||
id: 'custom_canvas_background_color',
|
||||
beforeDraw: (chart) => {
|
||||
const ctx = chart.canvas.getContext('2d');
|
||||
ctx.save();
|
||||
ctx.globalCompositeOperation = 'destination-over';
|
||||
ctx.fillStyle = 'lightGreen';
|
||||
ctx.fillRect(0, 0, chart.canvas.width, chart.canvas.height);
|
||||
ctx.restore();
|
||||
}
|
||||
}]
|
||||
};
|
||||
const chart = new Chart(canvas.current.getContext('2d'), cfg);
|
||||
return () => chart.destroy();
|
||||
});
|
||||
return <div className="chartjs-wrapper"><canvas ref={canvas} className="chartjs"></canvas></div>;
|
||||
}
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="image">
|
||||
|
||||
```jsx live
|
||||
function example() {
|
||||
const canvas = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const image = new Image();
|
||||
image.src = "https://www.chartjs.org/img/chartjs-logo.svg";
|
||||
|
||||
const cfg = {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: [
|
||||
'Red',
|
||||
'Blue',
|
||||
'Yellow'
|
||||
],
|
||||
datasets: [{
|
||||
label: 'My First Dataset',
|
||||
data: [300, 50, 100],
|
||||
backgroundColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(255, 205, 86)'
|
||||
],
|
||||
hoverOffset: 4
|
||||
}]
|
||||
},
|
||||
plugins: [{
|
||||
id: 'custom_canvas_background_image',
|
||||
beforeDraw: (chart) => {
|
||||
if (image.complete) {
|
||||
const ctx = chart.canvas.getContext('2d');
|
||||
ctx.drawImage(image, chart.canvas.width/2-image.width/2, chart.canvas.height/2-image.height/2);
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
const chart = new Chart(canvas.current.getContext('2d'), cfg);
|
||||
image.onload = () => chart.draw();
|
||||
|
||||
return () => chart.destroy();
|
||||
});
|
||||
return <div className="chartjs-wrapper"><canvas ref={canvas} className="chartjs"></canvas></div>;
|
||||
}
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
@ -1,47 +0,0 @@
|
||||
---
|
||||
title: Events
|
||||
---
|
||||
|
||||
The following properties define how the chart interacts with events.
|
||||
Namespace: `options`
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| ---- | ---- | ------- | -----------
|
||||
| `events` | `string[]` | `['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']` | The `events` option defines the browser events that the chart should listen to for tooltips and hovering. [more...](#event-option)
|
||||
| `onHover` | `function` | `null` | Called when any of the events fire. Passed the event, an array of active elements (bars, points, etc), and the chart.
|
||||
| `onClick` | `function` | `null` | Called if the event is of type `'mouseup'` or `'click'`. Passed the event, an array of active elements, and the chart.
|
||||
|
||||
## Event Option
|
||||
|
||||
For example, to have the chart only respond to click events, you could do:
|
||||
|
||||
```javascript
|
||||
var chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
// This chart will not respond to mousemove, etc
|
||||
events: ['click']
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Converting Events to Data Values
|
||||
|
||||
A common occurrence is taking an event, such as a click, and finding the data coordinates on the chart where the event occurred. Chart.js provides helpers that make this a straightforward process.
|
||||
|
||||
```javascript
|
||||
const chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
onClick: (e) => {
|
||||
const canvasPosition = Chart.helpers.getRelativePosition(e, chart);
|
||||
|
||||
// Substitute the appropriate scale IDs
|
||||
const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
|
||||
const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
title: Interactions
|
||||
---
|
||||
|
||||
Namespace: `options.interaction`, the global interaction configuration is at `Chart.defaults.interaction`. To configure which events trigger chart interactions, see [events](events.md#events).
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| ---- | ---- | ------- | -----------
|
||||
| `mode` | `string` | `'nearest'` | Sets which elements appear in the interaction. See [Interaction Modes](modes.md#interaction-modes) for details.
|
||||
| `intersect` | `boolean` | `true` | if true, the interaction mode only applies when the mouse position intersects an item on the chart.
|
||||
| `axis` | `string` | `'x'` | Can be set to `'x'`, `'y'`, or `'xy'` to define which directions are used in calculating distances. Defaults to `'x'` for `'index'` mode and `'xy'` in `dataset` and `'nearest'` modes.
|
||||
|
||||
By default, these options apply to both the hover and tooltip interactions. The same options can be set in the `options.hover` namespace, in which case they will only affect the hover interaction. Similarly, the options can be set in the `options.plugins.tooltip` namespace to independently configure the tooltip interactions.
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
title: License
|
||||
---
|
||||
|
||||
Chart.js is <a href="https://github.com/chartjs/Chart.js" target="_blank">open source</a> and available under the <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a>.
|
||||
@ -1,15 +0,0 @@
|
||||
a.anchorjs-link {
|
||||
color: rgba(65, 131, 196, 0.1);
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
transition: color 100ms ease-out;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
a.anchorjs-link:hover {
|
||||
color: rgba(65, 131, 196, 1);
|
||||
}
|
||||
|
||||
sup {
|
||||
font-size: 0.75em !important;
|
||||
}
|
||||
@ -1,99 +0,0 @@
|
||||
// VERSION replaced by deploy script
|
||||
module.exports = {
|
||||
title: 'Chart.js',
|
||||
tagline: 'Open source HTML5 Charts for your website',
|
||||
url: 'https://chartjs.org',
|
||||
baseUrl: '/docs/VERSION/',
|
||||
favicon: 'img/favicon.ico',
|
||||
organizationName: 'chartjs', // Usually your GitHub org/user name.
|
||||
projectName: 'chartjs.github.io', // Usually your repo name.
|
||||
scripts: ['https://www.chartjs.org/dist/VERSION/chart.min.js'],
|
||||
themes: ['@docusaurus/theme-live-codeblock'],
|
||||
onBrokenLinks: 'warn',
|
||||
themeConfig: {
|
||||
image: 'img/logo.png',
|
||||
metadatas: [{name: 'twitter:card', content: 'summary'}],
|
||||
algolia: {
|
||||
apiKey: 'd7ee00a3cbaaf3c33e28ad1c274e7ba6',
|
||||
indexName: 'chartjs',
|
||||
algoliaOptions: {
|
||||
facetFilters: ['version:VERSION'],
|
||||
}
|
||||
},
|
||||
googleAnalytics: {
|
||||
trackingID: 'UA-28909194-3',
|
||||
// Optional fields.
|
||||
anonymizeIP: true, // Should IPs be anonymized?
|
||||
},
|
||||
colorMode: {
|
||||
disableSwitch: true, // Would need to implement for Charts embedded in docs
|
||||
},
|
||||
navbar: {
|
||||
title: 'Chart.js',
|
||||
logo: {
|
||||
alt: 'Chart.js Logo',
|
||||
src: 'img/logo.svg',
|
||||
},
|
||||
},
|
||||
footer: {
|
||||
style: 'dark',
|
||||
links: [
|
||||
{
|
||||
title: 'Other Docs',
|
||||
items: [
|
||||
{
|
||||
label: 'Samples',
|
||||
href: 'https://www.chartjs.org/samples/VERSION/',
|
||||
},
|
||||
{
|
||||
label: 'v2 Docs',
|
||||
href: 'https://www.chartjs.org/docs/2.9.4/',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Community',
|
||||
items: [
|
||||
{
|
||||
label: 'Slack',
|
||||
href: 'https://chartjs-slack.herokuapp.com/',
|
||||
},
|
||||
{
|
||||
label: 'Stack Overflow',
|
||||
href: 'https://stackoverflow.com/questions/tagged/chart.js',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Developers',
|
||||
items: [
|
||||
{
|
||||
label: 'GitHub',
|
||||
href: 'https://github.com/chartjs/Chart.js',
|
||||
},
|
||||
{
|
||||
label: 'Contributing',
|
||||
to: 'developers/contributing',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
copyright: `Copyright © 2014-${new Date().getFullYear()} Chart.js contributors.`,
|
||||
},
|
||||
},
|
||||
presets: [
|
||||
[
|
||||
'@docusaurus/preset-classic',
|
||||
{
|
||||
docs: {
|
||||
sidebarPath: require.resolve('./sidebars.js'),
|
||||
routeBasePath: '/',
|
||||
editUrl: 'https://github.com/chartjs/Chart.js/edit/master/docs/',
|
||||
},
|
||||
theme: {
|
||||
customCss: require.resolve('./src/css/custom.css'),
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Accessibility
|
||||
---
|
||||
# Accessibility
|
||||
|
||||
Chart.js charts are rendered on user provided `canvas` elements. Thus, it is up to the user to create the `canvas` element in a way that is accessible. The `canvas` element has support in all browsers and will render on screen but the `canvas` content will not be accessible to screen readers.
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Colors
|
||||
---
|
||||
# Colors
|
||||
|
||||
When supplying colors to Chart options, you can use a number of formats. You can specify the color as a string in hexadecimal, RGB, or HSL notations. If a color is needed, but not specified, Chart.js will use the global default color. There are 3 color options, stored at `Chart.defaults`, to set:
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Data structures
|
||||
---
|
||||
# Data structures
|
||||
|
||||
The `data` property of a dataset can be passed in various formats. By default, that `data` is parsed using the associated chart type and scales.
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Fonts
|
||||
---
|
||||
# Fonts
|
||||
|
||||
There are special global settings that can change all of the fonts on the chart. These options are in `Chart.defaults.font`. The global font settings only apply when more specific options are not included in the config.
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Options
|
||||
---
|
||||
# Options
|
||||
|
||||
## Option resolution
|
||||
|
||||
@ -70,7 +68,11 @@ A plugin can provide `additionalOptionScopes` array of paths to additionally loo
|
||||
Scriptable options also accept a function which is called for each of the underlying data values and that takes the unique argument `context` representing contextual information (see [option context](options.md#option-context)).
|
||||
A resolver is passed as second parameter, that can be used to access other options in the same context.
|
||||
|
||||
> **Note:** the `context` argument should be validated in the scriptable function, because the function can be invoked in different contexts. The `type` field is a good candidate for this validation.
|
||||
:::tip
|
||||
|
||||
The `context` argument should be validated in the scriptable function, because the function can be invoked in different contexts. The `type` field is a good candidate for this validation.
|
||||
|
||||
:::
|
||||
|
||||
Example:
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
---
|
||||
title: Padding
|
||||
---
|
||||
# Padding
|
||||
|
||||
Padding values in Chart options can be supplied in couple of different formats.
|
||||
|
||||
### Number
|
||||
## Number
|
||||
|
||||
If this value is a number, it is applied to all sides (left, top, right, bottom).
|
||||
|
||||
@ -22,7 +20,7 @@ let chart = new Chart(ctx, {
|
||||
});
|
||||
```
|
||||
|
||||
### {top, left, bottom, right} object
|
||||
## {top, left, bottom, right} object
|
||||
|
||||
If this value is an object, the `left` property defines the left padding. Similarly the `right`, `top` and `bottom` properties can also be specified.
|
||||
Omitted properties default to `0`.
|
||||
@ -43,7 +41,7 @@ let chart = new Chart(ctx, {
|
||||
});
|
||||
```
|
||||
|
||||
### {x, y} object
|
||||
## {x, y} object
|
||||
|
||||
This is a shorthand for defining left/right and top/bottom to same values.
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Performance
|
||||
---
|
||||
# Performance
|
||||
|
||||
Chart.js charts are rendered on `canvas` elements, which makes rendering quite fast. For large datasets or performance sensitive applications, you may wish to consider the tips below.
|
||||
|
||||
@ -8,7 +6,7 @@ Chart.js charts are rendered on `canvas` elements, which makes rendering quite f
|
||||
|
||||
### Parsing
|
||||
|
||||
Provide prepared data in the internal format accepted by the dataset and scales and set `parsing: false`. See [Data structures](data-structures.md) for more information.
|
||||
Provide prepared data in the internal format accepted by the dataset and scales, and set `parsing: false`. See [Data structures](data-structures.md) for more information.
|
||||
|
||||
### Data normalization
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Getting Started
|
||||
---
|
||||
# Getting Started
|
||||
|
||||
Let's get started using Chart.js!
|
||||
|
||||
@ -20,34 +18,39 @@ Now that we have a canvas we can use, we need to include Chart.js in our page.
|
||||
|
||||
Now, we can create a chart. We add a script to our page:
|
||||
|
||||
import { useEffect } from 'react';
|
||||
```js chart-editor
|
||||
// <block:setup:1>
|
||||
const labels = [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
];
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgb(255, 99, 132)',
|
||||
borderColor: 'rgb(255, 99, 132)',
|
||||
data: [0, 10, 5, 2, 20, 30, 45],
|
||||
}]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
```jsx live
|
||||
function example() {
|
||||
useEffect(() => {
|
||||
var ctx = document.getElementById('myChart').getContext('2d');
|
||||
var chart = new Chart(ctx, {
|
||||
// The type of chart we want to create
|
||||
type: 'line',
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'line',
|
||||
data,
|
||||
options: {}
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
// The data for our dataset
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgb(255, 99, 132)',
|
||||
borderColor: 'rgb(255, 99, 132)',
|
||||
data: [0, 10, 5, 2, 20, 30, 45]
|
||||
}]
|
||||
},
|
||||
|
||||
// Configuration options go here
|
||||
options: {}
|
||||
});
|
||||
return () => chart.destroy();
|
||||
});
|
||||
return <div className="chartjs-wrapper"><canvas id="myChart" className="chartjs"></canvas></div>;
|
||||
}
|
||||
module.exports = {
|
||||
actions: [],
|
||||
config: 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.
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Integration
|
||||
---
|
||||
# Integration
|
||||
|
||||
Chart.js can be integrated with plain JavaScript or with different module loaders. The examples below show how to load Chart.js in different systems.
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: Usage
|
||||
---
|
||||
# Usage
|
||||
|
||||
Chart.js can be used with ES6 modules, plain JavaScript, and module loaders.
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: 3.x Migration Guide
|
||||
---
|
||||
# 3.x Migration Guide
|
||||
|
||||
Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released in April 2016. In the years since then, as Chart.js has grown in popularity and feature set, we've learned some lessons about how to better create a charting library. In order to improve performance, offer new features, and improve maintainability, it was necessary to break backwards compatibility, but we aimed to do so only when worth the benefit. Some major highlights of v3 include:
|
||||
|
||||
@ -8,7 +6,7 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released
|
||||
* Additional configurability and scriptable options with better defaults
|
||||
* Completely rewritten animation system
|
||||
* Rewritten filler plugin with numerous bug fixes
|
||||
* Documentation migrated from GitBook to Docusaurus
|
||||
* Documentation migrated from GitBook to Vuepress
|
||||
* API documentation generated and verified by TypeDoc
|
||||
* No more CSS injection
|
||||
* Tons of bug fixes
|
||||
@ -1,7 +1,4 @@
|
||||
---
|
||||
title: Chart.js
|
||||
slug: /
|
||||
---
|
||||
# Chart.js
|
||||
|
||||
[](https://chartjs-slack.herokuapp.com/)
|
||||
|
||||
@ -65,3 +62,5 @@ For support using Chart.js, please post questions with the [`chartjs` tag on Sta
|
||||
## License
|
||||
|
||||
Chart.js is available under the [MIT license](https://opensource.org/licenses/MIT).
|
||||
|
||||
Documentation is copyright © 2014-2021 Chart.js contributors.
|
||||
14225
docs/package-lock.json
generated
14225
docs/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,32 +0,0 @@
|
||||
{
|
||||
"name": "docs",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "docusaurus start",
|
||||
"build": "docusaurus build --out-dir ../dist/docs",
|
||||
"swizzle": "docusaurus swizzle",
|
||||
"deploy": "docusaurus deploy"
|
||||
},
|
||||
"dependencies": {
|
||||
"@docusaurus/core": "^2.0.0-alpha.70",
|
||||
"@docusaurus/plugin-google-analytics": "^2.0.0-alpha.70",
|
||||
"@docusaurus/preset-classic": "^2.0.0-alpha.70",
|
||||
"@docusaurus/theme-live-codeblock": "^2.0.0-alpha.70",
|
||||
"classnames": "^2.2.6",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
3
docs/scripts/register.js
Normal file
3
docs/scripts/register.js
Normal file
@ -0,0 +1,3 @@
|
||||
import {Chart, registerables} from '../../dist/chart.esm';
|
||||
|
||||
Chart.register(...registerables);
|
||||
125
docs/scripts/utils.js
Normal file
125
docs/scripts/utils.js
Normal file
@ -0,0 +1,125 @@
|
||||
import {valueOrDefault} from '../../dist/helpers.esm';
|
||||
|
||||
// Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
|
||||
var _seed = Date.now();
|
||||
|
||||
export function srand(seed) {
|
||||
_seed = seed;
|
||||
}
|
||||
|
||||
export function rand(min, max) {
|
||||
min = valueOrDefault(min, 0);
|
||||
max = valueOrDefault(max, 0);
|
||||
_seed = (_seed * 9301 + 49297) % 233280;
|
||||
return min + (_seed / 233280) * (max - min);
|
||||
}
|
||||
|
||||
export function numbers(config) {
|
||||
var cfg = config || {};
|
||||
var min = valueOrDefault(cfg.min, 0);
|
||||
var max = valueOrDefault(cfg.max, 100);
|
||||
var from = valueOrDefault(cfg.from, []);
|
||||
var count = valueOrDefault(cfg.count, 8);
|
||||
var decimals = valueOrDefault(cfg.decimals, 8);
|
||||
var continuity = valueOrDefault(cfg.continuity, 1);
|
||||
var dfactor = Math.pow(10, decimals) || 0;
|
||||
var data = [];
|
||||
var i, value;
|
||||
|
||||
for (i = 0; i < count; ++i) {
|
||||
value = (from[i] || 0) + this.rand(min, max);
|
||||
if (this.rand() <= continuity) {
|
||||
data.push(Math.round(dfactor * value) / dfactor);
|
||||
} else {
|
||||
data.push(null);
|
||||
}
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
export function points(config) {
|
||||
const xs = this.numbers(config);
|
||||
const ys = this.numbers(config);
|
||||
return xs.map((x, i) => ({x, y: ys[i]}));
|
||||
}
|
||||
|
||||
export function labels(config) {
|
||||
var cfg = config || {};
|
||||
var min = cfg.min || 0;
|
||||
var max = cfg.max || 100;
|
||||
var count = cfg.count || 8;
|
||||
var step = (max - min) / count;
|
||||
var decimals = cfg.decimals || 8;
|
||||
var dfactor = Math.pow(10, decimals) || 0;
|
||||
var prefix = cfg.prefix || '';
|
||||
var values = [];
|
||||
var i;
|
||||
|
||||
for (i = min; i < max; i += step) {
|
||||
values.push(prefix + Math.round(dfactor * i) / dfactor);
|
||||
}
|
||||
|
||||
return values;
|
||||
}
|
||||
|
||||
const MONTHS = [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
'August',
|
||||
'September',
|
||||
'October',
|
||||
'November',
|
||||
'December'
|
||||
];
|
||||
|
||||
export function months(config) {
|
||||
var cfg = config || {};
|
||||
var count = cfg.count || 12;
|
||||
var section = cfg.section;
|
||||
var values = [];
|
||||
var i, value;
|
||||
|
||||
for (i = 0; i < count; ++i) {
|
||||
value = MONTHS[Math.ceil(i) % 12];
|
||||
values.push(value.substring(0, section));
|
||||
}
|
||||
|
||||
return values;
|
||||
}
|
||||
|
||||
const COLORS = [
|
||||
'#4dc9f6',
|
||||
'#f67019',
|
||||
'#f53794',
|
||||
'#537bc4',
|
||||
'#acc236',
|
||||
'#166a8f',
|
||||
'#00a950',
|
||||
'#58595b',
|
||||
'#8549ba'
|
||||
];
|
||||
|
||||
export function color(index) {
|
||||
return COLORS[index % COLORS.length];
|
||||
}
|
||||
|
||||
export function transparentize(color, opacity) {
|
||||
var alpha = opacity === undefined ? 0.5 : 1 - opacity;
|
||||
return Color(color).alpha(alpha).rgbString();
|
||||
}
|
||||
|
||||
export const chartColors = {
|
||||
red: 'rgb(255, 99, 132)',
|
||||
orange: 'rgb(255, 159, 64)',
|
||||
yellow: 'rgb(255, 205, 86)',
|
||||
green: 'rgb(75, 192, 192)',
|
||||
blue: 'rgb(54, 162, 235)',
|
||||
purple: 'rgb(153, 102, 255)',
|
||||
grey: 'rgb(201, 203, 207)'
|
||||
};
|
||||
@ -1,94 +0,0 @@
|
||||
const pkg = require('../package.json');
|
||||
const docsVersion = pkg.version.indexOf('-') > -1 ? 'next' : 'latest';
|
||||
|
||||
module.exports = {
|
||||
someSidebar: {
|
||||
Introduction: ['index'],
|
||||
'Getting Started': [
|
||||
'getting-started/index',
|
||||
'getting-started/installation',
|
||||
'getting-started/integration',
|
||||
'getting-started/usage',
|
||||
'getting-started/v3-migration'
|
||||
],
|
||||
General: [
|
||||
'general/data-structures',
|
||||
'general/accessibility',
|
||||
'general/options',
|
||||
'general/colors',
|
||||
'general/fonts',
|
||||
'general/padding',
|
||||
'general/performance'
|
||||
],
|
||||
Configuration: [
|
||||
'configuration/index',
|
||||
'configuration/responsive',
|
||||
'configuration/device-pixel-ratio',
|
||||
'configuration/locale',
|
||||
{Interactions: ['configuration/interactions/index', 'configuration/interactions/events', 'configuration/interactions/modes']},
|
||||
'configuration/canvas-background',
|
||||
'configuration/animations',
|
||||
'configuration/layout',
|
||||
'configuration/legend',
|
||||
'configuration/title',
|
||||
'configuration/tooltip',
|
||||
'configuration/elements',
|
||||
'configuration/decimation'
|
||||
],
|
||||
'Chart Types': [
|
||||
'charts/line',
|
||||
'charts/bar',
|
||||
'charts/radar',
|
||||
'charts/doughnut',
|
||||
'charts/polar',
|
||||
'charts/bubble',
|
||||
'charts/scatter',
|
||||
'charts/area',
|
||||
'charts/mixed'
|
||||
],
|
||||
Axes: [
|
||||
'axes/index',
|
||||
{
|
||||
Cartesian: [
|
||||
'axes/cartesian/index',
|
||||
'axes/cartesian/category',
|
||||
'axes/cartesian/linear',
|
||||
'axes/cartesian/logarithmic',
|
||||
'axes/cartesian/time',
|
||||
'axes/cartesian/timeseries'
|
||||
],
|
||||
},
|
||||
{
|
||||
Radial: [
|
||||
'axes/radial/index',
|
||||
'axes/radial/linear'
|
||||
],
|
||||
},
|
||||
'axes/labelling',
|
||||
'axes/styling'
|
||||
],
|
||||
Developers: [
|
||||
'developers/index',
|
||||
'developers/api',
|
||||
{
|
||||
type: 'link',
|
||||
label: 'TypeDoc',
|
||||
href: 'https://chartjs.org/docs/' + docsVersion + '/typedoc/'
|
||||
},
|
||||
'developers/updates',
|
||||
'developers/plugins',
|
||||
'developers/charts',
|
||||
'developers/axes',
|
||||
'developers/contributing',
|
||||
'developers/publishing'
|
||||
],
|
||||
'Additional Notes': [
|
||||
{
|
||||
type: 'link',
|
||||
label: 'Extensions',
|
||||
href: 'https://github.com/chartjs/awesome'
|
||||
},
|
||||
'notes/license'
|
||||
]
|
||||
}
|
||||
};
|
||||
@ -1,39 +0,0 @@
|
||||
/* stylelint-disable docusaurus/copyright-header */
|
||||
/**
|
||||
* Any CSS included here will be global. The classic template
|
||||
* bundles Infima by default. Infima is a CSS framework designed to
|
||||
* work well for content-centric websites.
|
||||
*/
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
:root {
|
||||
--ifm-color-primary: #25c2a0;
|
||||
--ifm-color-primary-dark: rgb(33, 175, 144);
|
||||
--ifm-color-primary-darker: rgb(31, 165, 136);
|
||||
--ifm-color-primary-darkest: rgb(26, 136, 112);
|
||||
--ifm-color-primary-light: rgb(70, 203, 174);
|
||||
--ifm-color-primary-lighter: rgb(102, 212, 189);
|
||||
--ifm-color-primary-lightest: rgb(146, 224, 208);
|
||||
--ifm-code-font-size: 95%;
|
||||
--ifm-code-color: #2472C8;
|
||||
--ifm-code-background: transparent;
|
||||
--ifm-code-padding-vertical: 1px;
|
||||
--ifm-code-padding-horizontal: 3px;
|
||||
}
|
||||
|
||||
.docusaurus-highlight-code-line {
|
||||
background-color: rgb(72, 77, 91);
|
||||
display: block;
|
||||
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
||||
padding: 0 var(--ifm-pre-padding);
|
||||
}
|
||||
|
||||
.chartjs-small-chart {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.chartjs-center {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
/* stylelint-disable docusaurus/copyright-header */
|
||||
/**
|
||||
* CSS files with the .module.css suffix will be treated as CSS modules
|
||||
* and scoped locally.
|
||||
*/
|
||||
|
||||
.heroBanner {
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 966px) {
|
||||
.heroBanner {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.featureImage {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
12517
package-lock.json
generated
12517
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
14
package.json
14
package.json
@ -39,9 +39,10 @@
|
||||
"build": "rollup -c",
|
||||
"dev": "karma start --auto-watch --no-single-run --browsers chrome --grep",
|
||||
"dev:ff": "karma start --auto-watch --no-single-run --browsers firefox --grep",
|
||||
"docs": "cd docs && npm install && npm run build",
|
||||
"docs": "npm run build && vuepress build docs --no-cache",
|
||||
"docs:dev": "npm run build && vuepress dev docs --no-cache",
|
||||
"lint-js": "eslint \"samples/**/*.html\" \"samples/**/*.js\" \"src/**/*.js\" \"test/**/*.js\"",
|
||||
"lint-md": "markdownlint-cli2 \"**/*.md\" \"**/*.mdx\" \"#**/node_modules\"",
|
||||
"lint-md": "eslint \"**/*.md\"",
|
||||
"lint-tsc": "tsc",
|
||||
"lint-types": "eslint \"types/**/*.ts\" && tsc -p types/tests/",
|
||||
"lint": "concurrently \"npm:lint-*\"",
|
||||
@ -56,6 +57,7 @@
|
||||
"@rollup/plugin-node-resolve": "^11.2.0",
|
||||
"@typescript-eslint/eslint-plugin": "^4.18.0",
|
||||
"@typescript-eslint/parser": "^4.18.0",
|
||||
"@vuepress/plugin-google-analytics": "1.8.2",
|
||||
"chartjs-adapter-moment": "^0.1.2",
|
||||
"chartjs-test-utils": "^0.2.2",
|
||||
"concurrently": "^6.0.0",
|
||||
@ -65,6 +67,7 @@
|
||||
"eslint-config-chartjs": "^0.3.0",
|
||||
"eslint-plugin-es": "^4.1.0",
|
||||
"eslint-plugin-html": "^6.1.2",
|
||||
"eslint-plugin-markdown": "^2.0.0",
|
||||
"glob": "^7.1.6",
|
||||
"jasmine": "^3.6.4",
|
||||
"jasmine-core": "^3.6.0",
|
||||
@ -78,7 +81,7 @@
|
||||
"karma-rollup-preprocessor": "^7.0.7",
|
||||
"karma-safari-private-launcher": "^1.0.0",
|
||||
"karma-spec-reporter": "0.0.32",
|
||||
"markdownlint-cli2": "0.0.14",
|
||||
"markdown-it-include": "^2.0.0",
|
||||
"moment": "^2.29.1",
|
||||
"pixelmatch": "^5.2.1",
|
||||
"rollup": "^2.41.4",
|
||||
@ -88,6 +91,11 @@
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"typedoc": "^0.20.32",
|
||||
"typescript": "^4.1.5",
|
||||
"vue-tabs-component": "^1.5.0",
|
||||
"vuepress": "^1.8.2",
|
||||
"vuepress-plugin-redirect": "^1.2.5",
|
||||
"vuepress-plugin-tabs": "^0.3.0",
|
||||
"vuepress-theme-chartjs": "^0.2.0",
|
||||
"yargs": "^16.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@ function update_config {
|
||||
else
|
||||
tag=next
|
||||
fi
|
||||
sed -i -e "s/VERSION/$tag/g" "docs/docusaurus.config.js"
|
||||
sed -i -e "s/VERSION/$tag/g" "docs/.vuepress/config.js"
|
||||
}
|
||||
|
||||
update_config
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user