Topic: Questions about charts, labels and JS

diworm free asked 5 years ago

Hello there! Have some questions about charts: 1. How can I add labels to my chart from data variable? I see it like this: 2. How can I add clickable legend to my chart to show/hide graphs? Like here: Maybee devs have some plans to add native features about this? I will be very grateful for any information.

Marta Wierzbicka staff answered 5 years ago

Hi, yes, highcharts are awesome but we can't use them as a part of MDB, so I didn't delve into highcharts code. And I will repeat myself: if you want I check something in your code and help you with these labels, please send me files with your code to and I will check how to add these labels. Best, Marta

diworm free answered 5 years ago

Hello there! I stop tests with chartsjs and switched to highcharts (it's more simplest and responsive for me). But I test with charts, example code:
    //Statistics chart
    $(function () {
        var data = {
            labels: [<?=$data['timeline'];?>],
            datasets: [
        var option = {
            responsive: true,
            title: {
                display: true,
                text: 'Custom Chart Title'
            legend: {
                display: true,
                position: 'top',
                labels: {
                    fontColor: 'rgb(255, 99, 132)'
        // Get the context of the canvas element we want to select
        var ctx = document.getElementById("statistics").getContext('2d');
        var myLineChart = new Chart(ctx).Line(data, option); //'Line' defines type of the chart.

But no legend and no chart title for me with this code. Docs for legend: thinking out loud: Maybee I need to add labels in option.legend, but my logic down here, coz I add labels in 'dataset' and if I do this with another chart type all hints work normaly....

Marta Wierzbicka staff answered 5 years ago

Hi, 1. For the first issue, please send me files with your code to and I will check how to add these labels. If you want to check it by yourself you can always look at the documentation of chart.js, because on MDB we use chart.js for creating charts. 2. If you don't find this feature clickable legend in chart.js documentation, we will try to create such a feature. Best, Marta

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No