Click here to Skip to main content
15,867,488 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I'm using C# WPF in Visual Studio with .NET Framework 4.7.2 with SQL Server 2019 Database, and using LiveChart


What I want

I'm looking for easy and good tool for chart in WPF to control these things :

https://learn.microsoft.com/answers/storage/attachments/271685-simulate.png[^]
Change font and style color of chart

Show label on top of column's chart

change text form of numbers like this 15000 => 15,000


What I have tried:

https://learn.microsoft.com/answers/storage/attachments/271732-untitled.jpg[^]

My Full source code with table script :
https://mega.nz/file/c4RH1JaJ#0CwjWU_qgh8YoVXZVGh-fjkguCqE_rd7KH8rF7LhkD4

<a href="https://mega.nz/file/c4RH1JaJ#0CwjWU_qgh8YoVXZVGh-fjkguCqE_rd7KH8rF7LhkD4">Source Coode</a>

How can I do these things that I need? I was really confused between the tools

is there anything better than which be easy to do this ?
Posted
Updated 17-Dec-22 11:43am

1 solution

LiveCharts - LiveCharts2[^] is very simple to use. The documentation is very good with code samples given.

From their documentation, ref: samples.bars.withBackground - LiveCharts2[^]

1. ViewModel
C#
using CommunityToolkit.Mvvm.ComponentModel;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Painting;
using SkiaSharp;

namespace ViewModelsSamples.Bars.WithBackground;

[ObservableObject]
public partial class ViewModel
{
    public ISeries[] Series { get; set; } =
    {
        new ColumnSeries<double>
        {
            IsHoverable = false, // disables the series from the tooltips 
            Values = new double[] { 10, 10, 10, 10, 10, 10, 10 },
            Stroke = null,
            Fill = new SolidColorPaint(new SKColor(30, 30, 30, 30)),
            IgnoresBarPosition = true
        },
        new ColumnSeries<double>
        {
            Values = new double[] { 3, 10, 5, 3, 7, 3, 8 },
            Stroke = null,
            Fill = new SolidColorPaint(SKColors.CornflowerBlue),
            IgnoresBarPosition = true
        }
    };

    public Axis[] YAxes { get; set; } =
    {
        new Axis { MinLimit = 0, MaxLimit = 10 }
    };
}


2. USerControl:
XML
<UserControl x:Class="WPFSample.Bars.WithBackground.View"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"
             xmlns:vms="clr-namespace:ViewModelsSamples.Bars.WithBackground;assembly=ViewModelsSamples">
    <UserControl.DataContext>
        <vms:ViewModel/>
    </UserControl.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <lvc:CartesianChart Series="{Binding Series}" YAxes="{Binding YAxes}"></lvc:CartesianChart>
    </Grid>
</UserControl>

If you are stuck with implementing the above code, download their repo and there are WPF (and others) samples that you can simply run, including bar charts: LiveCharts2 - Github[^]

[UPDATE]
Here is an updated version of the code above bound to the code behind:

1. Code Behind:
C#
using CommunityToolkit.Mvvm.ComponentModel;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Painting;
using SkiaSharp;
using System.Windows;

namespace WpfLiveCharts2CodeBehind;

[ObservableObject]
public partial class MainWindow : Window
{
    public MainWindow() => InitializeComponent();

    public ISeries[] Series { get; set; } =
    {
        new ColumnSeries<double>
        {
            IsHoverable = false, // disables the series from the tooltips 
            Values = new double[] { 10, 10, 10, 10, 10, 10, 10 },
            Stroke = null,
            Fill = new SolidColorPaint(new SKColor(30, 30, 30, 30)),
            IgnoresBarPosition = true
        },
        new ColumnSeries<double>
        {
            Values = new double[] { 3, 10, 5, 3, 7, 3, 8 },
            Stroke = null,
            Fill = new SolidColorPaint(SKColors.CornflowerBlue),
            IgnoresBarPosition = true
        }
    };

    public Axis[] YAxes { get; set; } =
    {
        new Axis { MinLimit = 0, MaxLimit = 10 }
    };
}

2. The Window:
XML
<Window x:Class="WpfLiveCharts2CodeBehind.MainWindow"
        x:Name="Window"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfLiveCharts2CodeBehind"
        xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Grid DataContext="{Binding ElementName=Window}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <lvc:CartesianChart Series="{Binding Series}"
                            YAxes="{Binding YAxes}"
                            />
    </Grid>

</Window>

Breakdown:
1. Give the Window a name:
XML
<Window ... x:Name="Window" ...>

2. DataBind to the Window's Name:
XML
DataContext="{Binding ElementName=Window}"
 
Share this answer
 
v2
Comments
mojtabahakimian 17-Dec-22 17:54pm    
thank you so much , but May I ask you to give me a line for full tutorial about this ↑ or checking my code in above link I put for download ?

because I'm using code behind not MVVM
Graeme_Grant 17-Dec-22 18:10pm    
it uses WPF Data Binding[^]. This is no different to code behind, you just need to point the DataContext[^] to the code behind and not a ViewModel.
Graeme_Grant 17-Dec-22 18:42pm    
Updated the answer with a new sample showing how to data bind to the code behind.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900