diff --git a/ChartJs.Blazor.Samples/Client/Pages/Charts/Bar/Horizontal.razor b/ChartJs.Blazor.Samples/Client/Pages/Charts/Bar/Horizontal.razor
new file mode 100644
index 00000000..c8f58df9
--- /dev/null
+++ b/ChartJs.Blazor.Samples/Client/Pages/Charts/Bar/Horizontal.razor
@@ -0,0 +1,137 @@
+@page "/charts/bar/horizontal"
+@using ChartJS.BarChart
+@using System.Drawing
+@layout SampleLayout
+
+
+
+
+
+
+
+
+
+@code {
+ private const int InitalCount = 7;
+ private BarConfig _config;
+ private Random _rng = new Random();
+ private Chart _chart;
+
+ protected override void OnInitialized()
+ {
+ _config = new BarConfig(ChartType.HorizontalBar)
+ {
+ Options = new BarOptions
+ {
+ Responsive = true,
+ Legend = new Legend
+ {
+ Position = Position.Right
+ },
+ Title = new OptionsTitle
+ {
+ Display = true,
+ Text = "ChartJs.Blazor Horizontal Bar Chart"
+ }
+ }
+ };
+
+ IDataset dataset1 = new BarDataset(RandomScalingFactor(InitalCount), horizontal: true)
+ {
+ Label = "My first dataset",
+ BackgroundColor = ColorUtil.FromDrawingColor(Color.FromArgb(128, ChartColors.Red)),
+ BorderColor = ColorUtil.FromDrawingColor(ChartColors.Red),
+ BorderWidth = 1
+ };
+
+ IDataset dataset2 = new BarDataset(RandomScalingFactor(InitalCount), horizontal: true)
+ {
+ Label = "My second dataset",
+ BackgroundColor = ColorUtil.FromDrawingColor(Color.FromArgb(128, ChartColors.Blue)),
+ BorderColor = ColorUtil.FromDrawingColor(ChartColors.Blue),
+ BorderWidth = 1
+ };
+
+ _config.Data.Labels.AddRange(Months.Take(InitalCount));
+ _config.Data.Datasets.Add(dataset1);
+ _config.Data.Datasets.Add(dataset2);
+ }
+
+ private void RandomizeData()
+ {
+ foreach (IDataset dataset in _config.Data.Datasets)
+ {
+ int count = dataset.Count;
+ dataset.Clear();
+ for (int i = 0; i < count; i++)
+ {
+ if (_rng.NextDouble() < 0.2)
+ {
+ dataset.Add(0);
+ }
+ else
+ {
+ dataset.Add(RandomScalingFactor());
+ }
+ }
+ }
+
+ _chart.Update();
+ }
+
+ private void AddDataset()
+ {
+ Color color = ChartColors.All[_config.Data.Datasets.Count % ChartColors.All.Count];
+ IDataset dataset = new BarDataset(RandomScalingFactor(_config.Data.Labels.Count), horizontal: true)
+ {
+ Label = $"Dataset {_config.Data.Datasets.Count}",
+ BackgroundColor = ColorUtil.FromDrawingColor(Color.FromArgb(128, color)),
+ BorderColor = ColorUtil.FromDrawingColor(color),
+ BorderWidth = 1
+ };
+
+ _config.Data.Datasets.Add(dataset);
+ _chart.Update();
+ }
+
+ private void RemoveDataset()
+ {
+ IList datasets = _config.Data.Datasets;
+ if (datasets.Count == 0)
+ return;
+
+ datasets.RemoveAt(datasets.Count - 1);
+ _chart.Update();
+ }
+
+ private void AddData()
+ {
+ if (_config.Data.Datasets.Count == 0)
+ return;
+
+ string month = Months[_config.Data.Labels.Count % Months.Count];
+ _config.Data.Labels.Add(month);
+
+ foreach (IDataset dataset in _config.Data.Datasets)
+ {
+ dataset.Add(RandomScalingFactor());
+ }
+
+ _chart.Update();
+ }
+
+ private void RemoveData()
+ {
+ if (_config.Data.Datasets.Count == 0)
+ return;
+
+ _config.Data.Labels.RemoveAt(_config.Data.Labels.Count - 1);
+
+ foreach (IDataset dataset in _config.Data.Datasets)
+ {
+ dataset.RemoveAt(dataset.Count - 1);
+ }
+
+ _chart.Update();
+ }
+}
diff --git a/ChartJs.Blazor.Samples/Client/Pages/Charts/Bar/Vertical.razor b/ChartJs.Blazor.Samples/Client/Pages/Charts/Bar/Vertical.razor
new file mode 100644
index 00000000..28e53407
--- /dev/null
+++ b/ChartJs.Blazor.Samples/Client/Pages/Charts/Bar/Vertical.razor
@@ -0,0 +1,137 @@
+@page "/charts/bar/vertical"
+@using ChartJS.BarChart
+@using System.Drawing
+@layout SampleLayout
+
+
+
+
+
+
+
+
+
+@code {
+ private const int InitalCount = 7;
+ private BarConfig _config;
+ private Random _rng = new Random();
+ private Chart _chart;
+
+ protected override void OnInitialized()
+ {
+ _config = new BarConfig
+ {
+ Options = new BarOptions
+ {
+ Responsive = true,
+ Legend = new Legend
+ {
+ Position = Position.Top
+ },
+ Title = new OptionsTitle
+ {
+ Display = true,
+ Text = "ChartJs.Blazor Bar Chart"
+ }
+ }
+ };
+
+ IDataset dataset1 = new BarDataset(RandomScalingFactor(InitalCount))
+ {
+ Label = "My first dataset",
+ BackgroundColor = ColorUtil.FromDrawingColor(Color.FromArgb(128, ChartColors.Red)),
+ BorderColor = ColorUtil.FromDrawingColor(ChartColors.Red),
+ BorderWidth = 1
+ };
+
+ IDataset dataset2 = new BarDataset(RandomScalingFactor(InitalCount))
+ {
+ Label = "My second dataset",
+ BackgroundColor = ColorUtil.FromDrawingColor(Color.FromArgb(128, ChartColors.Blue)),
+ BorderColor = ColorUtil.FromDrawingColor(ChartColors.Blue),
+ BorderWidth = 1
+ };
+
+ _config.Data.Labels.AddRange(Months.Take(InitalCount));
+ _config.Data.Datasets.Add(dataset1);
+ _config.Data.Datasets.Add(dataset2);
+ }
+
+ private void RandomizeData()
+ {
+ foreach (IDataset dataset in _config.Data.Datasets)
+ {
+ int count = dataset.Count;
+ dataset.Clear();
+ for (int i = 0; i < count; i++)
+ {
+ if (_rng.NextDouble() < 0.2)
+ {
+ dataset.Add(0);
+ }
+ else
+ {
+ dataset.Add(RandomScalingFactor());
+ }
+ }
+ }
+
+ _chart.Update();
+ }
+
+ private void AddDataset()
+ {
+ Color color = ChartColors.All[_config.Data.Datasets.Count % ChartColors.All.Count];
+ IDataset dataset = new BarDataset(RandomScalingFactor(_config.Data.Labels.Count))
+ {
+ Label = $"Dataset {_config.Data.Datasets.Count}",
+ BackgroundColor = ColorUtil.FromDrawingColor(Color.FromArgb(128, color)),
+ BorderColor = ColorUtil.FromDrawingColor(color),
+ BorderWidth = 1
+ };
+
+ _config.Data.Datasets.Add(dataset);
+ _chart.Update();
+ }
+
+ private void RemoveDataset()
+ {
+ IList datasets = _config.Data.Datasets;
+ if (datasets.Count == 0)
+ return;
+
+ datasets.RemoveAt(datasets.Count - 1);
+ _chart.Update();
+ }
+
+ private void AddData()
+ {
+ if (_config.Data.Datasets.Count == 0)
+ return;
+
+ string month = Months[_config.Data.Labels.Count % Months.Count];
+ _config.Data.Labels.Add(month);
+
+ foreach (IDataset dataset in _config.Data.Datasets)
+ {
+ dataset.Add(RandomScalingFactor());
+ }
+
+ _chart.Update();
+ }
+
+ private void RemoveData()
+ {
+ if (_config.Data.Datasets.Count == 0)
+ return;
+
+ _config.Data.Labels.RemoveAt(_config.Data.Labels.Count - 1);
+
+ foreach (IDataset dataset in _config.Data.Datasets)
+ {
+ dataset.RemoveAt(dataset.Count - 1);
+ }
+
+ _chart.Update();
+ }
+}
diff --git a/ChartJs.Blazor.Samples/Client/Pages/Charts/Line/Basic.razor b/ChartJs.Blazor.Samples/Client/Pages/Charts/Line/Basic.razor
new file mode 100644
index 00000000..9c2e524c
--- /dev/null
+++ b/ChartJs.Blazor.Samples/Client/Pages/Charts/Line/Basic.razor
@@ -0,0 +1,155 @@
+@page "/charts/line/basic"
+@using ChartJS.LineChart
+@layout SampleLayout
+
+
+
+
+
+
+
+
+
+@code {
+ private const int InitalCount = 7;
+ private LineConfig _config;
+ private Random _rng = new Random();
+ private Chart _chart;
+
+ protected override void OnInitialized()
+ {
+ _config = new LineConfig
+ {
+ Options = new LineOptions
+ {
+ Responsive = true,
+ Title = new OptionsTitle
+ {
+ Display = true,
+ Text = "ChartJs.Blazor Line Chart"
+ },
+ Tooltips = new Tooltips
+ {
+ Mode = InteractionMode.Nearest,
+ Intersect = true
+ },
+ Hover = new Hover
+ {
+ Mode = InteractionMode.Nearest,
+ Intersect = true
+ },
+ Scales = new Scales
+ {
+ XAxes = new List
+ {
+ new CategoryAxis
+ {
+ ScaleLabel = new ScaleLabel
+ {
+ LabelString = "Month"
+ }
+ }
+ },
+ YAxes = new List
+ {
+ new LinearCartesianAxis
+ {
+ ScaleLabel = new ScaleLabel
+ {
+ LabelString = "Value"
+ }
+ }
+ }
+ }
+ }
+ };
+
+ IDataset dataset1 = new LineDataset(RandomScalingFactor(InitalCount))
+ {
+ Label = "My first dataset",
+ BackgroundColor = ColorUtil.FromDrawingColor(ChartColors.Red),
+ BorderColor = ColorUtil.FromDrawingColor(ChartColors.Red),
+ Fill = FillingMode.Disabled
+ };
+
+ IDataset dataset2 = new LineDataset(RandomScalingFactor(InitalCount))
+ {
+ Label = "My second dataset",
+ BackgroundColor = ColorUtil.FromDrawingColor(ChartColors.Blue),
+ BorderColor = ColorUtil.FromDrawingColor(ChartColors.Blue),
+ Fill = FillingMode.Disabled
+ };
+
+ _config.Data.Labels.AddRange(Months.Take(InitalCount));
+ _config.Data.Datasets.Add(dataset1);
+ _config.Data.Datasets.Add(dataset2);
+ }
+
+ private void RandomizeData()
+ {
+ foreach (IDataset dataset in _config.Data.Datasets)
+ {
+ int count = dataset.Count;
+ dataset.Clear();
+ dataset.AddRange(RandomScalingFactor(count));
+ }
+
+ _chart.Update();
+ }
+
+ private void AddDataset()
+ {
+ string color = ColorUtil.FromDrawingColor(ChartColors.All[_config.Data.Datasets.Count % ChartColors.All.Count]);
+ IDataset dataset = new LineDataset(RandomScalingFactor(_config.Data.Labels.Count))
+ {
+ Label = $"Dataset {_config.Data.Datasets.Count}",
+ BackgroundColor = color,
+ BorderColor = color,
+ Fill = FillingMode.Disabled
+ };
+
+ _config.Data.Datasets.Add(dataset);
+ _chart.Update();
+ }
+
+ private void RemoveDataset()
+ {
+ IList datasets = _config.Data.Datasets;
+ if (datasets.Count == 0)
+ return;
+
+ datasets.RemoveAt(datasets.Count - 1);
+ _chart.Update();
+ }
+
+ private void AddData()
+ {
+ if (_config.Data.Datasets.Count == 0)
+ return;
+
+ string month = Months[_config.Data.Labels.Count % Months.Count];
+ _config.Data.Labels.Add(month);
+
+ foreach (IDataset dataset in _config.Data.Datasets)
+ {
+ dataset.Add(RandomScalingFactor());
+ }
+
+ _chart.Update();
+ }
+
+ private void RemoveData()
+ {
+ if (_config.Data.Datasets.Count == 0)
+ return;
+
+ _config.Data.Labels.RemoveAt(_config.Data.Labels.Count - 1);
+
+ foreach (IDataset dataset in _config.Data.Datasets)
+ {
+ dataset.RemoveAt(dataset.Count - 1);
+ }
+
+ _chart.Update();
+ }
+}