CODEWITHSUNDEEP
javascriptchart.js
bart cubrich
bart cubrich

Reputation: 1254

How to change draw order by line property with chart.js

What I want to do it change the Z order of of a line on this chart based on the label attribute. For example, here I would like to make "Label2" plot on top. What I tried to do was mutate the data_all array to put the element I want on top first in the list, though I could not get that work. How can I change the plot order?

So I am creating an array of objects that I can put right into the "data part of chart js like so

        data_all=[]
    
        var s1 = {
          label: 'Label1',
          borderColor: '#00ffff',
          fill: false,
          data: [ 
          
          {x: '2021-06-25 11:00:00', y:50.5401942},
          
          {x: '2021-06-25 12:00:00', y:49.9631549},
              
          {x: '2021-06-25 13:00:00', y:50.0555899}]

          data_all.push(s1)

        var s2 = {
          label: 'Label2',
          borderColor: '#00ffff',
          fill: false,
          data: [ 
          
          {x: '2021-06-25 11:00:00', y:50.5401942},
          
          {x: '2021-06-25 12:00:00', y:49.9631549},
              
          {x: '2021-06-25 13:00:00', y:50.0555899}]

          data_all.push(s2)

Then I create a chart by passing data_all in to a chart variable.

var ctx = document.getElementById('plotAll').getContext('2d');
            

var plotall = new Chart(ctx, {
                  type: 'line',
                  data: { datasets: data_all },
                  options: {
                    responsive: true,
                    zoom: {
                            enabled: true,
                            mode: 'x'
                        },
                    pan: {
                      enabled: true,
                      mode: 'xy'
                        },
                      
    
                    scales: {
                      xAxes: [{
                        type: 'time'
                      }]
                    },
                    
                  }
                });

Upvotes: 3

Views: 3341

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31439

You can make use of the order property in the dataset, the lower this is, the sooner it will draw that dataset, see example, noramally red line would overlap blue line, now its reversed:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'red',
        order: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'blue',
        order: 0
      }
    ]
  },
  options: {}
}

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.4.0/chart.js"></script>
</body>

Upvotes: 5

Related Questions