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


    }

Best Answer

Answers

Sign In or Register to comment.