Chartjs With React

Some sample charts with fake random data that can additionally be downloaded using the react hook useRef

1
npm i react-chartjs-2 chart.js faker

BarChart

BarChart

BarChart data sample 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const testData = {
    labels: ['DEC', 'JAN', 'FEB'],
    datasets: [
        {
            label: 'Closed<=30days',
            data: ["25", "53", "58"],
            backgroundColor: "blue",
        },
        {
            label: 'Closed>30days',
            data: ["18", "30", "23"],
            backgroundColor: "orange",
        },
        {
            label: 'No action required',
            data: ["48", "78", "121"],
            backgroundColor: "grey",
        },
    ],
};
Working code example barchart

components/Charts/BarChart.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import React, { useRef, useCallback } from "react";
import { faker } from '@faker-js/faker';
import { Bar } from 'react-chartjs-2';
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend,
} from 'chart.js';

ChartJS.register(
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend
);

const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

export const data = {
    labels,
    datasets: [
        {
            label: 'Dataset 1',
            data: labels.map(() => faker.random.numeric()),
            backgroundColor: faker.commerce.color(),
        },
        {
            label: 'Dataset 2',
            data: labels.map(() => faker.random.numeric()),
            backgroundColor: faker.commerce.color(),
        },
    ],
};

export const options = {
    responsive: true,
};

const BarChart = () => {
    let ref = useRef(null);

    const download = useCallback(() => {
        const link = document.createElement("a");
        link.download = "BarChart.png";
        link.href = ref.current.toBase64Image();
        link.click();
    }, []);

    return <div>
        <button type="button" onClick={download}>Download Bar Chart</button>
        <Bar height={80} ref={ref} options={options} data={data} />
    </div>
}

export default BarChart

StackedBarChart

stacked-barchart

StackedBarChart data sample 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export const data = {
  labels: ['DEC', 'JAN', 'FEB'],
  datasets: [
    {
      label: 'Dataset 1',
      data: ["25", "53", "58"],
      backgroundColor: 'blue',
    },
    {
      label: 'Dataset 2',
      data: ["18", "30", "23"],
      backgroundColor: 'orange',
    },
    {
      label: 'Dataset 3',
      data: ["48", "78", "121"],
      backgroundColor: 'grey',
    },
  ],
};
Working code example stacked barchart

components/Charts/StackedBarChart.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import React, { useRef, useCallback } from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';
import { faker } from '@faker-js/faker';

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

export const options = {
  plugins: {
    title: {
      display: true,
      text: 'Stacked Bar Chart',
    },
  },
  responsive: true,
  scales: {
    x: {
      stacked: true,
    },
    y: {
      stacked: true,
    },
  },
};

const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

export const data = {
  labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: labels.map(() => faker.random.numeric()),
      backgroundColor: 'rgb(255, 99, 132)',
    },
    {
      label: 'Dataset 2',
      data: labels.map(() => faker.random.numeric()),
      backgroundColor: 'rgb(75, 192, 192)',
    },
    {
      label: 'Dataset 3',
      data: labels.map(() => faker.random.numeric()),
      backgroundColor: 'rgb(53, 162, 235)',
    },
  ],
};

const StackedBarChart = () => {
  let ref = useRef(null);

  const download = useCallback(() => {
    const link = document.createElement('a');
    link.download = 'StackedBarChart.png';
    link.href = ref.current.toBase64Image();
    link.click();
  }, []);

  return (
    <div>
      <button type="button" onClick={download}>
        Download Stacked Bar Chart
      </button>
      <Bar ref={ref} options={options} data={data} />;
    </div>
  );
};

export default StackedBarChart;

PieChart

components/Charts/PieChart.js 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import React, { useRef, useCallback } from "react";
import { faker } from '@faker-js/faker';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
import { Pie } from 'react-chartjs-2';

ChartJS.register(ArcElement, Tooltip, Legend);

const labels = ['January', 'February', 'March', 'April', 'May', 'June'];

export const data = {
    labels,
    datasets: [
        {
            label: '# of Votes',
            data: labels.map(() => faker.random.numeric()),
            backgroundColor: labels.map(() => faker.commerce.color()),
            borderColor: labels.map(() => faker.commerce.color()),
            borderWidth: 1,
        },
    ],
};

const PieChart = () => {
    let ref = useRef(null);

    const download = useCallback(() => {
        const link = document.createElement("a");
        link.download = "PieChart.png";
        link.href = ref.current.toBase64Image();
        link.click();
    }, []);

    return <div>
        <button type="button" onClick={download}>Download Pie Chart</button>
        <div style={{ height: "690px", width: "690px", margin: "auto" }}>
            <Pie ref={ref} data={data} />
        </div>
    </div>
}

export default PieChart

DoughnutChart

components/Charts/DoughnutChart.js 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import React, { useRef, useCallback } from "react";
import { faker } from '@faker-js/faker';
import { Doughnut } from "react-chartjs-2";
import Chart from "chart.js/auto";
import { CategoryScale } from "chart.js";

Chart.register(CategoryScale);

const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

const data = {
    labels,
    datasets: [
        {
            lable: "My dataset",
            data: labels.map(() => faker.random.numeric()),
            backgroundColor: labels.map(() => faker.commerce.color()),
            hoverOffset: 4
        }
    ]
}

const DoughnutChart = () => {
    let ref = useRef(null);

    const download = useCallback(() => {
        const link = document.createElement("a");
        link.download = "DoughnutChart.png";
        link.href = ref.current.toBase64Image();
        link.click();
    }, []);

    return <div>
        <button type="button" onClick={download}>Download Doughnut Chart</button>
        <div style={{ height: "690px", width: "690px", margin: "auto" }}>
            <Doughnut ref={ref} data={data}></Doughnut>
        </div>
    </div>
}

export default DoughnutChart;

References