how can I render multiple charts in chartjs?

Question

These are the data that I have to render using chartjs in react. I made a custom component for rednering the charts, It's working properly for single line charts can't just render multiline charats here.

This is my Chartjs Custom component

import React, { useRef, useEffect } from "react";

import Chart from "chart.js";

const ChartComponent = ({ data, label, min, max }) => {
    const canvasRef = useRef(null);

    useEffect(() => {
        const canvasObj = canvasRef.current;
        const context = canvasObj.getContext("2d");

        new Chart(context, {
            type: "line",
            data: {
                datasets: [
                    {
                        label: label,
                        backgroundColor: "transparent",
                        data: data,
                    },
                ],
            },
            options: {
                scales: {
                    xAxes: [
                        {
                            type: "time",
                            distribution: "linear",
                            time: {
                                unit: "month",
                                displayFormats: {
                                    quarter: "YYYY mm dd",
                                },
                            },
                        },
                    ],
                    yAxes: [
                        {
                            ticks: {
                                suggestedMax: max,
                                suggestedMin: min,
                            },
                        },
                    ],
                },
            },
        });
    }, [data, label, min, max]);

    return <canvas ref={canvasRef}> </canvas>;
};

export default ChartComponent;

and these are the data that I want to render on the chart, each array has to be line on the chart. "dare" array is going to be my xAxes and other columns are going to be my yAxes

const date = [
1370,
1371,
1372,
1373,
1374,
1375,
1376,
1377,
1378,
1379,
1380,
1381,
1382,
1383,
1384,
1385,
1386,
1387,
1388,
1389,
1390,
1391,
1392,
1393,
1394,
1395,
1396,
1397,
1398,
1399,
]

const level = [
1275.77,
1274.73,
1273.83,
1273.41,
1273.65,
1273.5,
1273.28,
1272.83,
12732.83,
1271.6,
1271.6,
1271.36,
1271.01,
1270.67,
1270.4,
1270.15,
1270.08,
1270.54,
1270.32,
1270.27,
1271.3,
1271.27,
]

const area = [
4753.37,
5039.93,
5391.36,
5723.07,
5724.38,
5724.38,
5643.3,
5498.31,
4978.31,
4544.5,
4215.19,
4070.4,
4148.57,
4099.62,
4028.18,
3794.98,
3794.98,
3436.8,
3029.65,
2869.53,
2583.24,
2196.58,
1880.42,
1525.59,
1404.46,
2047.49,
1783.47,
1722.87,
2828.37,
2807.79,
]

const volume = [
21010,
22150,
26910,
30710,
30770,
30770,
29010,
27990,
21500,
16540,
12580,
10840,
11830,
11210,
10310,
8550,
8550,
6120,
4320,
3610,
2640,
1840,
1290,
860,
750,
1560,
1140,
1050,
3430,
3350,
]

Halim Halim · Accepted Answer · 2021-03-31T13:32:15

what you are looking for is called rendering multiple datasets, to do that you should put the date inside labels array and the other arrays of data inside datasets array each in a separate object. I tried to implement an example using your data is a sandbox https://codesandbox.io/s/react-chartjs-forked-flj74 you can just reformat the dates to your needs

how can I render multiple charts in chartjs?

1 Answers