### Install LiveChartsCore.SkiaSharpView.WinUI from NuGet Source: https://livecharts.dev/docs/WinUi/2.0.4/Overview.Installation Install the LiveChartsCore.SkiaSharpView.WinUI package version 2.0.4 from NuGet using either a PackageReference in the project file or the dotnet CLI command. ```xml ``` ```bash dotnet add package LiveChartsCore.SkiaSharpView.WinUI --version 2.0.4 ``` -------------------------------- ### Install LiveChartsCore.SkiaSharpView.WPF from NuGet Source: https://livecharts.dev/docs/wpf/2.0.4/Overview.Installation Install the LiveCharts WPF package from NuGet using either the PackageReference XML element or the dotnet CLI command. The dotnet CLI command adds the package with the specified version. ```xml ``` ```bash dotnet add package LiveChartsCore.SkiaSharpView.WPF --version 2.0.4 ``` -------------------------------- ### Install LiveCharts via NuGet PackageReference Source: https://livecharts.dev/docs/Avalonia/2.0.4/Overview.Installation Add this to your project file to install the LiveCharts Avalonia package. ```xml ``` -------------------------------- ### Install via PackageReference Source: https://livecharts.dev/docs/Eto/2.0.4/Overview.Installation Add this PackageReference to your project file to install the LiveCharts Eto package. ```xml ``` -------------------------------- ### Install LiveCharts from NuGet Source: https://livecharts.dev/docs/WinForms/2.0.4/Overview.Installation Install the LiveChartsCore.SkiaSharpView.WinForms package version 2.0.4 from NuGet using either the PackageReference XML element or the dotnet CLI command. ```xml ``` ```bash dotnet add package LiveChartsCore.SkiaSharpView.WinForms --version 2.0.4 ``` -------------------------------- ### Install LiveCharts via NuGet PackageReference Source: https://livecharts.dev/docs/UnoWinUi/2.0.4/Overview.Installation Add the LiveChartsCore.SkiaSharpView.Uno.WinUI package to your project file. ```xml ``` -------------------------------- ### Installing LiveCharts SkiaSharp Package Source: https://livecharts.dev/docs/WinForms/2.0.4/samples.general.chartToImage Required NuGet package installation for rendering charts as images without a UI framework. ```xml ``` ```bash dotnet add package LiveChartsCore.SkiaSharpView ``` -------------------------------- ### Install LiveCharts Blazor package from NuGet Source: https://livecharts.dev/docs/Blazor/2.0.4/Overview.Installation Install the LiveChartsCore.SkiaSharpView.Blazor package from NuGet using either the PackageReference XML element or the dotnet CLI command. ```xml ``` ```bash dotnet add package LiveChartsCore.SkiaSharpView.Blazor --version 2.0.4 ``` -------------------------------- ### Install LiveCharts via PackageReference Source: https://livecharts.dev/docs/winforms/2.0.4/Overview.Installation Add the LiveChartsCore.SkiaSharpView.WinForms package to your project using the PackageReference format. ```xml ``` -------------------------------- ### Install via dotnet CLI Source: https://livecharts.dev/docs/Eto/2.0.4/Overview.Installation Use the dotnet CLI to add the LiveCharts Eto package to your project. ```bash dotnet add package LiveChartsCore.SkiaSharpView.Eto --version 2.0.4 ``` -------------------------------- ### ColumnSeries.Padding Source: https://livecharts.dev/docs/unowinui/2.0.4/CartesianChart.Column%20Series%20properties Gets or sets the padding for each bar in the series. The example shows two ColumnSeries with Padding set to 5. ```APIDOC ## ColumnSeries.Padding ### Description Gets or sets the padding for each bar in the series. ### Property `Padding` (numeric) - The padding value for each bar. ### Example ```csharp Series = new ISeries[] { new ColumnSeries { Values = new [] { 4, 4, 7, 2, 8 }, Padding = 5 }, new ColumnSeries { Values = new [] { 2, 3,1, 4, 6 }, Padding = 5 } }; ``` ``` -------------------------------- ### Install LiveCharts via dotnet CLI Source: https://livecharts.dev/docs/UnoWinUi/2.0.4/Overview.Installation Use the dotnet CLI to add the LiveCharts package to your project. ```bash dotnet add package LiveChartsCore.SkiaSharpView.Uno.WinUI --version 2.0.4 ``` -------------------------------- ### StackedColumnSeries Padding Property Source: https://livecharts.dev/docs/WPF/2.0.4/CartesianChart.Stacked%20column%20series%20properties Gets or sets the padding for each bar in the series. The example shows setting Padding to 5 for two stacked column series. ```APIDOC ## StackedColumnSeries.Padding ### Description Gets or sets the padding for each bar in the series. ### Property - **Padding** (int) - The padding value for each bar. ### Example ```csharp Series = new ISeries[] { new StackedColumnSeries { Values = new [] { 4, 4, 7, 2, 8 }, Padding = 5 }, new StackedColumnSeries { Values = new [] { 2, 3,1, 4, 6 }, Padding = 5 } }; ``` ``` -------------------------------- ### Install LiveChartsCore.SkiaSharpView.Maui via dotnet CLI Source: https://livecharts.dev/docs/Maui/2.0.4/Overview.Installation Use the dotnet CLI to add the LiveChartsCore.SkiaSharpView.Maui package version 2.0.4 to your project. ```bash dotnet add package LiveChartsCore.SkiaSharpView.Maui --version 2.0.4 ``` -------------------------------- ### Create RowSeries with Data Labels in WinForms Source: https://livecharts.dev/docs/winforms/2.0.4/samples.bars.rowsWithLabels This example shows how to define multiple RowSeries with different DataLabelsPosition settings (End, Middle, Start) and add them to a CartesianChart control. ```csharp using System.Windows.Forms; using LiveChartsCore; using LiveChartsCore.SkiaSharpView; using LiveChartsCore.SkiaSharpView.WinForms; namespace WinFormsSample.Bars.RowsWithLabels; public partial class View : UserControl { public View() { InitializeComponent(); Size = new System.Drawing.Size(50, 50); var values1 = new int[] { 8, -3, 4 }; var values2 = new int[] { 4, -6, 5 }; var values3 = new int[] { 6, -9, 3 }; var series = new ISeries[] { new RowSeries { Values = values1, DataLabelsPosition = LiveChartsCore.Measure.DataLabelsPosition.End, DataLabelsSize = 14, ShowDataLabels = true }, new RowSeries { Values = values2, DataLabelsPosition = LiveChartsCore.Measure.DataLabelsPosition.Middle, DataLabelsSize = 14, ShowDataLabels = true }, new RowSeries { Values = values3, DataLabelsPosition = LiveChartsCore.Measure.DataLabelsPosition.Start, DataLabelsSize = 14, ShowDataLabels = true } }; var cartesianChart = new CartesianChart { Series = series, Location = new System.Drawing.Point(0, 0), Size = new System.Drawing.Size(50, 50), Anchor = AnchorStyles.Left | AnchorStyles.Right | AnchorStyles.Top | AnchorStyles.Bottom }; Controls.Add(cartesianChart); } } ``` -------------------------------- ### Implement World GeoMap in Blazor Source: https://livecharts.dev/docs/Blazor/2.0.4/samples.maps.world This example shows the basic setup of a GeoMap component with Mercator projection and a background task to simulate real-time data updates for heat lands. ```razor @page "/Maps/World" @using LiveChartsCore.SkiaSharpView.Blazor @using LiveChartsCore.Geo; @using LiveChartsCore.SkiaSharpView; @using LiveChartsCore.SkiaSharpView.Drawing.Geometries @code { public GeoMap Chart; private HeatLand[] lands = new HeatLand[] { new() { Name = "bra", Value = 13 }, new() { Name = "mex", Value = 10 }, new() { Name = "usa", Value = 15 }, new() { Name = "can", Value = 8 }, new() { Name = "ind", Value = 12 }, new() { Name = "deu", Value = 13 }, new() { Name= "jpn", Value = 15 }, new() { Name = "chn", Value = 14 }, new() { Name = "rus", Value = 11 }, new() { Name = "fra", Value = 8 }, new() { Name = "esp", Value = 7 }, new() { Name = "kor", Value = 10 }, new() { Name = "zaf", Value = 12 }, new() { Name = "are", Value = 13 } }; private HeatLandSeries[] series; protected override void OnInitialized() { series = new HeatLandSeries[] { new HeatLandSeries { Lands = lands } }; _ = DoRandomChanges(series[0]); } private async Task DoRandomChanges(HeatLandSeries series) { var r = new Random(); await Task.Delay(1000); while (true) { foreach (var shape in series.Lands ?? Enumerable.Empty()) { shape.Value = r.Next(0, 20); } await Task.Delay(500); } } } ``` -------------------------------- ### Creating Line Sections in WinForms Source: https://livecharts.dev/docs/winforms/2.0.4/samples.general.sections This example demonstrates creating line-based sections by setting equal start and end coordinates (Yi and Yj) and using default values for the perpendicular axis. ```csharp using System.Windows.Forms; using LiveChartsCore.SkiaSharpView.WinForms; using LiveChartsCore.SkiaSharpView; using LiveChartsCore.SkiaSharpView.Painting; using LiveChartsCore; using LiveChartsCore.Defaults; using SkiaSharp; using ViewModelsSamples.General.Sections2; namespace WinFormsSample.General.Sections2; public partial class View : UserControl { public View() { InitializeComponent(); Size = new System.Drawing.Size(50, 50); var values = new ObservablePoint[] { new(2.2, 5.4), new(4.5, 2.5), new(4.2, 7.4), new(6.4, 9.9), new(4.2, 9.2), new(5.8, 3.5), new(7.3, 5.8), new(8.9, 3.9), new(6.1, 4.6), new(9.4, 7.7), new(8.4, 8.5), new(3.6, 9.6), new(4.4, 6.3), new(5.8, 4.8), new(6.9, 3.4), new(7.6, 1.8), new(8.3, 8.3), new(9.9, 5.2), new(8.1, 4.7), new(7.4, 3.9), new(6.8, 2.3) }; var series = new ISeries[] { new ScatterSeries { Values = values, GeometrySize = 10, Stroke = new SolidColorPaint(SKColor.Parse("#00f")), Fill = null } }; var sections = new RectangularSection[] { new() { Yi = 8, Yj = 8, Stroke = new SolidColorPaint { Color = SKColor.Parse("#F00"), StrokeThickness = 3, PathEffect = new LiveChartsCore.SkiaSharpView.Painting.Effects.DashEffect([6, 6]) } }, new() { Xi = 6, Xj = 8, Fill = new SolidColorPaint(SKColor.Parse("#300000FF")) } }; var cartesianChart = new CartesianChart { Series = series, Sections = sections, Location = new System.Drawing.Point(0, 0), Size = new System.Drawing.Size(50, 50), Anchor = AnchorStyles.Left | AnchorStyles.Right | AnchorStyles.Top | AnchorStyles.Bottom }; Controls.Add(cartesianChart); } } ``` -------------------------------- ### PieChart InitialRotation Example Source: https://livecharts.dev/docs/Avalonia/2.0.4/PieChart.Pie%20chart%20control Sets the InitialRotation property to -90 degrees, changing the start angle of the first slice. The rotation change is animated automatically based on chart animation settings. ```xaml ``` -------------------------------- ### Install LiveChartsCore.SkiaSharpView.WinUI via dotnet CLI Source: https://livecharts.dev/docs/winui/2.0.4/Overview.Installation Use the dotnet CLI to add the LiveChartsCore.SkiaSharpView.WinUI package version 2.0.4 to your project. ```bash dotnet add package LiveChartsCore.SkiaSharpView.WinUI --version 2.0.4 ``` -------------------------------- ### Read initial visible bounds using UpdateStarted Source: https://livecharts.dev/docs/Blazor/2.0.4/CartesianChart.Axes%20properties Uses the Chart.UpdateStarted event to read the initial VisibleDataBounds after the chart is measured. This example is WPF-specific, using FindName to get the chart control. ```csharp using System.Linq; // get the control in the UI var chartControl = (CartesianChart)FindName("cartesianChart"); // notice this code is WPF specific chartControl.UpdateStarted += (LiveChartsCore.Kernel.Sketches.IChartView chart) => { var x = chartControl.XAxes.First(); var minLimit = x.VisibleDataBounds.Min; var maxLimit = x.VisibleDataBounds.Max; }; ``` -------------------------------- ### Install LiveChartsCore.SkiaSharpView.WPF via dotnet CLI Source: https://livecharts.dev/docs/WPF/2.0.4/Overview.Installation Adds the LiveChartsCore.SkiaSharpView.WPF package version 2.0.4 using the dotnet CLI. This is an alternative to the PackageReference approach. ```bash dotnet add package LiveChartsCore.SkiaSharpView.WPF --version 2.0.4 ``` -------------------------------- ### Creating Line Sections with RectangularSection Source: https://livecharts.dev/docs/blazor/2.0.4/samples.general.sections This example demonstrates creating line-based sections by setting identical start and end coordinates (e.g., Yi and Yj). It also shows how to apply a dashed stroke effect to the section. ```razor @page "/General/Sections2" @using LiveChartsCore.SkiaSharpView.Blazor @using LiveChartsCore; @using LiveChartsCore.Defaults; @using LiveChartsCore.SkiaSharpView; @using LiveChartsCore.SkiaSharpView.Painting; @using SkiaSharp; @code { private static ObservablePoint[] values = new ObservablePoint[] { new ObservablePoint(2.2, 5.4), new ObservablePoint(4.5, 2.5), new ObservablePoint(4.2, 7.4), new ObservablePoint(6.4, 9.9), new ObservablePoint(4.2, 9.2), new ObservablePoint(5.8, 3.5), new ObservablePoint(7.3, 5.8), new ObservablePoint(8.9, 3.9), new ObservablePoint(6.1, 4.6), new ObservablePoint(9.4, 7.7), new ObservablePoint(8.4, 8.5), new ObservablePoint(3.6, 9.6), new ObservablePoint(4.4, 6.3), new ObservablePoint(5.8, 4.8), new ObservablePoint(6.9, 3.4), new ObservablePoint(7.6, 1.8), new ObservablePoint(8.3, 8.3), new ObservablePoint(9.9, 5.2), new ObservablePoint(8.1, 4.7), new ObservablePoint(7.4, 3.9), new ObservablePoint(6.8, 2.3) }; private ISeries[] series = new ISeries[] { new ScatterSeries { Values = values, GeometrySize = 10, Stroke = new SolidColorPaint(SKColor.Parse("#00f")), Fill = null } }; private RectangularSection[] sections = new RectangularSection[] { new RectangularSection { Yi = 8, Yj = 8, Stroke = new SolidColorPaint { Color = SKColor.Parse("#F00"), StrokeThickness = 3, PathEffect = new LiveChartsCore.SkiaSharpView.Painting.Effects.DashEffect(new float[] { 6, 6 }) } }, new RectangularSection { Xi = 6, Xj = 8, Fill = new SolidColorPaint(SKColor.Parse("#300000FF")) } }; } ``` -------------------------------- ### Install LiveCharts via dotnet CLI Source: https://livecharts.dev/docs/winforms/2.0.4/Overview.Installation Add the LiveChartsCore.SkiaSharpView.WinForms package to your project using the dotnet CLI. ```bash dotnet add package LiveChartsCore.SkiaSharpView.WinForms --version 2.0.4 ``` -------------------------------- ### Install LiveCharts via dotnet CLI Source: https://livecharts.dev/docs/Avalonia/2.0.4/Overview.Installation Run this command in your terminal to add the LiveCharts Avalonia package. ```bash dotnet add package LiveChartsCore.SkiaSharpView.Avalonia --version 2.0.4 ``` -------------------------------- ### View class: Set up CartesianChart with MatchAxesScreenDataRatio Source: https://livecharts.dev/docs/Eto/2.0.4/samples.axes.matchScale Creates a Panel containing a CartesianChart. Sets MatchAxesScreenDataRatio to true so both axes use the same pixels per data unit. Configures axes with MinStep and ForceStepToMin to highlight the equal scaling, and disables tooltip. ```csharp using System; using Eto.Forms; using LiveChartsCore; using LiveChartsCore.Defaults; using LiveChartsCore.SkiaSharpView; using LiveChartsCore.SkiaSharpView.Eto; using LiveChartsCore.SkiaSharpView.Painting; using SkiaSharp; namespace EtoFormsSample.Axes.MatchScale; public class View : Panel { private readonly CartesianChart cartesianChart; public View() { BackgroundColor = new Eto.Drawing.Color(60, 60, 60); var values = new ObservablePoint[1001]; var fx = LiveChartsCore.EasingFunctions.BounceInOut; for (var i = 0; i < 1001; i++) { var x = i / 1000f; var y = fx(x); values[i] = new ObservablePoint(x - 0.5, y - 0.5); } var series = new ISeries[] { new LineSeries { Values = values, Stroke = new SolidColorPaint(new SKColor(33, 150, 243, 255), 4), // DeepSkyBlue Fill = null, GeometryStroke = null, GeometryFill = null } }; var separatorColor = new SKColor(119, 148, 180, 100); // #64b4b4b4 with alpha 100 // we are forcing the step to 0.1 to highlight that // both axes take the same amount of pixels per unit of data, // but in a real scenario the MinStep is not necessary var xAxis = new Axis { Name = "XAxis", SeparatorsPaint = new SolidColorPaint(separatorColor), MinStep = 0.1, ForceStepToMin = true }; var yAxis = new Axis { Name = "YAxis", SeparatorsPaint = new SolidColorPaint(separatorColor), MinStep = 0.1, ForceStepToMin = true }; var frame = new DrawMarginFrame { Stroke = new SolidColorPaint(separatorColor, 2) }; cartesianChart = new CartesianChart { Series = series, XAxes = new[] { xAxis }, YAxes = new[] { yAxis }, DrawMarginFrame = frame, MatchAxesScreenDataRatio = true, ZoomMode = LiveChartsCore.Measure.ZoomAndPanMode.Both, TooltipPosition = LiveChartsCore.Measure.TooltipPosition.Hidden }; Content = cartesianChart; } } ``` -------------------------------- ### Chart.Series and Series.Values Change Detection Examples Source: https://livecharts.dev/docs/Avalonia/2.0.4/Overview.How%20it%20works Examples demonstrating how different collection types and property implementations affect automatic chart updates. ```csharp // CHART.SERIES // in this case, the chart will not fire an update // since List.Add() is not invoking INotifyCollectionChanged.CollectionChanged event myChart.Series = new List(); myChart.Series.Add(new LineSeries() { Values = new []{ 1, 2, 3} }); // in this case it will update the chart // since the ObservableCollection class provided by .Net // already implements the INotifyCollectionChanged interface myChart.Series = new ObservableCollection(); myChart.Series.Add(new LineSeries() { Values = new []{ 1, 2, 3} }); // for both previous cases // the LineSeries class, already implements INotifyPropertyChanged // this means that updating any property in the series will redraw the chart. myChart.Series[0].Values = new []{ 4, 5, 6}; // this will fire an update // SERIES.VALUES // the following sample will not fire an update // since the City class does not implements INotifyPropertyChanged public class City { public double Population { get; set; } } var seriesCollection = new List(); var lineSeries = new LineSeries { Values = new List { new City { Population = 10 }, new City { Population = 20 } } }; lineSeries.Values[0].Population = 20; // will NOT update the chart myChart.Series = seriesCollection; // finally the next sample will update the chart automatically // since the City class implements INotifyPropertyChanged public class City : INotifyPropertyChanged { private double? population; public double Population { get => population; set { population = value; OnPropertyChanged(); } } protected virtual void OnPropertyChanged([CallerMemberName] string? propertyName = null) { PropertyChanged?.Invoke(propertyName, new PropertyChangedEventArgs(propertyName)); } } var seriesCollection = new List(); var lineSeries = new LineSeries { Values = new List { new City { Population = 10 }, new City { Population = 20 } } }; lineSeries.Values[0].Population = 20; // will UPDATE the chart myChart.Series = seriesCollection; // the library already provides many ready to use objects that will update the chart automatically // for example, the ObservableValue class // https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/LiveChartsCore/Defaults/ObservableValue.cs ``` -------------------------------- ### Implement theme-aware visual elements Source: https://livecharts.dev/docs/Avalonia/2.0.4/samples.general.visualElements Illustrates how to apply different styles based on the application theme, specifically detecting dark and light variants on supported platforms like Avalonia, Maui, Uno, and WinUI. ```csharp using LiveChartsCore; using LiveChartsCore.SkiaSharpView.Drawing.Geometries; using LiveChartsCore.SkiaSharpView.Painting; using LiveChartsCore.Themes; using LiveChartsCore.VisualElements; using SkiaSharp; namespace ViewModelsSamples.General.VisualElements; public class ThemedVisual : Visual { private object _themeId = new(); private static bool _isThemeRegistered; protected override RectangleGeometry DrawnElement { get; } = new RectangleGeometry(); protected override void Measure(Chart chart) { if (!_isThemeRegistered) RegisterTheme(); ApplyTheme(chart.GetTheme()); DrawnElement.X = 600; DrawnElement.Y = 100; DrawnElement.Width = 40; DrawnElement.Height = 40; } private void ApplyTheme(Theme theme) { if (theme.ThemeId == _themeId) return; theme.ApplyStyleTo(this); _themeId = theme.ThemeId; } private void RegisterTheme() { // now lets define the default style for the visual // ideally you should do this in the application startup var theme = LiveCharts.DefaultSettings.GetTheme(); theme.HasRuleFor(visual => { visual.DrawnElement.Fill = theme.IsDark ? new SolidColorPaint(SKColors.White) : new SolidColorPaint(SKColors.Black); }); _isThemeRegistered = true; } } ``` -------------------------------- ### DateTimeScaled axes example for Eto.Forms Source: https://livecharts.dev/docs/Eto/2.0.4/samples.axes.dateTimeScaled The example creates a Cartesian chart with a DateTimeAxis, using a day unit and a custom date formatter to display the month and day. ```C# using System; using Eto.Forms; using LiveChartsCore; using LiveChartsCore.Defaults; using LiveChartsCore.SkiaSharpView; using LiveChartsCore.SkiaSharpView.Eto; namespace EtoFormsSample.Axes.DateTimeScaled; public class View : Panel { private readonly CartesianChart cartesianChart; public View() { var values = new DateTimePoint[] { new() { DateTime = new DateTime(2021, 1, 1), Value = 3 }, new() { DateTime = new DateTime(2021, 1, 2), Value = 6 }, new() { DateTime = new DateTime(2021, 1, 3), Value = 5 }, new() { DateTime = new DateTime(2021, 1, 4), Value = 3 }, new() { DateTime = new DateTime(2021, 1, 5), Value = 5 }, new() { DateTime = new DateTime(2021, 1, 6), Value = 8 }, new() { DateTime = new DateTime(2021, 1, 7), Value = 6 } }; static string Formatter(DateTime date) => date.ToString("MMMM dd"); var series = new ISeries[] { new ColumnSeries { Values = values } }; var xAxis = new DateTimeAxis(TimeSpan.FromDays(1), Formatter); cartesianChart = new CartesianChart { Series = series, XAxes = [xAxis], }; Content = cartesianChart; } } ``` -------------------------------- ### Basic Step Line Chart Implementation Source: https://livecharts.dev/docs/Eto/2.0.4/samples.steplines.basic This example demonstrates how to define a StepLineSeries with a set of double values and add it to a CartesianChart within an Eto.Forms Panel. ```csharp using Eto.Forms; using LiveChartsCore; using LiveChartsCore.SkiaSharpView; using LiveChartsCore.SkiaSharpView.Eto; using LiveChartsCore.SkiaSharpView.Painting; using SkiaSharp; using LiveChartsCore.SkiaSharpView.VisualElements; using LiveChartsCore.SkiaSharpView.Drawing.Geometries; namespace EtoFormsSample.StepLines.Basic; public class View : Panel { public View() { var values = new double[] { 2, 1, 3, 4, 3, 4, 6 }; var series = new ISeries[] { new StepLineSeries { Values = values, Fill = null, GeometrySize = 20 } }; var title = new DrawnLabelVisual( new LabelGeometry { Text = "My chart title", Paint = new SolidColorPaint(SKColor.Parse("#303030")), TextSize = 25, Padding = new LiveChartsCore.Drawing.Padding(15) }); var cartesianChart = new CartesianChart { Series = series, Title = title }; Content = cartesianChart; } } ```