Chart.js - displaying multiple line charts using multiple labels

17,406

Use scatter type chart and showLine: true instead of line type with labels:

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [
    	{
        label: 'Chart 1',
        data: [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}],
        showLine: true,
        fill: false,
        borderColor: 'rgba(0, 200, 0, 1)'
    	},
      {
        label: 'Chart 2',
        data: [{x: 1, y: 3}, {x: 3, y: 4}, {x: 4, y: 6}, {x: 6, y: 9}],
        showLine: true,
        fill: false,
        borderColor: 'rgba(200, 0, 0, 1)'
    	}
    ]
  },
  options: {
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    },
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>
Share:
17,406

Related videos on Youtube

Mike Nathas
Author by

Mike Nathas

Updated on September 16, 2022

Comments

  • Mike Nathas
    Mike Nathas over 1 year

    I need to draw a chart with 2 lines using Chart.js.
    Each of this line has a different label set.
    i.e. Chart 1:

    1 -> 2  
    2 -> 4   
    3 -> 8  
    4 -> 16
    

    Chart 2:

    1 -> 3  
    3 -> 4  
    4 -> 6  
    6 -> 9
    

    This following sample obviously does not work as it uses the labels from chart1. But is it possible to realize this with Chart.js?

        var config = {
            type: 'line',
            data: {
                labels: [1,2,3,4,5],
                datasets: [{
                    label: 'Chart 1',
                    data: [2,4,8,16],
                }, {
                    label: 'Chart 2',
                    data: [3,4,6,9],
                }]
            },
    

    Other charting libs offers a (label/data) set as parameter so I could simply give a tupel as parameter
    (ie. [(1->2),(2->4),(3->8)...]
    for each chart and the lib will match everything.

    Thanks

    Edit: Detailed sample as requested:

    var config = {
      type: 'line',
      data: {
        labels: [1, 2, 3, 4, 5],
        datasets: [{
          label: 'Chart 1',
          data: [2, 4, 8, 16],
        }, {
          label: 'Chart 2',
          data: [3, 4, 6, 9],
        }]
      },
      options: {
        spanGaps: true,
        responsive: true,
        title: {
          display: true,
          text: 'Chart.js Line Chart'
        },
        tooltips: {
          mode: 'index',
          intersect: false,
        },
        hover: {
          mode: 'nearest',
          intersect: true
        },
        scales: {
          xAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'Labels'
            }
          }],
          yAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'Values'
            },
            ticks: {
              min: 1,
              max: 10,
    
            }
          }]
        }
      }
    };
    
    window.onload = function() {
      var ctx = document.getElementById('canvas').getContext('2d');
      window.myLine = new Chart(ctx, config);
    };
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    
    <div style="width:90%;" class="container">
      <canvas id="canvas"></canvas><br>
    </div>