multiple bar and line chart mix

[CuongSofi]

Would you like to work on this feature?

• [ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

What problem are you trying to solve?

I tried mix bar and line chart However I can only create

You can give me some solution ?

Describe the solution you'd like

Describe alternatives you've considered

`import { Chart, Line } from "react-chartjs-2";

import React from "react";

const options = { responsive: true, maintainAspectRatio: false, aspectRatio: 1, layout: { padding: { top: 30, }, }, plugins: { legend: { display: false, }, datalabels: { display: false, }, }, scales: { y: { type: "linear", display: true, position: "left", ticks: { color: "rgba(0, 0, 0, 1)", }, grid: { drawBorder: true, drawTicks: true, color: "rgba(0, 0, 0, 0.2)", }, title: { display: true, font: { size: 17, }, }, }, y1: { type: "linear", display: true, position: "right", title: { display: true, font: { size: 15, }, }, }, }, }; export default function MixChartUI({ labels }) { //! state const chartData = { labels: ["2000", "2001", "2002", "2003", "2004"], datasets: [ { type: "bar", data: [5, 4, 3, 2, 1], yAxisID: "y1", yAxesGroup: "a", backgroundColor: "rgb(190, 50, 216)", order: 2, }, { type: "line", data: [2, 4, 6, 8, 10], backgroundColor: rgba(100,200,255), yAxisID: "y", yAxesGroup: "a", order: 1, lineTension: 0, steppedLine: true, },

        {
            type: "bar",
            data: [10, 23, 12, 9, 6],
            yAxisID: "y1",
            backgroundColor: "rgb(190, 50, 216)",
            order: 2,
        },
        {
            type: "line",
            data: [5, 1, 4, 2, 8],
            backgroundColor: "red",
            yAxisID: "y",
            order: 1,
        },
    ],
};
//! function
//! render
return (
    <div className="h-full">
        <Line data={chartData} options={options} />
    </div>
);

} `

Documentation, Adoption, Migration Strategy

No response