0

Simple question stated in the topic - I've been struggling with this for a couple of hours, googling and playing with the code but I can't find any solution.

BONUS question: How can I format the legend so that every label is in a separate row?

So the first pic shows what I managed to create:

https://i.stack.imgur.com/j5J05.jpg

While the second shows what I want to accomplish:

https://i.stack.imgur.com/TRqBj.jpg

Below the code:

HTML

    [data]="pieChartData" 
    [labels]="pieChartLabels" 
    [chartType]="pieChartType"
    [options]="pieChartOptions"
    [plugins]="pieChartPlugins"
    [colors]="pieChartColors"
    [legend]="pieChartLegend">
  </canvas>

.TS

 export class AppComponent  {
 // Pie
  public pieChartOptions: ChartOptions = {
    responsive: true,
    plugins: {
      datalabels: {
        align: 'top',
        color: ['white', 'rgba(59,97,25,1)'],
        /* formatter: function (value){
          return Math.round (value) + '%';
        }, */
        font: {
          family: 'sans-serif',
          weight: 'normal',
          size: 19,
        }
      }
    },
    legend: {
      position: 'bottom',
      fullWidth: true,
      display: true,
      labels: {
        fontSize: 14,
        boxWidth: 15,
        padding: 10
      }
    },
    elements: {
      arc: {borderWidth: 0}
    },
    layout: {
      padding: {
        bottom: 0
      }
    },

  };

  public pieChartLabels: Label[] = ['Sklepy aktywne', 'Wszystkie sklepy'];
  public pieChartData: SingleOrMultiDataSet = [124, 590];
  public pieChartType: ChartType = 'pie';
  public pieChartLegend = true;
  public pieChartPlugins = [pluginDataLabels];
  public pieChartColors = [
    {
      backgroundColor: ['rgba(59,97,25,1)', 'rgb(190, 198, 185)']
    }
  ];

  constructor() {
    monkeyPatchChartJsTooltip();
    monkeyPatchChartJsLegend();
  }
Dale K
  • 25,246
  • 15
  • 42
  • 71
turingox
  • 11
  • 2
  • I am aware of other chart solutions for angular, such as ej2.syncfusion, which has this solution upfront but I'd like to stick to Chart.js https://ej2.syncfusion.com/angular/documentation/accumulation-chart/pie-dough-nut/#various-radius-pie-chart – turingox Oct 23 '19 at 14:45
  • This answer may be useful for your issue https://stackoverflow.com/a/56225317/2358409 – uminder Oct 23 '19 at 15:26
  • @uminder Thank you, seems like it might be quite useful, i'll get into it – turingox Oct 23 '19 at 17:08
  • @uminder Unfortunately, I wasn't able to convert that code into usable angular context - I'm rather a beginner to programming :) I will appreciate any new ideas / suggestions ! – turingox Oct 24 '19 at 06:32

0 Answers0