CODEWITHSUNDEEP
javascriptchart.jsbar-chartwkhtmltopdfjscharts
Niloy Rony
Niloy Rony

Reputation: 632

ChartJs bar chart bar value displaying lower then Y axis value in pdf?

I have a created a bar chart by chart js , Below is my code

version : 2.9.4

var xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
var yValues = [3, 5, 8, 9, 5];
var barColors = ["#E85900", "#E85900","#E85900","#E85900","#E85900"];

new Chart("myChart", {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
      axis: 'y',
      backgroundColor: barColors,
      data: yValues,
    }]
  },
  options: {
    legend: {display: false},
    scales: {
        xAxes: [{
            barThickness: 65,  // number (pixels) or 'flex'
        }],
        yAxes: [{
            ticks: {
                stepSize: 1,
                beginAtZero:true,
                suggestedMax: 9
            }
        }]
    },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'top',
        formatter: Math.round,
        font: {
          weight: 'bold'
        }
      }
    }
  }
});

Output that I got like below in pdf, I am using wkhtmltopdf. But it's fine in html page.

enter image description here

Problem is bar size displaying less then Y axis value. Here bar value 3 is showing under the Y axis value 3. My expectation is it will equal to 3.

Upvotes: 1

Views: 338

Answers (1)

Mariola
Mariola

Reputation: 21

I had the similar issue while converting html to pdf in IronPdf. I have managed to resolve it by setting animation option to false. So in your case it would be:

var xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
var yValues = [3, 5, 8, 9, 5];
var barColors = ["#E85900", "#E85900","#E85900","#E85900","#E85900"];

new Chart("myChart", {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
      axis: 'y',
      backgroundColor: barColors,
      data: yValues,
    }]
  },
  options: {
    animation: false,
    legend: {display: false},
    scales: {
        xAxes: [{
            barThickness: 65,  // number (pixels) or 'flex'
        }],
        yAxes: [{
            ticks: {
                stepSize: 1,
                beginAtZero:true,
                suggestedMax: 9
            }
        }]
    },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'top',
        formatter: Math.round,
        font: {
          weight: 'bold'
        }
      }
    }
  }
});

Upvotes: 1

Related Questions