Description
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