1. Home
  2. Forum
  3. Xamarin.Forms
  4. Help with styling doughnut, column, and bar charts

Help with styling doughnut, column, and bar charts

Hello,

I have 3 charts that I need assistance with some styling. I have included the pictures of what I have (the red charts) and what I need (the blue charts). I have looked through the documentation and have not found significant resources on styling. I hope that below gives a clear image of what I am looking for.

  1. Doughnut Series -
    1. I need help getting the colored section to start at the top of the doughnut as seen in the after picture.
    2. If possible, is there a way to put space between the 2 sections? I have tried "Explode All" but it does not do the correct thing
  2. Column Series - 
    1. I need to get rid of the background (grid) behind the chart
    2. If possible, I would like lines between each column as shown in the after picture
    3. I would like to get rid of the Y axis values and put them above each column
    4. I would like to add a radius to round the top of each column
    5. I would like the chart to start exactly at 0 for the y value
  3. Bar Series -
    1. I need to get rid of the background (grid) behind the chart
    2. I would like to see every bar name on the y axis instead of some being left blank
    3. I would like to add a radius to round the end of each bar
    4. I would like to get rid of the X axis values and put them at the end of each bar
    5. I would like the chart to start exactly at 0 for the x value

Current and what is needed images included below.

Thanks,

David

Attachment: Synfusion_Screenshots_for_Charts_831b091c.zip

1 Reply
BT Bhava Tharani Mariappan Syncfusion Team April 4, 2022 04:25 PM UTC

Hi David,

Based on the information provided we have analyzed your requirement; we would like to suggest you follow the steps below.

Doughnut Series:

I need help getting the colored section to start at the top of the doughnut as seen in the after picture:

  • You can get the expected images using the start and end angle API support by referring to the following UG link.

https://help.syncfusion.com/xamarin/charts/charttypes#sector-of-pie


If possible, is there a way to put space between the two sections? I have tried "Explode All" but it does not do the correct thing:

  • You can Spacing API for space between the two sections. For example, use 0.01 for spacing you can get your expected output. You can get this by referring to the following Spacing API link.

https://help.syncfusion.com/cr/xamarin/Syncfusion.SfChart.XForms.DoughnutSeries.html#Syncfusion_SfChart_XForms_DoughnutSeries_Spacing



Column Series:

I need to get rid of the background (grid) behind the chart:

  • You can get this by referring to the following UG link.

https://help.syncfusion.com/xamarin/charts/appearance#plotting-area-customization


If possible, I would like lines between each column as shown in the after picture:

  • You can get an expected result by using LabelPlacement in the axis. Please find the UG for LabelPlacement usage.

https://help.syncfusion.com/xamarin/charts/axis#placing-labels-between-ticks


I would like to get rid of the Y-axis values and put them above each column:

  • You can set the Y-axis value by using LabelContent API and refer to the following UG.

https://help.syncfusion.com/xamarin/charts/datamarker#formatting-label-content

  • You can put the Y-axis value above the column using the Label position API.

https://help.syncfusion.com/xamarin/charts/datamarker#label-position


I would like to add a radius to round the top of each column:


I would like the chart to start exactly at 0 for the y value:

  • By default, the axis value starts with 0. Otherwise, a nice range will be calculated automatically based on the data provided. So, please ensure that you can also use the Minimum value for the axis.

https://help.syncfusion.com/cr/xamarin/Syncfusion.SfChart.XForms.NumericalAxis.html#Syncfusion_SfChart_XForms_NumericalAxis_Minimum


Bar Series:

I need to get rid of the background (grid) behind the chart:

  • You can get this by referring to the following UG link.

https://help.syncfusion.com/xamarin/charts/appearance#plotting-area-customization



I would like to see every bar name on the y axis instead of some being left blank:

  • By default, the label will show for each bar in Y-axis. Please find the following UG for Axis visibility.

https://help.syncfusion.com/xamarin/charts/axis#edge-labels-visibility


I would like to add a radius to round the end of each bar:

  • You can add a radius to round the top of each column using CornerRadius. Please find the CornerRadius API in BarSeries.

https://help.syncfusion.com/cr/xamarin/Syncfusion.SfChart.XForms.BarSeries.html#Syncfusion_SfChart_XForms_BarSeries_CornerRadius


I would like to get rid of the X-axis values and put them at the end of each bar:

  • You can put the Y-axis value above the column using the Label position API.

 https://help.syncfusion.com/xamarin/charts/datamarker#label-position


I would like the chart to start exactly at 0 for the x value:

  • By default, the axis value starts with 0. Otherwise, a nice range will be calculated automatically based on the provided data. So, please ensure that you can also use the Minimum value for the axis.

https://help.syncfusion.com/cr/xamarin/Syncfusion.SfChart.XForms.NumericalAxis.html#Syncfusion_SfChart_XForms_NumericalAxis_Minimum

Please let us know if you need further assistance.

Regards,

Bhava Tharani


Loader.
Up arrow icon