We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Column Chart change column color

Thread ID:

Created:

Updated:

Platform:

Replies:

132100 Aug 14,2017 12:49 PM UTC Aug 15,2017 01:00 PM UTC Xamarin.Forms 1
loading
Tags: SfChart
Hue Hue
Asked On August 14, 2017 12:49 PM UTC

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 }
                };
            }
        }


    }

Parthiban Sundaram [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;