[Chartjs]-Chart.js -> line chart -> multiple points with the same X

by

3👍

✅

This can be done with a scatter graph, the data has to be an array of objects with x and y, also you can adjust the tension of the line.

var data = {
  datasets: [{
    label: "Dataset #1",
    backgroundColor: "rgba(255,99,132,0.2)",
    borderColor: "rgba(255,99,132,1)",
    borderWidth: 2,
    hoverBackgroundColor: "rgba(255,99,132,0.4)",
    hoverBorderColor: "rgba(255,99,132,1)",
    data: [{
       x: 0,
       y: 5
     }, 
     {
       x: 1,
       y: 10
     },
     {
       x: 1,
       y: 5
     },
     {
       x: 3,
       y: 10
     }]
  }]
};

var option = {
  scales: {
    yAxes: [{
     stacked: true,
     gridLines: {
       display: true,
       color: "rgba(255,99,132,0.2)"
     }
    }],
    xAxes: [{
     gridLines: {
       display: true,
       color: "rgba(255,99,132,0.2)"
     }
   }]
 },
 elements: {
    line: {
        tension: .1, // bezier curves
    }
 }
};

 Chart.Scatter('chart_0', {
    options: option,
    data: data
 });

[Codepen]https://codepen.io/devil-geek/pen/KrQWBP

Leave a comment