Skip to content
Advertisement

PaddingLeft of afterFit does not work during chart.js option

I want padding at the beginning of the X-axis as shown in the image below.

But padding doesn’t work in my code.

What’s the matter?

enter image description here

My Chart Screen

enter image description here

Chart.js Version 2.9.4

here is code

html

  <div class="chart-container" style="position: relative; height:40vh; width:80vw">
 </div>

javascript

$('#myChart').remove();
$('.chart-container').append('<canvas id="myChart" style="height:400vh; width:500vw;"></canvas>');



let options = {
spanGaps: true,
responsive: true,
maintainAspectRatio : false,
scales: {
    xAxes:[{
        afterFit:(axis)=>{
            // console.log(axis)
            axis.paddingLeft = 25;
            axis.paddingRight = 15;
        },
        // padding : 20,
        ticks: {
            fontSize: 15,
            padding :20,
            drawTicks:true,
            offset: true,
            // labelOffset: 70,
            userCallback: function(value, index, values) {...},
        },
        gridLines:{
            display: xLineState,
            lineWidth: xLine,
            // offsetGridLines: true
        },
    }],
    yAxes: [{
        afterFit:(axis)=>{
        },
        padding : 10,
        ticks: {
            // min:10,
            fontSize: 15,
            padding :15,
            beginAtZero: true,
            userCallback: function(value, index, values) {...}
        },
        gridLines:{
            display: yLineState,
            lineWidth: yLine
        }
    }],

},
scaleLabel: {
    display: true,
    labelString: 'Moola',
    fontSize: 20,
},
tooltips: {
    enabled: false,
    mode: 'index',
    position: 'nearest',
    custom: customTooltips,
    callbacks:
        {
            label:function (tooltipItem, data) {...},
            footer:function (tooltipItems, data) {...}
        }
},
legend:{
    labels: {
        fontSize: legendFontSize,
    },
    onClick:function (e,legendItem) {...}
}};



        new Chart(ctx, config);

I want padding at the beginning of the X-axis as shown in the image below.

But padding doesn’t work in my code.

What’s the matter? paddingLeft is not working..plz

Advertisement

Answer

You are doing nothing wrong, it seems like it is a bug in chart.js. version 2.4.0 is the latest version I can see it works in.

Working example:

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: {
      xAxes: [{
        afterFit: (axis) => {
          // console.log(axis)
          axis.paddingLeft = 25;
          axis.paddingRight = 15;
        },
      }],
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas {
  background-color: #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.js" integrity="sha512-K89oirx9CqibxV7RiVHkr4Bu5l9ZCUGt8sKQGMAFWM1gfmjXYNp0/IsL94rzQCjzOUYU8yNN4TiOQ7Vx8J1Iig==" crossorigin="anonymous"></script>

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

fiddle link: https://jsfiddle.net/Leelenaleee/dxrm918n/2/ Filed an issue for this on there git: https://github.com/chartjs/Chart.js/issues/8344

User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement