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
Ảnh màn hình 2024年05月09日 lúc 16 39 53

You can give me some solution ?

Describe the solution you'd like

Ảnh màn hình 2024年05月09日 lúc 16 38 26

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