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

Popular posts from this blog

scala - 'wrong top statement declaration' when using slick in IntelliJ -

c# - DevExpress.Wpf.Grid.InfiniteGridSizeException was unhandled -

PySide and Qt Properties: Connecting signals from Python to QML -