testing for using chart js
Use Chart.js in React.
Introduce:
- Chart.js: https://github.com/chartjs/Chart.js
- react-chartjs-2: https://github.com/reactchartjs/react-chartjs-2
- remark-mdx-chartjs: https://github.com/pangelani/remark-mdx-chartjs
Chart.js
Documentation:
https://www.chartjs.org/docs/latest/
We should use the Tree-shaking feature for react-chartjs-2.
A very helpful guide about Chart.js:
https://www.chartjs.org/docs/latest/getting-started/usage.html
react-chartjs-2
Documentation:
https://react-chartjs-2.js.org/
we could code like this:
<Bar
data={{
labels: ["January", "February", "March"],
datasets: [
{
label: "Dataset 1",
data: [10, 20, 30],
backgroundColor: "rgba(255, 99, 132, 0.5)",
},
{
label: "Dataset 2",
data: [20, 30, 40],
backgroundColor: "rgba(53, 162, 235, 0.5)",
},
],
}}
/>and result:
And it is tree-shakable.
https://react-chartjs-2.js.org/docs/migration-to-v4/#tree-shaking
remark-mdx-chartjs
https://github.com/pangelani/remark-mdx-chartjs
With this, could write chart in markdown.
```chartjs
type: bar
data:
labels: ["January", "February", "March", "April", "May", "June", "July"]
datasets:
- label: "Dataset 1"
data: [0,2,6,1,7,13,2]
backgroundColor: "rgba(255, 99, 132, 0.5)"
- label: "Dataset 2"
data: [4,2,11,8,6,1,4]
backgroundColor: "rgba(53, 162, 235, 0.5)"
```type: bar
data:
labels: ["January", "February", "March", "April", "May", "June", "July"]
datasets:
- label: "Dataset 1"
data: [0,2,6,1,7,13,2]
backgroundColor: "rgba(255, 99, 132, 0.5)"
- label: "Dataset 2"
data: [4,2,11,8,6,1,4]
backgroundColor: "rgba(53, 162, 235, 0.5)"But it's not written in TypeScript, and raising a TS7016 error. So raise an issue, and wait for the type definition.