0👍
You can definitely do multiple line on a chart via chart.js
Chart.js is pretty strict on its data structure format.(Also I’ve only heard it being used with javascript)
export const data = {
labels,
datasets: [
{
type: "line" as const,
label: "Dataset 1",
backgroundColor: "rgba(75, 192, 192, 1)",
borderColor: "rgba(255, 99, 132,1)",
borderWidth: 2,
fill: false,
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 }))
},
{
type: "line" as const,
label: "Dataset 2",
backgroundColor: "rgba(75, 2, 192, 1)",
borderColor: "rgba(155, 99, 132,1)",
borderWidth: 2,
fill: false,
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 }))
},
{
type: "bar" as const,
label: "Dataset 3",
backgroundColor: "rgba(53, 162, 235, 0.1)",
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 }))
}
]
};
Above you have three datasets so you have 2 lines and some bars. Than that data variable is passed to a chart.
On the react side, here is a codesanbox for it: https://codesandbox.io/s/chartjs-multiple-dataset-r1kixh?file=/App.tsx:1747-2138
- Chartjs-Edit styles for axes in ChartJS bar chart, when gridlines are hidden
- Chartjs-Is there a more optimized way to implement the change function of chart js upon changing the dropdowns?
0👍
I just tried Plotly.js can do this.
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var xValues = [50,60,70,80,90,100,110,120,130,140,150];
var x2Values = [30,40,50,60,70,80,90,100,110,120,130];
var yValues = [7,8,8,9,9,9,10,11,14,14,15];
var y2Values = [9,9,8,9,9,19,20,11,34,4,05];
var data = [
{x: xValues, y: yValues, mode:"lines"},
{x: x2Values, y: y2Values, mode:"lines"}
];
var layout = {title: "Plotly Chart"};
Plotly.newPlot("myPlot", data, layout);
</script>
As the picture shown below, the lines don’t have to use the same X list.
I expects more answers to my question.
Source:stackexchange.com