Skip to content

Commit c4cf7b2

Browse files
etimbergetimberg
authored
Document the different parts of cartesian and radial scales with examples (#8636)
1 parent 1a2cc27 commit c4cf7b2

File tree

4 files changed

+213
-8
lines changed

4 files changed

+213
-8
lines changed

‎docs/docs/axes/cartesian/index.mdx‎

Lines changed: 100 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
title: Cartesian Axes
33
---
4-
54
import CommonAll from '../_common.md'
65
import CommonCartesian from './_common.md'
76
import CommonTicks from './_common_ticks.md'
@@ -17,6 +16,106 @@ Axes that follow a cartesian grid are known as 'Cartesian Axes'. Cartesian axes
1716
* [time](./time)
1817
* [timeseries](./timeseries)
1918

19+
## Visual Components
20+
21+
A cartesian axis is composed of visual components that can be individually configured. These components are:
22+
23+
* [border](#border)
24+
* [grid lines](#grid-lines)
25+
* [tick](#ticks-and-tick-marks)
26+
* [tick mark](#ticks-and-tick-marks)
27+
* [title](#title)
28+
29+
export const CartesianChartExample = ({id, xScaleConfig}) => {
30+
useEffect(() => {
31+
const cfg = {
32+
type: 'line',
33+
data: {
34+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
35+
datasets: [{
36+
label: 'Dataset 1',
37+
backgroundColor: 'rgba(54, 162, 235, 0.5)',
38+
borderColor: 'rgb(54, 162, 235)',
39+
borderWidth: 1,
40+
data: [
41+
10, 20, 30, 40, 50, 0, 5
42+
]
43+
}]
44+
},
45+
options: {
46+
scales: {
47+
x: xScaleConfig,
48+
}
49+
}
50+
};
51+
const chart = new Chart(document.getElementById(id).getContext('2d'), cfg);
52+
return () => chart.destroy();
53+
});
54+
return <div className="chartjs-wrapper"><canvas id={id} className="chartjs"></canvas></div>;
55+
}
56+
57+
### Border
58+
59+
The axis border is drawn at the edge of the axis, beside the chart area. In the image below, it is drawn in red.
60+
61+
<CartesianChartExample
62+
id="chart-border"
63+
xScaleConfig={{
64+
grid: {
65+
borderColor: 'red',
66+
}
67+
}}
68+
/>
69+
70+
### Grid lines
71+
72+
The grid lines for an axis are drawn on the chart area. In the image below, they are red.
73+
74+
<CartesianChartExample
75+
id="chart-grid"
76+
xScaleConfig={{
77+
grid: {
78+
color: 'red',
79+
borderColor: 'grey',
80+
tickColor: 'grey'
81+
}
82+
}}
83+
/>
84+
85+
### Ticks and Tick Marks
86+
87+
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.
88+
In this example, the tick mark is drawn in red while the tick label is drawn in blue.
89+
90+
<CartesianChartExample
91+
id="chart-ticks"
92+
xScaleConfig={{
93+
grid: {
94+
//color: 'red',
95+
//borderColor: 'grey',
96+
tickColor: 'red'
97+
},
98+
ticks: {
99+
color: 'blue',
100+
}
101+
}}
102+
/>
103+
104+
### Title
105+
106+
The title component of the axis is used to label the data. In the example below, it is shown in red.
107+
108+
<CartesianChartExample
109+
id="chart-title"
110+
xScaleConfig={{
111+
title: {
112+
color: 'red',
113+
display: true,
114+
text: 'Month'
115+
}
116+
}}
117+
/>
118+
20119
## Common Configuration
21120

22121
<CommonCartesian />

‎docs/docs/axes/radial/index.md‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎docs/docs/axes/radial/index.mdx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
title: Radial Axes
3+
---
4+
import { useEffect } from 'react';
5+
6+
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.
7+
8+
* [radialLinear](./linear.mdx)
9+
10+
## Visual Components
11+
12+
A radial axis is composed of visual components that can be individually configured. These components are:
13+
14+
* [angle lines](#angle-lines)
15+
* [grid lines](#grid-lines)
16+
* [point labels](#point-labels)
17+
* [ticks](#ticks)
18+
19+
export const RadialChartExample = ({id, rScaleConfig}) => {
20+
useEffect(() => {
21+
const cfg = {
22+
type: 'radar',
23+
data: {
24+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
25+
datasets: [{
26+
label: 'Dataset 1',
27+
backgroundColor: 'rgba(54, 162, 235, 0.5)',
28+
borderColor: 'rgb(54, 162, 235)',
29+
borderWidth: 1,
30+
data: [
31+
10, 20, 30, 40, 50, 0, 5
32+
]
33+
}]
34+
},
35+
options: {
36+
scales: {
37+
r: rScaleConfig,
38+
}
39+
}
40+
};
41+
const chart = new Chart(document.getElementById(id).getContext('2d'), cfg);
42+
return () => chart.destroy();
43+
});
44+
return (
45+
<div className="chartjs-center">
46+
<div className="chartjs-wrapper chartjs-small-chart">
47+
<canvas id={id} className="chartjs"></canvas>
48+
</div>
49+
</div>
50+
);
51+
}
52+
53+
### Angle Lines
54+
55+
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.
56+
57+
<RadialChartExample
58+
id="chart-angle"
59+
rScaleConfig={{
60+
angleLines: {
61+
color: 'red'
62+
}
63+
}}
64+
/>
65+
66+
### Grid Lines
67+
68+
The grid lines for an axis are drawn on the chart area. In the example below, they are red.
69+
70+
<RadialChartExample
71+
id="chart-grid"
72+
rScaleConfig={{
73+
grid: {
74+
color: 'red'
75+
}
76+
}}
77+
/>
78+
79+
### Point Labels
80+
81+
The point labels indicate the value for each angle line. In the example below, they are red.
82+
83+
<RadialChartExample
84+
id="chart-point-labels"
85+
rScaleConfig={{
86+
pointLabels: {
87+
color: 'red'
88+
}
89+
}}
90+
/>
91+
92+
### Ticks
93+
94+
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.
95+
96+
<RadialChartExample
97+
id="chart-ticks"
98+
rScaleConfig={{
99+
ticks: {
100+
color: 'red'
101+
}
102+
}}
103+
/>

‎docs/src/css/custom.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,13 @@
2727
margin: 0 calc(-1 * var(--ifm-pre-padding));
2828
padding: 0 var(--ifm-pre-padding);
2929
}
30+
31+
.chartjs-small-chart {
32+
width: 400px;
33+
}
34+
35+
.chartjs-center {
36+
display: flex;
37+
flex-direction: row;
38+
justify-content: center;
39+
}

0 commit comments

Comments
 (0)