Place charts legend in seperate div

Topic: Place charts legend in seperate div

HullBorn1975 asked 5 years ago

Is it possible to place the legend in a seperate div?

The reason I ask is if you have two doughnut charts side by side the legend affect the size of the chart when set to responsive the left chart is bigger due the have a smaller legend

Thanks

Wayne.

Add comment

TomekMakowski staff answered 5 years ago

0 0 Best answer

Yes it is possible, you just have to add script which add this values into new div element

Best, Tomek

HullBorn1975 commented 5 years ago

Thanks, is there an example in the documentation?

Add comment

TomekMakowski staff answered 5 years ago

0 0 Best answer

No, but as you can see you must always add script to your charts in .js file

e.g.:

  //doughnut
  var ctxD = document.getElementById("doughnutChart").getContext('2d');
  var myLineChart = new Chart(ctxD, {
    type: 'doughnut',
    data: {
      labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],
      datasets: [{
        data: [300, 50, 100, 40, 120],
        backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
        hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
      }]
    },
    options: {
      responsive: true
    }
  });

And here you have new object "myLineChart". From there you can take values.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

User: Free
Premium support: No
Technology: MDB jQuery
MDB Version: 4.8.3
Device: Mac
Browser: Firefox
OS: Mac OS
Provided sample code: No
Provided link: No

HullBorn1975

7Support score
1Questions 0Answers

0Snippets likes 0Snippets