Live charts is an easy way to build useful charts, all charts are animated, they update every time you change your data, or when you rezise the chart, also since 0.5 we are working to support huge amounts of data, right now this is on test and only implemented in line chart, but in the included examples it is able to draw 1,000,000 points in a really short period of time.

• MVVM Charting, Support for WPF Binding, All charts update when data changes.
• Good looking, animated and easy to customize charts, you can practically change all properties.
• Easy to maintain and create new charts, as you can see in the source code, some charts have almost no code.
• Supports zooming and panning.
• MIT License, permissive licensing.

This is the logic you use in every chart, there are just some litle properties or rules that change from each type of chart. Use the syntax that better fits your needs.

Useful when you just a chart now! with static number of series and values.

XAML see full file

 <lvc:LineChart>
    <lvc:LineChart.Series>
      <lvc:LineSeries Title="Maria" Values="20, 40, 45, 60, 55, 60, 65, 70" />
      <lvc:LineSeries Title="John" Values="30, 35, 43, 68, 65 ,70, 55, 60" />
    </lvc:LineChart.Series>
</lvc:LineChart>

Useful to keep your view models simple and when you have a static number of series.

XAML see full file

<lvc:LineChart>
  <lvc:LineChart.Series>
    <lvc:LineSeries Title="Series 1" Values="{Binding ViewModel.Series1}" />
    <lvc:LineSeries Title="Series 2" Values="{Binding ViewModel.Series2}" />
  </lvc:LineChart.Series>
</lvc:LineChart>

CodeBehind see full file

view model

public class BindingLineViewModel
{
  public ChartValues<double> Series1 { get; set; }
  public ChartValues<double> Series2 { get; set; }
}

view constructor

ViewModel = new BindedLinesViewModel
{
  Series1 = new ChartValues<double> {15, 25, 29, 32, 16, 10},
  Series2 = new ChartValues<double> {12, 10, 9, 8, 5, -10 }
};

DataContext = this;

Useful when you need to change the number of series and the values of each serie, in this example also we are not ploting just a column of dobule, we are ploting ChartValues<SalesData> then we specify wich property to use for X and Y.

XAML see full file

<lvc:LineChart Series="{Binding Sales.SalesmenSeries}" ></lvc:LineChart>

Code Behind see full file

view model

public class SalesViewModel
{
  public SalesViewModel()
  {
    //Specify a setup for SeriesCollection class, so LiveCharts know which property use as Y, 
    //you can also specify X, but in this case, It will use a zero based index (default config)
    SalesmenSeries = new SeriesCollection (new SeriesConfiguration<SalesData>().Y(data => data.ItemsSold))
    {
      new LineSeries
      {
        Title = "Charles",
        Values = new ChartValues<SalesData> { new SalesData {ItemsSold = 15, ... }, ... }
      },
      new LineSeries
      {
        Title = "Frida",
        Values = new ChartValues<SalesData> { new SalesData {ItemsSold = 25, ...  } ... }
      },
      
      // This series is ploting another type, you can also override configuration only for a Series
      // to map to another property or Type
      new LineSeries (new SeriesConfiguration<AverageSalesData>().Y(data => data.AverageItemsSold))
      {
        Title = "Average Series",
        Values = new ChartValues<AverageSalesData> { new AverageSalesData {AverageItemsSold = 22} ... }
      }
    }
  }

  public SeriesCollection SalesmenSeries { get; set; }

}

view contructor

Sales = new SalesViewModel();
DataContext = this;

Chart.Series.Add(new LineSeries
{
    Title = "Charles",
    Values = new ChartValues<double> { 5, 8, 1, 9}
});
Chart.Series.Add(new LineSeries
{
    Title = "Maria",
    Values = new ChartValues<double> { 4, 1, 2, 7}
});

1. Install package from Nuget Install-Package LiveCharts

2. Add name space to your XAML

xmlns:lvc="clr-namespace:lvc;assembly=LiveCharts

3. Thats it. You are ready.

Note: Since this is a pre-release version, some names, properties or namespaces might vary, we highly recommend to clone this repo and see included examples since they all are always up to date.

Or take a look to this exmaples too

• Plot Types not Values! (Mvvm Recommended method) By default series values are double, but live charts allows you to plot any type you need, in this case we plot a collection of SalesData class. click on the buttons bellow to see how live charts track your data changes, also chart will follow if you resize window, notice this chart implements a custom tooltip to display Rentability property too.
• In line Charting when you only need to plot easy and now!
• Partial Binding if you have a static number of series and need to change their Values this might help you, click on the buttons bellow to see how charts update automatically with their data
• Mvvm Lazy Data this example shows a dynamic number of charts and dynamic values, click on the buttons of each chart to see how the change, click add new chart to add a new one.
• Zoomable Chart this examples shows how easly it is to support zooming and panning in a chart.
• Add Ui Elements you can also add any UI element to a chart.
• Custom Style this is an example of how to change the default style of live charts
  • See Custom Tooltip too

• Star this repo
• Try it
• Report Issues and Improvements
• Pull request are well received

Try Live Charts Wiki, or cloning this repo, test project includes a lot of examples, copy and paste this link in your browser for a cloning shortcut

git-client://clone?repo=https%3A%2F%2Fgithub.com%2Fbeto-rodriguez%2FLive-Charts