Search code examples
chart.js

Show value data in the bar

Goal:
Show the chart with visual data with numbers in each box. enter image description here

Problem:
Is it possible to do it in this chartjs?

https://www.geeksforgeeks.org/how-to-dynamically-update-values-of-a-chart-in-chartjs/

https://www.chartjs.org/docs/latest/developers/updates.html

Data from "Chart.data.datasets" don't exist.

Other:
https://jsbin.com/rutexugole/edit?html,output

<!DOCTYPE html>
<html>

<head>
    <title>ChartJS Stacked Bar Chart Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    
    <h3>Chart JS Stacked Chart </h3>
    
    <div>
        <canvas id="stackedChartID"></canvas>
    </div>

    <script>

        // Get the drawing context on the canvas
        var ctx = document.getElementById("stackedChartID").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ["bike", "car", "scooter", "truck", "auto", "Bus"],
                datasets: [{
                    label: 'worst',
                    backgroundColor: "blue",
                    data: [17, 16, 4, 11, 8, 9],
                }, {
                    label: 'Okay',
                    backgroundColor: "green",
                    data: [14, 2, 10, 6, 12, 16],
                }, {
                    label: 'bad',
                    backgroundColor: "red",
                    data: [2, 21, 13, 3, 24, 7],
                }],
            },
            options: {
                plugins: {
                    title: {
                        display: true,
                        text: 'Stacked Bar chart for pollution status'
                    },
                },
                scales: {
                    x: {
                        stacked: true,
                    },
                    y: {
                        stacked: true
                    }
                }
            }
        });
    </script>
</body>

</html>

Solution

  • Register your plugin chartjs-plugin-datalabels: https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#registration

    <!DOCTYPE html>
<html>

<head>
    <title>ChartJS Stacked Bar Chart Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    
    <h3>Chart JS Stacked Chart </h3>
    
    <div>
        <canvas id="stackedChartID"></canvas>
    </div>

    <script>

        // Get the drawing context on the canvas
        var ctx = document.getElementById("stackedChartID").getContext('2d');
        var myChart = new Chart(ctx, {
            plugins: [ChartDataLabels],
            type: 'bar',
            data: {
                labels: ["bike", "car", "scooter", "truck", "auto", "Bus"],
                datasets: [{
                    label: 'worst',
                    backgroundColor: "blue",
                    data: [17, 16, 4, 11, 8, 9],
                    datalabels: {
                      align: "end",
                      anchor: "start",
                      font:{
                        size: "10px",
                      },
                      padding: "0px",
                      color: "#000",
                    },
                }, {
                    label: 'Okay',
                    backgroundColor: "green",
                    data: [14, 2, 10, 6, 12, 16],
                    datalabels: {
                      align: "center",
                      anchor: "center",
                      font:{
                        size: "10px",
                      },
                      padding: "0px",
                      color: "#000",
                    },
                }, {
                    label: 'bad',
                    backgroundColor: "red",
                    data: [2, 21, 13, 3, 24, 7],
                    datalabels: {
                      labels: {
                        index: {
                          align: "start",
                          anchor: "end",
                          font:{
                            size: "10px",
                          },
                          padding: "0px",
                          color: "#000",
                        },
                        sum: {
                          align: "end",
                          anchor: "end",
                          font:{
                            size: "14px",
                          },
                          padding: "0px",
                          color: "#000",
                          formatter: function(value, ctx) {
                                const worst = ctx.chart.data.datasets[0].data[ctx.dataIndex]
                                const bad = ctx.chart.data.datasets[1].data[ctx.dataIndex] 
                                const okay = ctx.chart.data.datasets[2].data[ctx.dataIndex] 
                                
                            return worst + bad +okay
                          }
                        }
                      }
                    }
                }],
            },
            options: {
                plugins: {
                    title: {
                        display: true,
                        text: 'Stacked Bar chart for pollution status'
                    },
                },
                scales: {
                    x: {
                        stacked: true,
                    },
                    y: {
                        stacked: true
                    }
                }
            }
        });
    </script>
</body>

</html>