Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chart.js Line Graph: Start a line in the middle of a graph

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 all the way at the left. Is this possible? It'd look like this: The green line is what I want to do

The green line is what I am talking about, whether it would be possible for a dataset to start from not all the way at the left

like image 332
Mika Tan Avatar asked Feb 01 '26 09:02

Mika Tan


1 Answers

Yes this is possible, you can achieve this in 2 ways:

  1. specify each datapoint using its x and y coordinate
  2. 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');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>
like image 154
LeeLenalee Avatar answered Feb 04 '26 00:02

LeeLenalee