Charts in Xamarin

[Sebastian]

Hi,

 

Yesterday we bought the license for Xamarin and we want to do some charts like the image attached. We read the documentation but is not very avanced in how to create this charts. Can you help me please with some more detailed documentation or example? it is possible to reach that level of design with the actual component?

[Pavel R. Pavlov]

Hi Sebastian,

As far as I understand your requirements you need to create a chart with bar series that are horizontal. In addition to that you need to hide both axis and visualize the actual value of the bars inside them. Here is what can be done out of the box with the current implementation of the RadCartesianChart.

You can try using BarSeries in combination with DateTimeContinuousAxis (set as vertical) and NumericalAxis (set as horizontal). This setup will give you the horizontal bars. With the current version of the charting control hiding the axes is a feature that is not supported. As a workaround you could set the color of the line of the axis to be transparent like so:

<telerik:RadCartesianChart.VerticalAxis>
  <telerik:DateTimeContinuousAxis LineColor="Transparent"/>
</telerik:RadCartesianChart.VerticalAxis>

The downside is that the ticks of the axis cannot be customized in the same way. To hide them you will have to create a custom renderer where the customization will take place.

Going further with your requirements, the labels of the separate bars cannot be visualized in the requested format. Currently the charting component supports behaviors which can be used in such scenarios. This case will be partially covered by the ChartTooltipBehavior. The labels will not be visualized all at once. You will have to interact with the chart (tap a bar) in order to visualize a particular label.

Next, you need to completely hide the horizontal axis. As I already said this is not supported but you can paint the line of the axis and hide the labels to achieve similar results like this:

<telerik:RadCartesianChart.HorizontalAxis>
  <telerik:NumericalAxis ShowLabels="False"
                         LineColor="Transparent"
                         Minimum="0"
                         Maximum="100"
                         MajorStep="10"/>
</telerik:RadCartesianChart.HorizontalAxis>

Lastly, you need to change the way the bars are colored. This can easily be done by creating a custom palette. This approach is demonstrated in our documentation. In your particular case you will need to create 5 palette entries with the same green color and 1 with a different. This pattern will be repeated when there are more than 6 bars visualized which will achieve your requirement.

Please give these suggestions a try and let us know if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik by Progress