Skip to content

Latest commit

 

History

History
116 lines (89 loc) · 2.23 KB

using-chart-js.mdx

File metadata and controls

116 lines (89 loc) · 2.23 KB
title
About Chart.js

testing for using chart js

Use Chart.js in React.

Introduce:

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:

<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 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.