Search code examples
javascriptchart.jschart.js2

Chart.js multiple datas between labels

i am using chart.js to display data. I would like to display several points per label.

A picture is better than sentences, here is an example of a poker platform :

enter image description here

We see that between the labels several points are recorded.

Here is my code with chart.js currently with test data :

var config = {
                type: 'line',
                data: {
                    labels: ['2', '4', '6', '8', '10','12','14','16'],
                    datasets: [{
                        label: 'Bankroll',
                        backgroundColor: window.chartColors.grey,
                        borderColor: window.chartColors.grey,
                        data: [20,60,80,90,120,150,170,210,260,220,150,10,220,150,220,150],
                        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: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Nombre de tournois'
                            }
                        }],
                        yAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Total Cumulé (Euros)'
                            }
                        }]
                    }
                }
            };

le rendu est le suivant :

enter image description here

We observe that I have not 8 data but 16 and only 8 are displayed. I would like to keep the same number of labels by displaying all the points, is this possible?

Thank you so much ! :)

Solution

  • 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">