Can a bar series have different colors for different bars


#1

My end user wants to have a graph that has two bars, each a different color. Right now I am graphing them in different series to meet his color requirements, but he’d like it to look like it is one series, just with different colors for the two bars.

Is there a way to do that or is he going to have to decide between his color and thickness preferences?


#2

We don’t yet support individually styled bars on the series (though it’s something we’re keen to include in a future version).  That said, you can still get the effect you want by using two series and stacking them rather than putting them next to each other (which is the default).  To do that, just make sure that all the series you add have the same stackIndex (so they get placed on top of each other.  Then you just need to make sure that there is only one series which has a non-zero data value for each base axis value.  The resulting effict will be that each stacked column has only one of the series is visible, which effectively will look the same as a non-stacked series with different coloured, but full width, bars.

Hope that makes sense.

Jesse


#3

That made perfect sense and it looks great! I already had the series set up like you described, so i just had to add the stackIndex line In my code. Thank you!


#4

Hi Guys,

Please share sample code for different color bars for same chart.

Thanks,

Deep


#5

As of version 2.7.0 our API now includes individual point styling for series. To take advantage of the individual point styling you’ll need to subclass the series type your are using and override the method -styleForPoint:.

Below is an example of an implementation for SChartBarSeries:

- (SChartBarSeriesStyle *)styleForPoint:(id<SChartData>)point {

     SChartBarSeriesStyle *newStyle = [super styleForPoint:point];

     float xValue = [[point sChartXValue] floatValue];

     newStyle.showAreaWithGradient = NO;

     if (xValue < 100) {
         newStyle.areaColor = [UIColor redColor];
     }

     return newStyle;
 }

The above example will style any bars with an X value lower than 100 with a red area color. The documentation for each series class has an example of how to subclass & hook into the individual point styling, so be sure to check our API docs.

Thanks,
Jan