Is it possible to conditionally apply color to bar chart/column chart-flexchart

Is it possible to conditionally apply color to bar chart/column chart-flexchart

Posted by: sskss1ss2 on 14 March 2022, 9:00 am EST

• 

  sskss1ss2

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 March 2022, 9:00 am EST

  The column chart/bar chart provided have their default appearance with a set color. Is there a way i can change this default color based on some condition applied for a column?

  For Eg.
  
  Consider revenue set to Y-Axis and months set to X-Axis. I want to set the color of the month bar that has the revenue > $700000.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 15 March 2022, 8:16 am EST

  ​Hello,

  You may use the itemFormatter property of the FlexChart to achieve both the mentioned requirements. You can check the series data value and set the element fill, stroke accordingly as per your requirement. Please refer to the code snippet and sample link below demonstrating the same:

   
  barchart.itemFormatter = function (engine, hitTestInfo, defaultRenderer) {
      var ht = hitTestInfo;
  
      // check that this is the right series/element
      if (ht.series.binding == '2016') {
        // get current and previous values
        var chart = ht.series.chart,
          items = chart.collectionView.items,
          value = items[ht.pointIndex][ht.series.binding];
        //do not draw data points for value less then 4000
        if (value < 2466470) {
          engine.fill = 'red';
          engine.stroke = 'red';
        }
      }
      // render element as usual
      defaultRenderer();
    };
  
  

  Sample link: https://stackblitz.com/edit/js-4louav?file=index.js

  Regards

• 

  sskss1ss2

  • Post Options:
  • Link
    Copy

  Posted 15 March 2022, 11:20 am EST

  Thanks for the reply.

  In my case, if am applying engine.fill or engine.stroke, even though it is taking in the color it does not the render the condition color applied. Instead i will have to use

  hitTestInfo[ ‘series’ ].symbolStyle.fill

  But using above will change the default color that the chart is already having

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 16 March 2022, 5:42 am EST

  Hello,

  We apologize but we are unable to replicate the issue at our end, Would you please clarify if you are facing the issue with the above-shared sample too? If yes, please share some screenshots/gifs of the issue or error. If you are facing this issue only in your application but not in the shared sample then it is possible that the issue is arising due to some code specific to your application. Since we are unable to replicate the issue, I would request you to share a sample that demonstrates the issue so that we could further investigate the root cause of the issue and assist you accordingly. Without a sample to replicate the issue, we cannot comment on the actual nature of the issue.

  Regards

• 

  sskss1ss2

  • Post Options:
  • Link
    Copy

  Posted 16 March 2022, 8:07 am EST

  Hello,

  It was code specific and it was resolved after some debugging. Thanks for the code snippet that actually worked!

  Regards