Skip to content

Commit f121f49

Browse files
author
Mischa Spelt
committed
Added documentation for Chart Plugins
1 parent 3984bb7 commit f121f49

File tree

3 files changed

+224
-14
lines changed

3 files changed

+224
-14
lines changed

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,33 @@
66

77
<h1>Blazor Line Chart</h1>
88
<div class="lead mb-3">
9-
A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time.
10-
It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.
9+
A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time.
10+
It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.
1111
</div>
1212

1313
<CarbonAds />
1414

1515
<SectionHeading Size="HeadingSize.H4" Text="Prerequisites" PageUrl="@pageUrl" HashTagName="prerequisites" />
1616
<div class="mb-3">
17-
Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
17+
Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
1818
</div>
1919

2020
<SectionHeading Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
2121
<div class="mb-3">
22-
In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
22+
In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
2323
</div>
2424
<Callout Heading="TIP" Color="CalloutColor.Success">
25-
For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
26-
These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
25+
For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
26+
These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
2727
</Callout>
2828
<Demo Type="typeof(LineChart_Demo_01_A_Examples)" Tabs="true" />
2929
<div class="my-3"></div>
3030
<Demo Type="typeof(LineChart_Demo_01_B_Examples)" Tabs="true" />
3131

3232
<SectionHeading Size="HeadingSize.H4" Text="Locale" PageUrl="@pageUrl" HashTagName="locale" />
3333
<div class="my-3">
34-
By default, the chart is using the default locale of the platform on which it is running.
35-
In the following example, you will see the chart in the <b>German</b> locale (<b>de_DE</b>).
34+
By default, the chart is using the default locale of the platform on which it is running.
35+
In the following example, you will see the chart in the <b>German</b> locale (<b>de_DE</b>).
3636
</div>
3737
<Demo Type="typeof(LineChart_Demo_02_Locale)" Tabs="true" />
3838

@@ -48,9 +48,12 @@
4848
<SectionHeading Size="HeadingSize.H4" Text="Fill between datasets" PageUrl="@pageUrl" HashTagName="dataset-fill" />
4949
<Demo Type="typeof(LineChart_Demo_06_Dataset_Fill)" Tabs="true" />
5050

51+
<SectionHeading Size="HeadingSize.H4" Text="(Custom) Plugins" PageUrl="@pageUrl" HashTagName="plugins" />
52+
<Demo Type="typeof(LineChart_Demo_08_Plugins)" Tabs="true" />
53+
5154
@code {
52-
private readonly string pageUrl = "/charts/line-chart";
53-
private readonly string title = "Blazor Line Chart";
54-
private readonly string description = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
55-
private readonly string imageUrl = "https://i.imgur.com/8b7jH0D.png";
55+
private readonly string pageUrl = "/charts/line-chart";
56+
private readonly string title = "Blazor Line Chart";
57+
private readonly string description = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
58+
private readonly string imageUrl = "https://i.imgur.com/8b7jH0D.png";
5659
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_08_Plugins.razor‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
@using System.Text.Json.Serialization
2+
<div class="container-fluid overflow-x-auto">
3+
<LineChart @ref="lineChart" Width="800" />
4+
</div>
5+
<small>This line chart has the Zoom (built-in), Annotations (built-in), DragData (locally defined) and Crosshair (anonymous) plugins enabled.</small>
6+
7+
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3/dist/chartjs-plugin-annotation.min.js" integrity="sha256-8BDDxChCyYOB80/6VhOpmr7qI5EIDyDPzxsWePPFVfo=" crossorigin="anonymous"></script>
8+
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair@2/dist/chartjs-plugin-crosshair.min.js" integrity="sha256-5bTtdEYtbjO36pQbMCXOsoYW5u5jfYfyI41LelMTTbQ=" crossorigin="anonymous"></script>
9+
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2/dist/chartjs-plugin-zoom.min.js" integrity="sha256-UDxwmAK+KFxnav4Dab9fcgZtCwwjkpGIwxWPNcAyepw=" crossorigin="anonymous"></script>
10+
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@2/dist/chartjs-plugin-dragdata.min.js" integrity="sha256-TVzMefO8VbXaQ5GV1xGhZbFEGUGOm/x/y7bQGhxyKuE=" crossorigin="anonymous"></script>
11+
12+
@code {
13+
private LineChart lineChart = default!;
14+
private LineChartOptions lineChartOptions = default!;
15+
private ChartData chartData = default!;
16+
17+
protected override void OnInitialized()
18+
{
19+
var colors = ColorUtility.CategoricalTwelveColors;
20+
var labels = new List<string> { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
21+
var datasets = new List<IChartDataset>();
22+
23+
var dataset1 = new LineChartDataset
24+
{
25+
Label = "Windows",
26+
Data = new List<double?> { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },
27+
BorderWidth = 2,
28+
HoverBorderWidth = 4,
29+
BackgroundColor = colors[ 0 ],
30+
BorderColor = colors[ 0 ],
31+
};
32+
datasets.Add( dataset1 );
33+
34+
var dataset2 = new LineChartDataset
35+
{
36+
Label = "macOS",
37+
Data = new List<double?> { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },
38+
BorderWidth = 2,
39+
HoverBorderWidth = 4,
40+
BackgroundColor = colors[ 1 ],
41+
BorderColor = colors[ 1 ],
42+
};
43+
datasets.Add( dataset2 );
44+
45+
var dataset3 = new LineChartDataset
46+
{
47+
Label = "Other",
48+
Data = new List<double?> { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },
49+
BorderWidth = 2,
50+
HoverBorderWidth = 4,
51+
BackgroundColor = colors[ 2 ],
52+
BorderColor = colors[ 2 ],
53+
};
54+
datasets.Add( dataset3 );
55+
56+
chartData = new ChartData { Labels = labels, Datasets = datasets };
57+
58+
lineChartOptions = new();
59+
lineChartOptions.Responsive = true;
60+
lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };
61+
62+
lineChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "2019", Display = true };
63+
lineChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
64+
65+
lineChartOptions.Plugins.Title!.Text = "Operating system";
66+
lineChartOptions.Plugins.Title.Display = true;
67+
68+
EnableDragDataPlugin();
69+
EnableZoomPlugin();
70+
EnableAnnotationsPlugin();
71+
EnableCrosshairsPlugin();
72+
}
73+
74+
[JsonSourceGenerationOptions( DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull, PropertyNamingPolicy = JsonKnownNamingPolicy.CamelCase )]
75+
public class DragDataPlugin : ChartPlugin
76+
{
77+
public bool? DragX { get; set; }
78+
public bool? DragY { get; set; }
79+
public bool? ShowTooltip { get; set; }
80+
}
81+
82+
private void EnableDragDataPlugin()
83+
{
84+
// Example of a plugin class deriving from ChartPlugin that is defined locally
85+
lineChartOptions.Plugins.Add( "dragData", new DragDataPlugin() { DragX = true, ShowTooltip = false } );
86+
87+
// Alternative way to access the plugin:
88+
var plugin = lineChartOptions.Plugins.Get<DragDataPlugin>();
89+
plugin.ShowTooltip = true;
90+
}
91+
92+
private void EnableAnnotationsPlugin()
93+
{
94+
// Example of the built-in Annotation plugin class.
95+
var annotations = new ChartPluginsAnnotation()
96+
{
97+
Annotations = new List<Annotation>()
98+
};
99+
100+
foreach( LineChartDataset dataset in chartData.Datasets )
101+
{
102+
var average = dataset.Data.Average();
103+
annotations.Annotations.Add( new LineAnnotation()
104+
{
105+
BorderColor = dataset.BorderColor,
106+
BorderDash = [ 2, 2 ],
107+
YMin = average,
108+
YMax = average
109+
} );
110+
}
111+
112+
annotations.Annotations.Add( new BoxAnnotation()
113+
{
114+
XMin = 3.5,
115+
XMax = 8.75,
116+
YMin = 1250000,
117+
YMax = 4750000,
118+
BorderWidth = 2,
119+
BorderColor = "gray",
120+
BorderDash = [ 1, 1 ],
121+
BackgroundColor = "rgba(255, 255, 0, 0.1)",
122+
ShadowOffsetX = 5,
123+
ShadowOffsetY = 5
124+
} );
125+
126+
lineChartOptions.Plugins.Add( "annotation", annotations );
127+
}
128+
129+
private void EnableZoomPlugin()
130+
{
131+
// Example of the built-in Zoom plugin class.
132+
var zoom = new ChartPluginsZoom()
133+
{
134+
Zoom = new()
135+
{
136+
Wheel = new()
137+
{
138+
Enabled = true
139+
},
140+
Pinch = new()
141+
{
142+
Enabled = true
143+
},
144+
Mode = ZoomMode.Y,
145+
ScaleMode = ZoomMode.XY,
146+
},
147+
Pan = new()
148+
{
149+
Enabled = true,
150+
Mode = ZoomMode.XY
151+
},
152+
Limits = new()
153+
{
154+
X = new() { MinimumIsOriginal = true, MaximumIsOriginal = true, MinRange = 1.0 },
155+
Y = new() { MinimumIsOriginal = true, MaximumIsOriginal = true, MinRange = 1.0 }
156+
}
157+
};
158+
159+
lineChartOptions.Plugins.Add( "zoom", zoom );
160+
}
161+
162+
private void EnableCrosshairsPlugin()
163+
{
164+
// Example of an anonymous plugin class, i.e. one that does not derive from ChartPlugin.
165+
// Note that you cannot .Get() or .TryGet() it later.
166+
// Demo configuration taken directly from https://github.com/abelheinsbroek/chartjs-plugin-crosshair
167+
var crossHairs = new
168+
{
169+
line = new
170+
{
171+
color = "#F66",
172+
width = 1,
173+
},
174+
sync = new
175+
{
176+
enabled = true,
177+
group = 1,
178+
suppressTooltips = false
179+
},
180+
zoom = new
181+
{
182+
enabled = true,
183+
zoomboxBackgroundColor = "rgba(66,133,244,0.2)",
184+
zoomboxBorderColor = "#48F",
185+
zoomButtonText = "Reset Zoom",
186+
zoomButtonClass = "reset-zoom",
187+
}
188+
};
189+
190+
lineChartOptions.Plugins.AddObject( "crosshairs", crossHairs );
191+
}
192+
193+
194+
protected override async Task OnAfterRenderAsync( bool firstRender )
195+
{
196+
if( firstRender )
197+
{
198+
await lineChart.InitializeAsync( chartData, lineChartOptions );
199+
}
200+
await base.OnAfterRenderAsync( firstRender );
201+
}
202+
203+
}

‎blazorbootstrap/Models/Charts/ChartPlugins/ChartPlugins.cs‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@ public class ChartPlugins
1919

2020
#region Methods
2121

22+
public void AddObject( string key, object plugin )
23+
{
24+
customPlugins.Add( key, plugin );
25+
}
26+
2227
public void Add<T>( string key, T plugin )
2328
where T : ChartPlugin
2429
{
@@ -86,7 +91,7 @@ public bool TryGet<T>( [NotNullWhen( true )] out T? value ) where T : ChartPlugi
8691
#endregion
8792
}
8893

89-
public class ChartPluginsAnnotation
94+
public class ChartPluginsAnnotation : ChartPlugin
9095
{
9196
#region Inner classes
9297

@@ -139,7 +144,6 @@ public class ChartPluginsAnnotationsCommon
139144

140145
#endregion
141146
}
142-
143147
public class ChartPluginsLegend : ChartPlugin
144148
{
145149
#region Properties, Indexers

0 commit comments

Comments
 (0)