[Chartjs]-How to show different product name for every bar in chart js

2๐Ÿ‘

โœ…

I solved it.
by passing an array to the label in data. And rest of the code is as below.

 function productChart() {
        var data = {
            labels: productHistoryDates,
            datasets: [{
                label: productHistoryProducts1.name,
                data: productHistoryProducts1.quantity,
                backgroundColor: "#26B99A"
            },
            {
                label: productHistoryProducts2.name,
                data: productHistoryProducts2.quantity,
                backgroundColor: "#03586A",
            },
            {
                label: productHistoryProducts3.name,
                data: productHistoryProducts3.quantity,
                backgroundColor: "#03226A",
            }]
        };
        var ctx = document.getElementById("productChart").getContext("2d");

        var myBarChart = new Chart(ctx, {
            type: 'bar',
            data: data,

            options: {

                tooltips: {
                    enabled: true,
                    mode: 'single',
                    callbacks: {
                        label: function (tooltipItems, data) {
                            var tooltip = data.datasets[tooltipItems.datasetIndex].label[tooltipItems.index];
                            return tooltip;
                        }
                    }
                },
                scales: {
                    yAxes: [{
                        gridLines: {
                            display: true
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            display: true
                        },
                        ticks: { mirror: true },
                        barPercentage: 0.8
                    }]
                }

            }
        });
    }

Leave a comment