skip to Main Content

I’m working on a scatter with chartsjs.
I declare all the value, type category.

I want to hide some value from the scale.

My scale is: 0,5,10,15 etc
I don’t want to show the label for value 5 and 15.

How can I do?

Thanks

I can only hide all the value but nor certain.

2

Answers


  1. Chosen as BEST ANSWER

    thank you all. I'm not very familiar with js and I didn't know about the callback function. works.

    thanks, solved.


  2. I believe you want the X-axis to show the ticks with stepSize=5, but want to hide those 5, 15, 25, etc.

    For chartjs, to do what you want, you can specify the ticks with callback like the following:

       ticks: {
                 stepSize: 5, 
                 callback: function(value, index, values) {
                 return getCategoryLabel(value);
                 }
               }
    

    and then use the following callback function (I have used remainder (%) to do the calculation), for your case, the if condition statement can be if (value %5 ==0 && value %10 !=0) {....} else {....} :

      function getCategoryLabel(value) {
                if ( value %5 ==0 && value %10 !=0 ) {
                    return '';
                } else {
                    return value;
                }
            }
    

    So the complete code (Scatter example) will be like:

    <div>
      <canvas id="myChart"></canvas>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    
    <script>
            const canvas = document.getElementById('myChart');
            const ctx = canvas.getContext('2d');
    
            
            var chartData = {}; 
    
            var myChart = new Chart(ctx, {
                type: 'scatter', 
              data: {
                datasets: [{
                  label: 'Test Scatter',
    
                  data: [
                  {x: 27,y: 6}, 
                  {x: 25, y: 12}, 
                  {x: 26,y: 5}, 
                  {x: 24, y: 10}, 
                  {x: 28,y: 7}, 
                  {x: 29, y: 7}, 
                  {x: 26,y: 6}, 
                  {x: 24, y: 10}, 
                  {x: 11,y: 3}, 
                  {x: 18, y: 5}, 
                  {x: 0,y: 10}, 
                  {x: 10, y: 5}, 
                  {x: 0.5,y: 5.5}],
                   
                   backgroundColor: ['red'], 
                   borderWidth: 1
                    }],
                    
                },
                options: {
                    scales: {
    
                        x: {
                           type: 'linear',
                           position: 'bottom',
    
                        ticks: {
                                stepSize: 5, 
                                callback: function(value, index, values) {
                                    return getCategoryLabel(value);
                                }
                            }
    
                            },
    
                        y: {
                            beginAtZero: true,
                          
                        }
    
                    },
                    responsive: true, 
                    maintainAspectRatio: true 
                }
            });
    
            function getCategoryLabel(value) {
                if ( value %5 ==0 && value %10 !=0 ) {
                    return '';
                } else {
                    return value;
                }
            }
    
            function updateChart(newData) {
                myChart.data.datasets[0].data = newData.allData;
                myChart.update();
            }
    
    
        </script>
    

    See result here:

    enter image description here

    Note: If you want to hide 5, 15, 25 on Y-axis instead, then put the ticks block inside the scales > y

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search