How to: Colorize Charts Using the Range Colorizer

• Nov 13, 2018
• 4 minutes to read

To use the Range Colorizer, do the following:

• Create a RangeColorizer object and assign it to the SeriesBase.Colorizer property.
• Populate the RangeColorizer.RangeStops collection.
• Specify the ChartPaletteColorizerBase.Palette property if you want to use a non-default palette to colorize chart.
• In addition, it is possible to specify the RangeColorizer.ValueProvider property to customize the way used to provide floating point number values based on color data member values.

View Example

Program.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace RangeColorizerExample {
    static class Program {
        /// <summary>
        /// The main entry point for the application.
        /// </summary>
        [STAThread]
        static void Main() {
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
            Application.Run(new Form1());
        }
    }
}

Form1.cs

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Windows.Forms;
using System.Xml.Linq;
using DevExpress.XtraCharts;

namespace RangeColorizerExample {
    public partial class Form1 : Form {
        const string filepath = @"..//..//Data//HPI.xml";

        public Form1() {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e) {
            #region #BarSeries
            // Create and customize a bar series.
            Series bubbleSeries = new Series() {
                DataSource = LoadData(filepath),
                Colorizer = CreateColorizer(),
                ArgumentDataMember = "Country",
                ColorDataMember = "Hpi",
                View = new SideBySideBarSeriesView()
            };
            bubbleSeries.ValueDataMembers.AddRange(new string[] { "Product" });
            #endregion #BarSeries

            // Add the series to the ChartControl's Series collection.
            chartControl1.Series.Add(bubbleSeries);

            // Show a title for the values axis.
            ((XYDiagram)chartControl1.Diagram).AxisY.Title.Text = "GDP per capita, $";
            ((XYDiagram)chartControl1.Diagram).AxisY.Title.Visibility = DevExpress.Utils.DefaultBoolean.True;
        }

        #region #RangeColorizer
        // Creates a range colorizer.
        ChartColorizerBase CreateColorizer() {
            Palette palette = new Palette("Custom");
            palette.Add(Color.FromArgb(255, 255, 90, 25), Color.FromArgb(255, 255, 90, 25));
            palette.Add(Color.FromArgb(255, 229, 227, 53), Color.FromArgb(255, 229, 227, 53));
            palette.Add(Color.FromArgb(255, 110, 201, 92), Color.FromArgb(255, 110, 201, 92));

            RangeColorizer colorizer = new RangeColorizer() {
                LegendItemPattern = "{V1} - {V2} HPI",
                Palette = palette
            };
            colorizer.RangeStops.AddRange(new double[] { 22, 30, 38, 46, 54, 64 });
            return colorizer;
        }
        #endregion #RangeColorizer

        #region #DataLoad
        class HpiPoint {
            public string Country { get; set; }
            public double Product { get; set; }
            public double Hpi { get; set; }
        }

        // Loads data from an XML data source.
        static List<HpiPoint> LoadData(string filepath) {
            XDocument doc = XDocument.Load(filepath);
            List<HpiPoint> points = new List<HpiPoint>();
            foreach (XElement element in doc.Element("G20HPIs").Elements("CountryStatistics")) {
                points.Add(new HpiPoint() {
                    Country = element.Element("Country").Value,
                    Product = Convert.ToDouble(element.Element("Product").Value),
                    Hpi = Convert.ToDouble(element.Element("HPI").Value),
                });
            }
            return points;
        }
        #endregion #DataLoad
    }
}

Program.vb

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Threading.Tasks
Imports System.Windows.Forms

Namespace RangeColorizerExample
    Friend NotInheritable Class Program

        Private Sub New()
        End Sub

        ''' <summary>
        ''' The main entry point for the application.
        ''' </summary>
        <STAThread> _
        Shared Sub Main()
            Application.EnableVisualStyles()
            Application.SetCompatibleTextRenderingDefault(False)
            Application.Run(New Form1())
        End Sub
    End Class
End Namespace

Form1.vb

Imports System
Imports System.Collections.Generic
Imports System.Drawing
Imports System.Windows.Forms
Imports System.Xml.Linq
Imports DevExpress.XtraCharts

Namespace RangeColorizerExample
    Partial Public Class Form1
        Inherits Form

        Private Const filepath As String = "..//..//Data//HPI.xml"

        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
'            #Region "#BarSeries"
            ' Create and customize a bar series.
            Dim bubbleSeries As New Series() With {.DataSource = LoadData(filepath), .Colorizer = CreateColorizer(), .ArgumentDataMember = "Country", .ColorDataMember = "Hpi", .View = New SideBySideBarSeriesView()}
            bubbleSeries.ValueDataMembers.AddRange(New String() { "Product" })
'            #End Region ' #BarSeries

            ' Add the series to the ChartControl's Series collection.
            chartControl1.Series.Add(bubbleSeries)

            ' Show a title for the values axis.
            CType(chartControl1.Diagram, XYDiagram).AxisY.Title.Text = "GDP per capita, $"
            CType(chartControl1.Diagram, XYDiagram).AxisY.Title.Visibility = DevExpress.Utils.DefaultBoolean.True
        End Sub

        #Region "#RangeColorizer"
        ' Creates a range colorizer.
        Private Function CreateColorizer() As ChartColorizerBase
            Dim palette As New Palette("Custom")
            palette.Add(Color.FromArgb(255, 255, 90, 25), Color.FromArgb(255, 255, 90, 25))
            palette.Add(Color.FromArgb(255, 229, 227, 53), Color.FromArgb(255, 229, 227, 53))
            palette.Add(Color.FromArgb(255, 110, 201, 92), Color.FromArgb(255, 110, 201, 92))

            Dim colorizer As New RangeColorizer() With {.LegendItemPattern = "{V1} - {V2} HPI", .Palette = palette}
            colorizer.RangeStops.AddRange(New Double() { 22, 30, 38, 46, 54, 64 })
            Return colorizer
        End Function
        #End Region ' #RangeColorizer

        #Region "#DataLoad"
        Private Class HpiPoint
            Public Property Country() As String
            Public Property Product() As Double
            Public Property Hpi() As Double
        End Class

        ' Loads data from an XML data source.
        Private Shared Function LoadData(ByVal filepath As String) As List(Of HpiPoint)
            Dim doc As XDocument = XDocument.Load(filepath)
            Dim points As New List(Of HpiPoint)()
            For Each element As XElement In doc.Element("G20HPIs").Elements("CountryStatistics")
                points.Add(New HpiPoint() With {.Country = element.Element("Country").Value, .Product = Convert.ToDouble(element.Element("Product").Value), .Hpi = Convert.ToDouble(element.Element("HPI").Value)})
            Next element
            Return points
        End Function
        #End Region ' #DataLoad
    End Class
End Namespace