Given a data set as such
Hello Singu,
I have been investigating into your requirement, and in order to do this, I would recommend using the AssigningCategoryStyle event of the series plotted in your igx-category-chart. In order to get these series, you can handle the SeriesAdded event as the event arguments of that event will net you the series and then hook the AssigningCategoryStyle event on it in Typescript. Note that in order to handle this event, you need to “opt in” to it by setting the IsCustomCategoryStyleAllowed property on your series to “true.”
In the AssigningCategoryStyle event handler, you can use the event arguments’ GetItems method along with its StartIndex and EndIndex properties to get an any[] of the underlying data items that make up the bar that is being “styled” by this event. You can then set the different properties related to color for that bar such as Fill or Stroke on the event arguments.
I am attaching a sample project that demonstrates the above. I hope this helps you.
Please let me know if you have any other questions or concerns on this matter.
3817.demo.zip
Hey Andrew,Your solution worked perfect, I also apologize for not verifying your answer right away. I probably should have made this another question but I figured I would just ask you the query here.
In my graph, the first bar has a value of 10K and the other has a value of 10.1K, but as you can see the visualization is not right. Any pointers on how I can fix this? I guessing setting a value might not be right since my values can either range from 0 to 10K. I will verify both the answers after this. Thank you.
I believe the behavior you are seeing is expected. It appears that you likely do not have a minimum or maximum value set on the y-axis of your igx-category-chart, and so the chart is auto-formatting the minimum and maximum values of your axis to be the minimum and maximum values in your data. As shown, this appears to be 10,000 and 10,001.
I believe you will see a more desired behavior in this case if you were to set the yAxisMinimumValue property of your igx-category-chart to something less than your data, for example, “9,999.”