Heat Series Props

Name property

The name property is a string identifier that is normally used in tooltips and legends to display the data name, if this property is not set, then the library will generate a name for the series that by default is called "Series 1" when it is the first series in the series collection, "Series 2" when it is the second series in the series collection, "Series 3" when it is the third series in the series collection, and so on a series n will be named "Series n".

SeriesCollection = new ISeries[]
{
    new HeatSeriesProps<int>
    {
        Values = new []{ 2, 5, 4, 2, 6 },
        Name = "Income", // mark
        Stroke = null
    },
    new HeatSeriesProps<int>
    {
        Values = new []{ 3, 7, 2, 9, 4 },
        Name = "Outcome", // mark
        Stroke = null
    }
};

Values property

The Values property is of type IEnumerable<T>, this means that you can use any object that implements the IEnumerable<T> interface, such as Array, List<T> or ObservableCollection<T>, this property contains the data to plot, you can use any type as the generic argument (<T>) as soon as you let the library how to handle it, the library already knows how to handle multiple types, but you can register any type and teach the library how to handle any object in a chart, for more information please see the mappers article.

var series1 = new HeatSeriesProps<int>
{
    Values = new List<int> { 2, 1, 3 }
};

// == Update the chart when a value is added, removed or replaced  == // mark
// using ObservableCollections allows the chart to update
// every time you add a new element to the values collection
// (not needed in Blazor, it just... updates)
var series2 = new HeatSeriesProps<double>
{
    Values = new ObservableCollection<double> { 2, 1, 3 }
}
series2.add(4); // and the chart will animate the change!

// == Update the chart when a property in our collection changes  == // mark
// if the object implements INotifyPropertyChanged, then the chart will
// update automatically when a property changes, the library already provides
// many 'ready to go' objects such as the ObservableValue class.
var observableValue =  new ObservableValue(5);
var series3 = new HeatSeriesProps<ObservableValue>
{
    Values = new ObservableCollection<ObservableValue> { observableValue },
}
observableValue.Value = 9; // the chart will animate the change from 5 to 9!

// == Passing X and Y coordinates // mark 
// you can indicate both, X and Y using the Observable point class.
// or you could define your own object using mappers.
var series4 = new HeatSeriesProps<ObservablePoint>
{
    Values = new ObservableCollection<ObservablePoint> { new ObservablePoint(2, 6)}
}

// == Custom types and mappers == // mark
// finally you can also use your own object, take a look at the City class.
public class City 
{
    public string Name { get; set; }
    public double Population { get; set; }
}

// we must let the series know how to handle the city class.
// use the Mapping property to build a point from the city class
// you could also register the map globally.
// for more about global mappers info see:
// https://lvcharts.com/docs/eto/2.0.0-beta.710/Overview.Mappers
var citiesSeries = new HeatSeriesProps<City>
{
    Values = new City[]
    { 
        new City { Name = "Tokio", Population = 9 },
        new City { Name = "New York", Population = 11 },
        new City { Name = "Mexico City", Population = 10 },
    },
    Mapping = (city, point) =>
    {
        // this function will be called for every city in our data collection
        // in this case Tokio, New York and Mexico city
        // it takes the city and the point in the chart liveCharts built for the given city
        // you must map the coordinates to the point

        // use the Population property as the primary value (normally Y)
        point.PrimaryValue = (float)city.Population;

        // use the index of the city in our data collection as the secondary value
        // (normally X)
        point.SecondaryValue = point.Context.Index;
    }
};

Data labels

Data labels are labels for every point in a series, there are multiple properties to customize them, take a look at the following sample:

new HeatSeriesProps<double>
{
    DataLabelsSize = 20,
    DataLabelsPaint = new SolidColorPaint(SKColors.Blue),
    // all the available positions at:
    // https://lvcharts.com/api/2.0.0-beta.710/LiveChartsCore.Measure.DataLabelsPosition
    DataLabelsPosition = LiveChartsCore.Measure.DataLabelsPosition.Top,
    // The DataLabelsFormatter is a function 
    // that takes the current point as parameter
    // and returns a string.
    // in this case we returned the PrimaryValue property as currency
    DataLabelsFormatter = (point) => point.PrimaryValue.ToString("C2"),
    Values = new ObservableCollection<double> { 2, 1, 3, 5, 3, 4, 6 },
    Fill = null
}

The previous series will result in the following chart:

HeatMap property

This property defines the gradient colors, it is an array of LvcColor where the first element in the array is the the smallest or coldest and the last item in the array is the greatest or hottest, any value between the chart limits will be interpolated lineally to create a new color, you can add as many colors as you need to define the gradient.

using SkiaSharp;
using LiveChartsCore.SkiaSharpView;

Series = new ISeries[]
{
    new HeatSeries<WeightedPoint>
    {
        HeatMap = new[] // mark
        { // mark
            SKColors.Yellow.AsLvcColor(), // the first element is the "coldest" // mark
            SKColors.Black.AsLvcColor(), // mark
            SKColors.Blue.AsLvcColor() // the last element is the "hottest" // mark
        }, // mark
        Values = new ObservableCollection<WeightedPoint> { ... }
    }
};

ColorStops property

By default all the colors in the HeatMap property are separated equidistantly, you can define the distance between each color using the ColorStops property, it is an array of double, every item in the array must go from 0 to 1, where 0 is the "coldest" and 1 the "hottest", notice in the following sample how the black to blue gradient is only used in the last 10 percent of the gradient, while the yellow to black is used in the remaining 90% of the gradient.

using SkiaSharp;
using LiveChartsCore.SkiaSharpView;

Series = new ISeries[]
{
    new HeatSeries<WeightedPoint>
    {
        HeatMap = new[]
        {
            SKColors.Yellow.AsLvcColor(), // the first element is the "coldest" // mark
            SKColors.Black.AsLvcColor(), // mark
            SKColors.Blue.AsLvcColor() // the last element is the "hottest" // mark
        },
        ColorStops = new[] // mark
        { // mark
            0, // mark
            0.9, // mark
            1 // mark
        }, // mark
        Values = new ObservableCollection<WeightedPoint> { ... }
    }
};

PointPadding property

Defines the padding for every point in the series.

Series = new ISeries[]
{
    new HeatSeries<WeightedPoint>
    {
        PointPadding = new LiveChartsCore.Drawing.Common.Padding(20), // mark
        HeatMap = new[]
        {
            Color.FromArgb(255, 255, 241, 118), // the first element is the "coldest"
            Color.DarkSlateGray,
            Color.Blue // the last element is the "hottest"
        },
        Values = new ObservableCollection<WeightedPoint>
        {
            // Charles
            new WeightedPoint(0, 0, 150), // Jan
            new WeightedPoint(0, 1, 123), // Feb
            new WeightedPoint(0, 2, 310), // Mar
            new WeightedPoint(0, 3, 225), // Apr
            new WeightedPoint(0, 4, 473), // May
            new WeightedPoint(0, 5, 373), // Jun

            // Richard
            new WeightedPoint(1, 0, 432), // Jan
            new WeightedPoint(1, 1, 312), // Feb
            new WeightedPoint(1, 2, 135), // Mar
            new WeightedPoint(1, 3, 78), // Apr
            new WeightedPoint(1, 4, 124), // May
            new WeightedPoint(1, 5, 423), // Jun

            // Ana
            new WeightedPoint(2, 0, 543), // Jan
            new WeightedPoint(2, 1, 134), // Feb
            new WeightedPoint(2, 2, 524), // Mar
            new WeightedPoint(2, 3, 315), // Apr
            new WeightedPoint(2, 4, 145), // May
            new WeightedPoint(2, 5, 80), // Jun

            // Mari
            new WeightedPoint(3, 0, 90), // Jan
            new WeightedPoint(3, 1, 123), // Feb
            new WeightedPoint(3, 2, 70), // Mar
            new WeightedPoint(3, 3, 123), // Apr
            new WeightedPoint(3, 4, 432), // May
            new WeightedPoint(3, 5, 142), // Jun
        }
    }
};

XAxes = new ObservableCollection<Axis>
{
    new Axis
    {
        Labels = new [] { "Charles", "Richard", "Ana", "Mari" }
    }
};

YAxes = new ObservableCollection<Axis>
{
    new Axis
    {
        Labels = new [] { "Jan", "Feb", "Mar", "Apr", "May", "Jun" }
    }
};

Plotting custom types

You can teach LiveCharts to plot anything, imagine the case where we have an array of the City class defined bellow:

public class City
{
    public double Population { get; set; }
    public int Year { get; set; }
    public int CityId { get; set; }
}

You can register this type globally, this means that every time LiveCharts finds a City instance in a chart it will use the mapper we registered, global mappers are unique for a type, if you need to plot multiple properties then you should use local mappers.

// Ideally you should call this when your application starts
// If you need help to decide where to add this code
// please see the installation guide in this docs.

// in this case we have an array of the City class
// we need to compare the Population property of every city in our array

LiveCharts.Configure(config =>
    config
        .HasMap<City>((city, point) =>
        {
            // in this lambda function we take an instance of the City class (see city parameter)
            // and the point in the chart for that instance (see point parameter)
            // LiveCharts will call this method for every instance of our City class array,
            // now we need to populate the point coordinates from our City instance to our point

            point.PrimaryValue = city.CityId; // city id for the Y axis (primary)
            point.SecondaryValue = city.Year; // the year as the X axis (secondary)

            // finally the population as the tertiary value, for the case of a heat series
            // it could be also called the "Weighted axis", colors for every point will be
            // generated based on this value (Tertiary).
            point.TertiaryValue = (float)city.Population;
        })
        .HasMap<Foo>(...) // you can register more types here using our fluent syntax
        .HasMap<Bar>(...)
    );

Now we are ready to plot cities all over our application:

var cities = new[]
{
    new City { Population = 4.5, CityId = 0, Year = 2019 },
    new City { Population = 5.1, CityId = 0, Year = 2020 },
    new City { Population = 5.8, CityId = 0, Year = 2021 },
    new City { Population = 3.5, CityId = 1, Year = 2019 },
    new City { Population = 4, CityId = 1, Year = 2020 },
    new City { Population = 4.8, CityId = 1, Year = 2021 }
};

XAxes = new[]
{
    new Axis { Labels = new [] { "2019", "2020", "2021" } }
};

YAxes = new[]
{
    new Axis { Labels = new [] { "Tokyo", "Moscow" } }
};

Series = new[]
{
    new HeatSeries<City>
    {
        TooltipLabelFormatter = (point) => $"{YAxes[0].Labels[point.Model.CityId]} {point.Model.Year} {point.TertiaryValue}M",
        Values = cities
    }
};

Alternatively you could create a local mapper that will only work for a specific series, global mappers will be ignored when the series Mapping property is not null.

Series = new[]
{
    new HeatSeries<City>
    {
        TooltipLabelFormatter = (point) => $"{YAxes[0].Labels[point.Model.CityId]} {point.Model.Year} {point.TertiaryValue}M",
        Mapping = (city, point) =>
        {
            point.PrimaryValue = city.CityId;
            point.SecondaryValue = city.Year;
            point.TertiaryValue = (float)city.Population;
        },
        Values = cities
    }
};

ZIndex property

Indicates an order in the Z axis, this order controls which series is above or behind.

IsVisible property

Indicates if the series is visible in the user interface.

DataPadding

The data padding is the minimum distance from the edges of the series to the axis limits, it is of type System.Drawing.PointF both coordinates (X and Y) goes from 0 to 1, where 0 is nothing and 1 is the axis tick an axis tick is the separation between every label or separator (even if they are not visible).

If this property is not set, the library will set it according to the series type, take a look at the following samples:

new LineSeries<double>
{
    DataPadding = new System.Drawing.PointF(0, 0),
    Values = new ObservableCollection { 2, 1, 3, 5, 3, 4, 6 },
    GeometryStroke = null,
    GeometryFill = null,
    Fill = null
}

Produces the following result:

But you can remove the padding only from an axis, for example:

new LineSeries<double>
{
    DataPadding = new System.Drawing.PointF(0.5f, 0),
    Values = new ObservableCollection<double> { 2, 1, 3, 5, 3, 4, 6 },
    GeometryStroke = null,
    GeometryFill = null,
    Fill = null
}

Or you can increase the distance:

new LineSeries<double>
{
    DataPadding = new System.Drawing.PointF(2, 2),
    Values = new ObservableCollection<double> { 2, 1, 3, 5, 3, 4, 6 },
    GeometryStroke = null,
    GeometryFill = null,
    Fill = null
}