1. Home
  2. Forum
  3. Xamarin.Forms
  4. Column Chart change column color

Column Chart change column color

I'm using syncfusion chart and I would like to change column color based on value of the y axys the Y axys goes from 0 to 100 and I would like to make the bar color change to red if it is below 25 orange betwen 25 to 50 , yellow 50 to 75 and green 75 to 100.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:App1"
             x:Class="App1.MainPage"
             xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms">

    <!--<ContentPage.BindingContext>

        <local:ViewModel></local:ViewModel>

    </ContentPage.BindingContext>-->

    <chart:SfChart>

        <chart:SfChart.PrimaryAxis>

            <chart:CategoryAxis>

                <chart:CategoryAxis.Title>

                    <chart:ChartAxisTitle Text="Name"></chart:ChartAxisTitle>

                </chart:CategoryAxis.Title>

            </chart:CategoryAxis>

        </chart:SfChart.PrimaryAxis>

        <chart:SfChart.SecondaryAxis>

            <chart:NumericalAxis>

                <chart:NumericalAxis.Title>

                    <chart:ChartAxisTitle Text="Height (in cm)"></chart:ChartAxisTitle>

                </chart:NumericalAxis.Title>

            </chart:NumericalAxis>

        </chart:SfChart.SecondaryAxis>

        <chart:SfChart.Series>

            <chart:ColumnSeries x:Name="T1" ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Height">

            </chart:ColumnSeries>

        </chart:SfChart.Series>

    </chart:SfChart>


</ContentPage>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Syncfusion.SfChart.XForms;

using Xamarin.Forms;

namespace App1
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            this.BindingContext = new ViewModel(); //adicionado no xaml <ContentPage.BindingContext>

            SfChart chart = new SfChart();

            //Initializing primary axis
            CategoryAxis primaryAxis = new CategoryAxis();
            primaryAxis.Title.Text = "Name";
            chart.PrimaryAxis = primaryAxis;

            //Initializing secondary Axis
            NumericalAxis secondaryAxis = new NumericalAxis();
            secondaryAxis.Maximum = 100;
            secondaryAxis.Title.Text = "Height (in cm)";
            chart.SecondaryAxis = secondaryAxis;

            //Initializing column series
            ColumnSeries series = new ColumnSeries();
            series.SetBinding(ChartSeries.ItemsSourceProperty, "Data");
            series.XBindingPath = "Name";
            series.YBindingPath = "Height";

            chart.Series.Add(series);
            series.DataMarker = new ChartDataMarker(); //Data Label
            chart.Legend = new ChartLegend(); //legenda
            series.Label = "Heights";
            series.EnableTooltip = true;


            chart.Title.Text = "Chart";

            this.Content = chart;

        }

 public MainPage()
        {
            InitializeComponent();

            this.BindingContext = new ViewModel();

            SfChart chart = new SfChart();

            //Initializing primary axis
            CategoryAxis primaryAxis = new CategoryAxis();
            primaryAxis.Title.Text = "Name";
            chart.PrimaryAxis = primaryAxis;

            //Initializing secondary Axis
            NumericalAxis secondaryAxis = new NumericalAxis();
            secondaryAxis.Maximum = 100;
            secondaryAxis.Title.Text = "Height (in cm)";
            chart.SecondaryAxis = secondaryAxis;

            //Initializing column series
            ColumnSeries series = new ColumnSeries();
            series.SetBinding(ChartSeries.ItemsSourceProperty, "Data");
            series.XBindingPath = "Name";
            series.YBindingPath = "Height";

            chart.Series.Add(series);
            series.DataMarker = new ChartDataMarker(); //Data Label
            chart.Legend = new ChartLegend(); //legenda
            series.Label = "Heights";
            series.EnableTooltip = true;


            chart.Title.Text = "Chart";

            this.Content = chart;

        }

        public class Model
        {
            public string Name { get; set; }

            public double Height { get; set; }
        }

        public class ViewModel
        {
            public List<Model> Data { get; set; }

            public ViewModel()
            {
                Data = new List<Model>()
                {
                    new Model { Name = "A", Height = 83.5 },
                    new Model { Name = "B", Height = 40.7 },
                    new Model { Name = "C", Height = 65.8 },
                    new Model { Name = "D", Height = 12 }
                };
            }
        }


    }

1 Reply
PS Parthiban Sundaram Syncfusion Team August 15, 2017 01:00 PM UTC

Hi Hue, 
  
Thanks for using Syncfusion products. 
  
We have achieved this requirement by workaround. In the workaround sample, we have declared a property called Colors to populate the color based on the data point. 
 
In this following code snippet, we are iterating the data point collection and add the color to the Colors property for each data point. 
 
 
   foreach (var item in Data) 
    { 
      Colors.Add(GetColorValues(item.Height)); 
    } 
 
 
 
        public Color GetColorValues(double yValue) 
        { 
            if (yValue >= 0 && yValue <= 25) 
            { 
                return Color.Red; 
            } 
            else if (yValue > 25 && yValue < 50) 
            { 
                return Color.Orange; 
            } 
            else if (yValue >= 50 && yValue < 75) 
            { 
                return Color.Yellow; 
            } 
            else 
            { 
                return Color.Green; 
            } 
        } 
 
  
We have prepared sample based on your requirement which can be downloaded from the below location.   
  
  
Please let us know, if you need further assistance on this.   
  
Regards,
 
Parthiban S 


Loader.
Up arrow icon