syncfusion - Windows UWP SFChart - Column or Bar chart plot color based on value? -
is possible set color of bar based on value, example min 0 , max 10, if value between 0 , 3 color bar green, if between 3 , 7 colour blue, , if between 7 , 10 color yellow.
yes. possible set color based on value. can able achieve requirement customizing individual bar/column template color customtemplate property per below code snippet.
code snippet [xaml]:
<grid.resources> <local:colorconverter x:key="conv1"/> <datatemplate x:key="columntemplate1"> <canvas> <rectangle canvas.left="{binding rectx}" canvas.top="{binding recty}" height="{binding height}" width="{binding width}" stretch="fill" fill="{binding converter={staticresource conv1}}"></rectangle> </canvas> </datatemplate> </grid.resources> <grid.datacontext> <local:testingvaluescollection/> </grid.datacontext> <syncfusion:sfchart x:name="chart" > <syncfusion:sfchart.secondaryaxis> <syncfusion:numericalaxis minimum="0" maximum="10"/> </syncfusion:sfchart.secondaryaxis> <syncfusion:columnseries x:name="series1" itemssource = "{binding testingmodel}" xbindingpath = "x" customtemplate="{staticresource columntemplate1}" ybindingpath = "y"> </syncfusion:columnseries> </syncfusion:sfchart>
code snippet [c#]:
public class colorconverter : ivalueconverter { public object convert(object value, type targettype, object parameter, string language) { columnsegment segment = value columnsegment; //first region value declaration. doublerange firstregion = new doublerange(0, 3); solidcolorbrush firstregionbrush = new solidcolorbrush(colors.green); //second region value declaration. doublerange secondregion = new doublerange(3, 7); solidcolorbrush secondregionbrush = new solidcolorbrush(colors.blue); //third region value declaration. doublerange thirdregion = new doublerange(7, 10); solidcolorbrush thirdregionbrush = new solidcolorbrush(colors.yellow); if (segment.ydata >= firstregion.start && segment.ydata <= firstregion.end) return firstregionbrush; else if (segment.ydata >= secondregion.start && segment.ydata <= secondregion.end) return secondregionbrush; else if (segment.ydata >= thirdregion.start && segment.ydata <= thirdregion.end) return thirdregionbrush; return segment.interior; } public object convertback(object value, type targettype, object parameter, string language) { throw new notimplementedexception(); } }
we can able add more region in converter , return color bar/column.
we have done code based on y-axis value. if requirement based on x-axis value means check segment.xdata instead of checking segment.ydata in converter.
Comments
Post a Comment