Chartjs-Is it possible to show labels for all lines?

by

3👍

✅

I am assuming you are talking about the tooltip­‘s label. In that case, you can set tooltips mode to index in your chart­‘s options config, like so :

options: {
      tooltips: {
         mode: 'index'
      },
      ...

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩ 

var ctx = document.getElementById('price-history').getContext('2d');
ctx.height = 150;
var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], //<?= json_encode($priceChangeData['labels']); ?>,
      datasets: [{
         label: 'Minimali kaina',
         backgroundColor: 'rgb(64, 127, 178)',
         borderColor: 'rgb(64, 127, 178)',
         borderWidth: 1,
         data: [3, 1, 4, 2, 5], //<?= json_encode($priceChangeData['line']['price_min']); ?>,
         fill: false
      }, {
         label: 'Vidutinė kaina',
         backgroundColor: '#686868',
         borderColor: '#686868',
         borderWidth: 1,
         data: [2, 4, 1, 5, 3], //<?= json_encode($priceChangeData['line']['price_avg']); ?>,
         fill: false
      }],
   },
   options: {
      responsive: true,
      tooltips: {
         mode: 'index'
      },
      layout: {
         padding: {
            left: 20,
            right: 15
         }
      },
      scales: {
         xAxes: [{
            display: true,
            scaleLabel: {
               display: false,
               labelString: 'Data'
            }
         }],
         yAxes: [{
            display: true,
            stacked: false,
            scaleLabel: {
               display: false,
               labelString: 'Kaina'
            }
         }]
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="price-history"></canvas>

Leave a comment