Skip to content Skip to sidebar Skip to footer
Home / Chart.js / Javascript

Chart.js Line Graph: Start A Line In The Middle Of A Graph

Post a Comment
I'm wondering if it is possible to have a graph with multiple lines, but I want one of the lines to start from the middle of the graph, while the rest of the lines still start from

Solution 1:

Yes this is possible, you can achieve this in 2 ways, 1 is to specify each datapoint using its x and y coordinate another one is to place some null values in the start of your data array:

var options = {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5, 6],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [{
          x: 3,
          y: 6
        }, {
          x: 4,
          y: 8
        }, {
          x: 5,
          y: 2
        }, {
          x: 6,
          y: 12
        }],
        borderColor: 'orange'
      },
      {
        label: '# of Points2',
        data: [null, null, null, 9, 13, 15],
        borderColor: 'lightblue'
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
newChart(ctx, options);
<body><canvasid="chartJSContainer"width="600"height="400"></canvas><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script></body>

You may like these posts

Post a Comment for "Chart.js Line Graph: Start A Line In The Middle Of A Graph"