From wpf-dev-pack
Integrates LiveCharts2 with SkiaSharp in WPF for CartesianChart, PieChart, real-time updates in charts, graphs, dashboards.
How this skill is triggered — by the user, by Claude, or both
Slash command
/wpf-dev-pack:integrating-livecharts2sonnetThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
LiveCharts2 (SkiaSharpView.WPF) 기반 데이터 시각화 가이드.
LiveCharts2 (SkiaSharpView.WPF) 기반 데이터 시각화 가이드.
<!-- ⚠️ 프리릴리스: --version 명시 필수 -->
<!-- ⚠️ Prerelease: --version flag required -->
<PackageReference Include="LiveChartsCore.SkiaSharpView.WPF" Version="2.0.0-rc6.1" />
dotnet add package LiveChartsCore.SkiaSharpView.WPF --version 2.0.0-rc6.1
// App.xaml.cs — OnStartup에서 한 번 호출
// App.xaml.cs — Call once in OnStartup
protected override void OnStartup(StartupEventArgs e)
{
base.OnStartup(e);
LiveCharts.Configure(config =>
config
.AddSkiaSharp()
.AddDefaultMappers()
.AddDefaultTheme());
}
xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"
<lvc:CartesianChart
Series="{Binding Series}"
XAxes="{Binding XAxes}"
YAxes="{Binding YAxes}" />
public sealed partial class ChartViewModel : ObservableObject
{
// ✅ ObservableCollection 사용 (List 금지 — 동적 업데이트 불가)
// ✅ Use ObservableCollection (not List — no dynamic updates)
[ObservableProperty] private ObservableCollection<ISeries> _series =
[
new LineSeries<double>
{
Values = new ObservableCollection<double> { 3, 5, 7, 2, 8 },
Name = "매출"
},
new ColumnSeries<double>
{
Values = new ObservableCollection<double> { 2, 4, 1, 6, 3 },
Name = "비용"
}
];
[ObservableProperty] private Axis[] _xAxes =
[
new Axis { Name = "월", Labels = ["1월", "2월", "3월", "4월", "5월"] }
];
[ObservableProperty] private Axis[] _yAxes =
[
new Axis { Name = "금액 (만원)" }
];
}
<lvc:PieChart Series="{Binding PieSeries}" />
[ObservableProperty] private ObservableCollection<ISeries> _pieSeries =
[
new PieSeries<double> { Values = [45], Name = "A 제품" },
new PieSeries<double> { Values = [30], Name = "B 제품" },
new PieSeries<double> { Values = [25], Name = "C 제품" }
];
private readonly ObservableCollection<double> _values = [0, 0, 0, 0, 0];
public ObservableCollection<ISeries> Series { get; } = [];
public ChartViewModel()
{
Series.Add(new LineSeries<double> { Values = _values });
}
[RelayCommand]
private void AddDataPoint()
{
// ⚠️ UI 스레드에서 수정해야 함 (Dispatcher 사용)
// ⚠️ Must modify on UI thread (use Dispatcher)
_values.Add(Random.Shared.Next(0, 100));
if (_values.Count > 50)
{
_values.RemoveAt(0);
}
}
| 실수 | 올바른 방법 |
|---|---|
List<ISeries> 사용 | ObservableCollection<ISeries> 사용 필수 |
Values에 List<T> | 동적 업데이트 시 ObservableCollection<T> |
LiveCharts v1 API (SeriesCollection, ChartValues<T>) | v2 API (ISeries, LineSeries<T>) |
| 안정 버전으로 패키지 참조 | 2.0.0-rc6.1 프리릴리스, --version 명시 |
| 고빈도 업데이트 시 직접 수정 | UI 스레드에서 수정 또는 AutoUpdateEnabled 제어 |
// GlobalUsings.cs
global using LiveChartsCore;
global using LiveChartsCore.SkiaSharpView;
global using LiveChartsCore.SkiaSharpView.Painting;
global using SkiaSharp;
LiveChartsCore — ISeries, AxisLiveChartsCore.SkiaSharpView — LineSeries, ColumnSeries, PieSeriesLiveChartsCore.SkiaSharpView.WPF — CartesianChart, PieChart (XAML 컨트롤)ObservableCollection<ISeries> 필수 (List 금지)ObservableCollection<T>LiveCharts.Configure() 한 번 호출--version 2.0.0-rc6.1 명시npx claudepluginhub christian289/dotnet-with-claudecode --plugin wpf-dev-packProvides Swift Charts patterns for marks, axes, selection, styling, composition, Chart3D, accessibility, and Audio Graph in SwiftUI. Useful for building or improving charts.
Implements, reviews, or improves data visualizations using Swift Charts. Covers bar, line, area, point, pie charts, selection, scrolling, annotations, and vectorized plots.
Explains WPF rendering pipeline including Measure/Arrange/Render passes, invalidation methods, and hardware acceleration tiers. Use for debugging layouts, optimizing performance, or diagnosing software rendering.