Chartjs-How to use chart.js drawing multiple lines from line sets with (X, Y) values?

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

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.
Demo of Plotly.js

I expects more answers to my question.

Leave a comment