How to set legends of SfChart LineChart
Hi, I have the following codes:
OIWAP_OIWAV.cs:
namespace TradingApp
{
class OIWAP_OIWAV
{
public DateTime Date { get; set; }
public string? Name1 { get; set; }
public string? Name2 { get; set; }
public double OIWAP1 { get; set; }
public double OIWAP2 { get; set; }
}
}
CorrChartWindow.xaml:
<Window x:Class="TradingApp.CorrChartWindow"
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:TradingApp"
xmlns:chart="http://schemas.syncfusion.com/wpf" xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
mc:Ignorable="d"
Title="CorrChartWindow" Height="450" Width="800">
<Window.DataContext>
<local:CorrChartViewModel/>
</Window.DataContext>
<Grid>
<chart:SfChart>
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartZoomPanBehavior EnableMouseWheelZooming="True" EnableSelectionZooming="True" EnablePanning="True" ResetOnDoubleTap="True">
</syncfusion:ChartZoomPanBehavior>
</syncfusion:SfChart.Behaviors>
<chart:SfChart.PrimaryAxis>
<chart:DateTimeAxis x:Name="XAxis1" LabelFormat="yyyy MM dd"/>
</chart:SfChart.PrimaryAxis>
<chart:SfChart.SecondaryAxis>
<chart:NumericalAxis Header="Price"/>
</chart:SfChart.SecondaryAxis>
<chart:LineSeries ShowTooltip="True" ItemsSource="{Binding OIWAP_OIWAVs}" XBindingPath="Date" YBindingPath="OIWAP1"/>
<chart:LineSeries ShowTooltip="True" ItemsSource="{Binding OIWAP_OIWAVs}" XBindingPath="Date" YBindingPath="OIWAP2"/>
</chart:SfChart>
</Grid>
</Window>
How do you set legends? Legend values are in the Name1 and Name2 columns of the OIWAP_OIWAV.
Hi Kook Jin Noh,
We have reviewed your query and would like to inform you that you can set the chart legend using the Label property in each series. This will display the series name in the legend and can be bind to the properties in your ViewModel.
For learn more about the chart legend please visit the document: Legend in WPF Charts control | Syncfusion
Simple code snippet for the Chart legend:
To initialize the legend, use:
<chart:SfChart.Legend>
<chart:ChartLegend />
</chart:SfChart.Legend> |
Setting the Legend Name Using Series Label Property
<chart:LineSeries ShowTooltip="True" ItemsSource="{Binding OIWAP_OIWAVs}" XBindingPath="Date" Label="{Binding Name1}"YBindingPath="OIWAP1"/>
<chart:LineSeries ShowTooltip="True" ItemsSource="{Binding OIWAP_OIWAVs}" XBindingPath="Date" Label="{Binding Name2}" YBindingPath="OIWAP2"/> |
ViewModel Example:
public class CorrChartViewModel : INotifyPropertyChanged { private string _name1; private string _name2;
public event PropertyChangedEventHandler? PropertyChanged;
public string Name1 { get { return _name1; } set { _name1 = value; OnpropertyChanged("Name1"); }
}
public string Name2 { get { return _name2; } set { _name2 = value; OnpropertyChanged("Name2"); }
}
public CorrChartViewModel() {
Name1 = "Series1"; Name2 = "Series2";
}
private void OnpropertyChanged(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); }
} |
I hope this helps! If you need further assistance, feel free to reach out.
Thank you for your understanding.
Regards,
Arul Jenith B.
The legend comes up as "Series1" and "Series2":
CorrChartViewModel.cs:
using Npgsql;
using System.Collections.ObjectModel;
using System.ComponentModel;
namespace TradingApp
{
class CorrChartViewModel: INotifyPropertyChanged
{
private string _name1 = string.Empty;
private string _name2 = string.Empty;
private string _market1SavedValue = string.Empty;
private string _market2SavedValue = string.Empty;
public event PropertyChangedEventHandler? PropertyChanged;
public ObservableCollection<Market> Market1 { get; set; }
public ObservableCollection<Market> Market2 { get; set; }
public string Market1SavedValue
{
get { return _market1SavedValue; }
set { _market1SavedValue = value; }
}
public string Market2SavedValue
{
get { return _market2SavedValue; }
set { _market2SavedValue = value; }
}
public string Name1
{
get { return _name1; }
set
{
_name1 = value;
OnpropertyChanged("Name1");
}
}
public string Name2
{
get { return _name2; }
set
{
_name2 = value;
OnpropertyChanged("Name2");
}
}
public ObservableCollection<OIWAP_OIWAV> OIWAP_OIWAVs { get; set; }
public CorrChartViewModel()
{
Market1 = new ObservableCollection<Market>();
Market2 = new ObservableCollection<Market>();
OIWAP_OIWAVs = new ObservableCollection<OIWAP_OIWAV>();
Name1 = "Series1";
Name2 = "Series2";
LoadData();
}
public void LoadData()
{
NpgsqlConnection conn = new NpgsqlConnection("Host=192.168.1.2; Port=5432; Database=tradingapp; Username=vorlket; Password=Vcsokr.");
conn.Open();
string query = "SELECT Date, Name1, Name2, OIWAP1, OIWAP2 " +
"FROM (SELECT t1.Date AS Date, t1.Name AS Name1, t2.Name AS Name2, t1.OIWAP_Close AS OIWAP1, t2.OIWAP_Close AS OIWAP2 " +
"FROM (SELECT Date, Name, OIWAP_Close FROM OIWAP_OIWAV WHERE Name = '" + Market1SavedValue + "' ORDER BY Date) AS t1 INNER JOIN " +
"(SELECT Date, Name, OIWAP_Close FROM OIWAP_OIWAV WHERE Name = '" + Market2SavedValue + "' ORDER BY Date) AS t2 ON t1.Date = t2.Date " +
") AS t3 " +
"WHERE OIWAP1 IS NOT NULL AND OIWAP2 IS NOT NULL ORDER BY Date";
NpgsqlCommand cmd = new NpgsqlCommand(query, conn);
NpgsqlDataReader reader = cmd.ExecuteReader();
while (reader.Read())
{
OIWAP_OIWAVs.Add(new OIWAP_OIWAV
{
Date = reader.GetDateTime(0),
Name1 = reader.GetString(1),
Name2 = reader.GetString(2),
OIWAP1 = reader.GetDouble(3),
OIWAP2 = reader.GetDouble(4),
});
}
}
private void OnpropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}
Hi Kook,
Thank you for sharing your code snippet.
We’ve reviewed it and noticed that the BindingContext of the chart is set to the ViewModel (CorrChartViewModel), where Name1 and Name2 properties are defined as "Series1" and "Series2" respectively. Since these properties belong to the ViewModel and are not updated dynamically, the chart legend displays them as "Series1" and "Series2."
If you wish to display Name1 and Name2 from the OIWAP_OIWAV model class (where each data point may have unique names), we need to clarify your requirements. If You want to update the ViewModel's Name1 and Name2 properties based on the Name1 and Name2 values of the last data point added in OIWAP_OIWAVs Model class.
Here's a code snippet for setting Name1 and Name2 after data points are loaded:
|
public void LoadData() { // Existing code to load data // ... while (reader.Read()) { OIWAP_OIWAVs.Add(new OIWAP_OIWAV { Date = reader.GetDateTime(0), Name1 = reader.GetString(1), Name2 = reader.GetString(2), OIWAP1 = reader.GetDouble(3), OIWAP2 = reader.GetDouble(4), }); }
// Set ViewModel names based on last data point if (OIWAP_OIWAVs.Count > 0) { Name1 = OIWAP_OIWAVs[^1].Name1; Name2 = OIWAP_OIWAVs[^1].Name2; } } |
If this doesn’t meet your requirements, please let us know what specific information you’d like the legend to display.
Thank you for your patience and understanding.
Regards,
Dhanaraj Rajendran.
It works but with the following warning:
Hi Kook Jin Noh,
We would like to inform you that the warning appears due to a possible null reference in OIWAP_OIWAVs[^1].Name1 and Name2. To resolve this, we suggest adding a null check. Here’s an example code snippet to handle the potential null values:
if (OIWAP_OIWAVs.Count > 0) { Name1 = OIWAP_OIWAVs[^1].Name1 ?? string.Empty; Name2 = OIWAP_OIWAVs[^1].Name2 ?? string.Empty; } |
In this code, string.Empty is assigned to Name1 and Name2 if they are null, ensuring no null reference warnings occur.
Thank you for your understanding.
Best regards,
Arul Jenith B.
All good now?
- 6 Replies
- 4 Participants
- Marked answer
-
KJ Kook Jin Noh
- Oct 31, 2024 11:02 AM UTC
- Nov 14, 2024 07:11 AM UTC
