0

I have created a graph with ngx-charts but I can’t do several things: I would like to put the total number in the center of the graph and change the libel of the total word. I would like for example 9 Legends. Then I would like to put my legends vertically and not horizontally. I would like to have: Legend: the number. I wouldn’t want to have a percentage

  <ngx-charts-advanced-pie-chart
    [view]="view"
    [scheme]="colorScheme"
    [results]="single"
  >
  </ngx-charts-advanced-pie-chart>


  public single = [
  {
   "name": "Légend 1",
   "value": 4
  },
  {
   "name": "Légend 2",
   "value": 3
  },
  {
   "name": "Légend 3",
   "value": 2
  }
  ];


  view: any[] = [700, 400];


  colorScheme = {
   domain: ['#edbb48', '#999999', '#f29011']
  };

Currently it looks like this: https://swimlane.gitbook.io/ngx-charts/v/docs-test/examples/pie-charts/advanced-pie-chart

dna
  • 486
  • 1
  • 9
  • 18

1 Answers1

1

Advance pie chart in ngx-chart having 'valueFormatting' option, using this option you can format the numerical value in the chart legend. For legend position, you can adjust the position of legend using 'legendPosition' attribute but it won't serve your purpose where you need legend in the center of the pie chart. I think you need to create a custom component based on ngx-cahrts where you overwrite SVG structure. Also, explore ngx-charts-advanced-legend.

https://swimlane.gitbook.io/ngx-charts/custom-charts

Nils
  • 910
  • 1
  • 9
  • 21