Remove Legend from CanvasJS Bar Chart in ASP.Net

Last Reply one year ago By dharmendr

Posted one year ago

Hi mukesh1,

Set legend display to false in the options object to hide the legend from graph.

Refer below sample.

HTML

<canvas id="bar-chart" width="1000" height="500"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script type="text/javascript">
    var remark1 = "my project details of class1 to 81";
    var remark2 = "my project details of class2 to 82";
    var remark3 = "my project details of class3 to 83";
    var remark4 = "my project details of class4 to 84";
    var remark5 = "my project details of class5 to 85";
    var remark6 = "my project details of class6 to 86";
    var remark7 = "my project details of class7 to 87";
    var remark8 = "my project details of class8 to 88";
    var remark9 = "my project details of class9 to 89";
    var remark10 = "my project details of class10 to 89";
    var point1 = 50;
    var point2 = 54;
    var point3 = 85;
    var point4 = 32;
    var point5 = 46;
    var point6 = 78;
    var point7 = 61;
    var point8 = 58;
    var point9 = 63;
    var point10 = 66;
    var ctx = document.getElementById("bar-chart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [remark1, remark2, remark3, remark4, remark5, remark6, remark7, remark8, remark9, remark10],
            datasets: [{
                label: "Points",
                data: [point1, point2, point3, point4, point5, point6, point7, point8, point9, point10],
                backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"]
            }]
        },
        options: {
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }],
                xAxes: [{
                    ticks: {
                        callback: function (value, index, values) {
                            // return only first 4 charater of remark.
                            return value.substr(0, 4);
                        }
                    }
                }]
            },
            tooltips: {
                callbacks: {
                    title: function (tooltipItem, data) {
                        // Returns text to render as the title of the tooltip.
                        return data.labels[tooltipItem[0].index];
                    }
                }
            }
        }
    });
</script>

Demo