Search code examples
javascriptreactjschart.jsreact-chartjsreact-chartjs-2

how to display last x float number value in chartjs

I'm making a Vertical Bar Chart using react-chartjs-2.

and I have array of lots of float numbers stored.

I tried to use chartjs callback option to display only the last value on a graph.

But the value in the callback is an integer, so I can't take the value I want.

for example,

const xAsisData = [ 1.11, 4.23, 7.34, ... , 403.78 ] // includes hundreds

  scales: {
    x: {
      ticks: {
        autoSkip: false,
        callback: (value) => {
         // if value === last ? value : null

         // ! but last value is 309, not 403.78 
        },
      },

Is there any other option I can use?

Solution

  • You get the index and ticks array as well in your callback so you can just check if the index is not the final one like so:

    var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      y: {
        ticks: {
          callback: (val, i, ticks) => (i < ticks.length - 1 ? val : null) // Replace null by empty string to still show the gridLine
        }
      }
    }
  }
}

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