How to show different product name for every bar in chart js

Question

I am using chart js for showing top 3 sold products in last week. I want to show product name in tooltip for every bar which has obviously different products.

Here is my code :

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

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

            options: {
                tooltips: {
                    enabled: true,
                    mode: 'single',

                },
                scales: {
                    yAxes: [{
                        gridLines: {
                            display: true
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            display: true
                        },
                        barPercentage: 0.8
                    }]
                }

            }
        });
    }

I am getting output like this.

But instead of product 1 label I want product name for that particular bar how can I achieve that ?

score 2 · Accepted Answer · answered Jul 30 '18 at 11:07

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
                    }]
                }

            }
        });
    }

How to show different product name for every bar in chart js

1 Answers1