Wj-flex-chart (bar chart) - Can you show the quantity and percentage together?

Wj-flex-chart (bar chart) - Can you show the quantity and percentage together?

Posted by: kimleeju on 25 February 2019, 10:44 am EST

• 

  kimleeju

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 25 February 2019, 10:44 am EST

  I want to show you this. 90 / 30%

  A bar graph is a quantity. And I want to show you a percentage of the quantity.

  Is there any way I can show ?

  Thank you for reading my question.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 26 February 2019, 3:06 am EST

  If we understand correctly you would like to show datalabel with values along with the percentage. We could easily do so by assigning a function to the content property of the dataLabel.
  
  Please refer to the following code snippet and sample demonstrating the same:

  let maxVal = 10000; 
  // or calclulate from the data which needs to be base for percentage
      chart.axisX.max = maxVal;
      chart.dataLabel.content = function(ht){
        let val = ht.value;
        let percentage = val/maxVal;
        let formattedPercentage = wjcCore.Globalize.formatNumber(percentage, 'p0');
        let formattedValue = wjcCore.Globalize.formatNumber(val, 'n0');
        return formattedValue + ' / ' + formattedPercentage;
      }
  

  https://stackblitz.com/edit/angular-hbst1l?file=app%2Fapp.component.ts
  
  You may refer to the following doc for more info on dataLabel.content property: https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.chart.DataLabel.Class.html#content

  Please let us know if you had some other requirement.

  ~Sharad

• 

  kimleeju

  • Post Options:
  • Link
    Copy

  Posted 26 February 2019, 3:38 pm EST

  Thank you for your correct answer. That’s the answer I wanted. Thank you very much.