multiple bar and line chart mix  #1211

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