Chartjs-Chart js bar chart is not getting displayed correctly

by

0👍

I think you could have 1 dataset with 7 data values instead of 7 datasets.

Furthermore, scaleLabel.labelString is changed in chart.js version 3 to title.text.

var configuration = {
        type: 'bar',
        data: {
            labels: ['2019', '2020', '2021', '2022', '2023', '2024', '2025'],
            datasets: [{
                label: "Distribution",
                backgroundColor: [
                  "#E23D16",
                  "#BF9810",
                  "#C18D11",
                  "#088B64",
                  "#0F428D",
                  "#AB290D",
                  "#0F428D",
                ],
                data: [
                  Math.random() * 100, 
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100
                ],
            }]
        },
        options: {
            interaction: {
                intersect: true,
                mode: 'nearest'
            },
            indexAxis: 'x',
            //maintainAspectRatio: false,
            legend: { display: true, position: 'right' },
            title: { display: true, text: "" },
            plugins: {
                legend: {
                    display: true,
                    position: 'right'
                },
                tooltip: {
                    callbacks: {
                        title: () => null
                    }
                },
                datalabels: {
                    display: true,
                    color: "white",
                    labels: {
                        title: { 
                          color: "white", 
                          font: { weight: "bold" } 
                        },
                        value: { color: "white" }
                    },
                    formatter: (value) => {
                        return value.toFixed(1) + '%';
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                      display: true,
                      text: 'Month'
                    },
                    ticks: {
                        format: {
                            style: 'percent'
                        }
                    }
                },

            }
        }
    }
Chart.register(ChartDataLabels);
const myChart = new Chart(
  document.getElementById('myChart'),
  configuration
);
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.1.0/dist/chartjs-plugin-datalabels.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"/>
    </div>
  </body>
</html>

Leave a comment