Chart.js multiple datas between labels

by

1👍

✅

You could deduct the data.labels from the data using Array.map().

labels: data.map((v, i) => i + 1)

Then you would have to define the desired ticks.stepSize for the x-axis.

xAxes: [{
  ticks: {
    stepSize: 2
  },

optionally you may also define ticks.maxTicksLimit instead.

Please take a look at your amended code and see how it works.

var data = [20, 60, 80, 90, 120, 150, 170, 210, 260, 220, 150, 10, 220, 150, 220, 150];

var config = {
  type: 'line',
  data: {
    labels: data.map((v, i) => i + 1),
    datasets: [{
      label: 'Bankroll',
      backgroundColor: 'grey',
      borderColor: 'grey',
      data: data,
      fill: false,
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Statistiques de votre bankroll'
    },
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    animation: {
      duration: 2000
    },
    scales: {
      xAxes: [{
        ticks: {
          stepSize: 2
        },
        scaleLabel: {
          display: true,
          labelString: 'Nombre de tournois'
        }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Total Cumulé (Euros)'
        }
      }]
    }
  }
};

new Chart('canvas', config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas">

Leave a comment