chart can hold only one Label-array. Need more.

Topic: chart can hold only one Label-array. Need more.

PaulW free asked 3 years ago

I need more labels for more datasets. Your example on your page shows only 1 dataset for 1 label-array, but it is possible to give more datasets, but as I see not more labels. How do I provide more Labels for more than 1 dataset?

I know in a chartjs example it is possible, but not in your mdb-component. The input [labels] can hold only 1 array, but I need more than one. I tried to provide the data like in an chartjs example but this has no effect.

don't know if this is even possible. If it's possible can you provide an example how to do it?

Arkadiusz Idzikowski staff commented 3 years ago

Can you provide an example of a chart that you want to create?

PaulW free commented 3 years ago

Example:

this is the example from your doughnat-chart:

enter image description here

This here can be set in javascript with chartjs:

enter image description here

Where I can set a second label array? a second dataset is possible, but second labelarray? seems not possible. I also tried it with {labels: ['Red, 'Green', ... ], {labels: ['Blue', 'Grey', ...]} but this has no effect.

Please insert min. 15 characters.

Add comment

Arkadiusz Idzikowski staff answered 3 years ago

0 0 Best answer

<p>You can use datasets and chart options in the same way as in the chartjs library:</p>

<pre class="prettyprint"><code>  doughnutChartType: ChartType = "doughnut";

chartDatasets = [
    {
      data: [10, 20, 20, 30],
      label: "Data 1",
      labels: ["a", "b", "c", "d"],
      backgroundColor: ["#ff6384", "#36a2eb", "#cc65fe", "#ffce56"]
    },
    {
      data: [30, 50],
      label: "Data 2",
      labels: ["e", "f"],
      backgroundColor: ["#ffffbb", "#0000aa"]
    }
  ];

chartOptions = {
    tooltips: {
      callbacks: {
        label: function(item, data) {
          var label = data.datasets[item.datasetIndex].labels[item.index];
          var value = data.datasets[item.datasetIndex].data[item.index];
          return label + ": " + value;
        }
      }
    }
  };
</code></pre>

Please insert min. 20 characters.

You can use datasets and chart options in the same way as in the chartjs library:

HTML:

<div style="display: block">
  <canvas mdbChart
      [chartType]="chartType"
      [datasets]="chartDatasets"
      [options]="chartOptions">
  </canvas>
</div>

TS:

  doughnutChartType: ChartType = "doughnut";

  chartDatasets = [
    {
      data: [10, 20, 20, 30],
      label: "Data 1",
      labels: ["a", "b", "c", "d"],
      backgroundColor: ["#ff6384", "#36a2eb", "#cc65fe", "#ffce56"]
    },
    {
      data: [30, 50],
      label: "Data 2",
      labels: ["e", "f"],
      backgroundColor: ["#ffffbb", "#0000aa"]
    }
  ];

  chartOptions = {
    tooltips: {
      callbacks: {
        label: function(item, data) {
          var label = data.datasets[item.datasetIndex].labels[item.index];
          var value = data.datasets[item.datasetIndex].data[item.index];
          return label + ": " + value;
        }
      }
    }
  };

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

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 11.0.0
Device: Desktop
Browser: chrome
OS: Windows 10
Provided sample code: No
Provided link: No

PaulW

10Support score
2Questions 0Answers 0Snippets