Telerik UI for Windows Phone by Progress

Bar Series

RadChart provides BarSeries out of the box. This series is used to visualize data points as bar blocks with the height of each bar denoting the magnitude of its value. The bars can be styled differently so that they can easily be differentiated from each other if necessary. Here is an example of how to create the bar series and how to style each rectangle so that it has a unique appearance:

CopyXAML
<chart:RadCartesianChart x:Name="chart">
   <chart:RadCartesianChart.HorizontalAxis>
      <chart:CategoricalAxis/>
   </chart:RadCartesianChart.HorizontalAxis>

   <chart:RadCartesianChart.VerticalAxis>
      <chart:LinearAxis/>
   </chart:RadCartesianChart.VerticalAxis>

   <chart:BarSeries>
       <chart:BarSeries.PointTemplates>
           <DataTemplate>
              <Rectangle Fill="Yellow"/>
           </DataTemplate>

           <DataTemplate>
              <Rectangle Fill="White"/>
           </DataTemplate>

           <DataTemplate>
              <Rectangle Fill="Green"/>
           </DataTemplate>

           <DataTemplate>
              <Rectangle Fill="Red"/>
           </DataTemplate>

           <DataTemplate>
              <Rectangle Fill="Gray"/>
           </DataTemplate>
      </chart:BarSeries.PointTemplates>

     <chart:BarSeries.DataPoints>
       <chartEngine:CategoricalDataPoint Value="10" Category="1"/>
       <chartEngine:CategoricalDataPoint Value="4" Category="2"/>
       <chartEngine:CategoricalDataPoint Value="7" Category="3"/>
       <chartEngine:CategoricalDataPoint Value="11" Category="4"/>
       <chartEngine:CategoricalDataPoint Value="15" Category="5"/>
     </chart:BarSeries.DataPoints>
   </chart:BarSeries>
</chart:RadCartesianChart>

Notice how the point templates are in a collection. If the actual number of data points is greater than the number of templates, the templates will be reused from the beginning of

the collection. For example if there are 7 data points but only five templates the templates will be used in this order - 1,2,3,4,5,1,2. They will simply wrap around the last template and start from the first.

radchart-series-bar