Handle coloring of different values in PivotChart Pie chart

Handle coloring of different values in PivotChart Pie chart

Posted by: license on 30 January 2023, 8:28 pm EST

• 

  license

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 30 January 2023, 8:28 pm EST

  Hi

  We are using “@grapecity/wijmo.all”, version 5.20213.824 in an Angular 13 application.

  I have a request from our business. They would like to be able to define a certain colour for a given value in a Pivot Pie Chart.

  I know the Pie Chart has the palette, but that does not fully cover what I need.

  Let me try to explain.

  We have a , which can be configured to show as a Pie.

  For some of our datasets we KNOW that the only possible values are e.g. A, B, and C. But I can’t guarantee the order of them, so palette doesn’t cover it.

  But there is no way in our system that the dataset can have more values than A, B and C. The percentages between them do vary obviously.

  Is there a way to hook into the rendering/calculate pipeline of the Pivot Pie chart, that lets me set that A’s are Green, B’s are Yellow and C’s are Red.

  I would expect I could something using the flexPies ItemFormatter, but cant seem to get a complete hold on it.

  I have this code, which hooks in fine, and the slice for “A” is rendered green if I do like this.

  But the legend still shows the color from the palette - so now the pie and Palette doesnt match.

  this.pivotChart.flexPie.itemFormatter = (engine: chart.IRenderEngine, hitTestInfo: chart.HitTestInfo, defaultFormat) => {
  
      var name = hitTestInfo.name;
  
      if (name === 'A') {
          engine.fill = 'rgba(0,255,0,0.5)';
      else {
          defaultFormat();
      }
  }

  I hope the request is clear, and you can provide me with a sample on how to achieve this.

  Best regards
  
  Anders

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 31 January 2023, 9:36 pm EST

  Hi Anders,
  
  To restrict the palette for each category, you can use itemFormatter to color them as you used.
  
  To put the legends according to the specific color you can use the rendered event of the FlexPie of PivotChart. In this, you can change the fill attribute of the legend as per the category.
  
  Please refer to this sample for reference: https://jscodemine.grapecity.com/share/SQ7eoGCqtUC8jNliJh4xjA

  Regards,
  
  Manish Gupta

• 

  license

  • Post Options:
  • Link
    Copy

  Posted 14 February 2023, 7:28 pm EST

  Hi Manish.

  That is exactly what I need - thank you for the sample.

  /Anders