Skip to content

Commit fec66dc

Browse files
erossinierossini
committed
Add settings for Animations and Title
1 parent 5616644 commit fec66dc

22 files changed

Lines changed: 833 additions & 30 deletions

‎ChartjsDemo/Data/AnimationExamples.cs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
namespace ChartjsDemo.Data
2+
{
3+
public class AnimationExamples
4+
{
5+
public static List<string> AnimationText = new List<string>() { "January", "February", "March", "April", "May", "June", "July" };
6+
public static List<decimal> SimpleLine = new List<decimal>() { 65, 59, 80, 81, 56, 55, 40 };
7+
}
8+
}

‎ChartjsDemo/Data/BarDataExamples.cs‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
namespace ChartjsDemo.Data;
1+
using System.Diagnostics;
2+
3+
namespace ChartjsDemo.Data;
24

35
public static class BarDataExamples
46
{
@@ -12,4 +14,8 @@ public static class BarDataExamples
1214
new DataItem() { Name = "June", Value = 55 },
1315
new DataItem() { Name = "July", Value = 40 }
1416
};
17+
18+
public static List<string> GroupedLabels = new List<string>() { "1900", "1950", "1999", "2050" };
19+
public static List<decimal> Grouped1 = new List<decimal>() { 133, 221, 783, 2478 };
20+
public static List<decimal> Grouped2 = new List<decimal>() { 408, 547, 675, 734 };
1521
}

‎ChartjsDemo/Pages/AnimationPage.razor‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
@page "/animation"
2+
3+
<h3>Animation</h3>
4+
5+
<Chart Config="_config1" @ref="_chart1" Height="400px"></Chart>
6+
7+
<hr />
8+
9+
<h3>Code</h3>
10+
11+
<p>
12+
This is the component to add in your page.
13+
</p>
14+
15+
<CodeSnippet Language="Language.xml" Style="Style.VisualStudio">
16+
&ltChart Config="_config1" &#64;ref="_chart1">&lt;Chart>
17+
</CodeSnippet>
18+
19+
<p>
20+
Then, in the code section, add the following code:
21+
</p>
22+
23+
<CodeSnippet Language="Language.csharp" Style="Style.VisualStudio" LoadMainScript="false">
24+
private BarChartConfig? _config1;
25+
private Chart? _chart1;
26+
27+
_config1 = new LineChartConfig()
28+
{
29+
Options = new Options()
30+
{
31+
Responsive = true,
32+
MaintainAspectRatio = false,
33+
Animations = new Animations()
34+
{
35+
Tension = new Tension()
36+
{
37+
Duration = 1000,
38+
Easing = "linear",
39+
From = 1,
40+
To = 0,
41+
Loop = true
42+
}
43+
},
44+
Scales = new Dictionary&lt;string, Axis&gt;()
45+
{
46+
{
47+
Scales.YAxisId, new Axis()
48+
{
49+
Min = 0,
50+
Max = 100
51+
}
52+
}
53+
}
54+
}
55+
};
56+
57+
_config1.Data.Labels = LineDataExamples.SimpleLineText;
58+
_config1.Data.Datasets.Add(new LineDataset()
59+
{
60+
Label = "Looping tension",
61+
Data = AnimationExamples.SimpleLine.ToList(),
62+
BorderColor = Colors.PaletteBorder1.FirstOrDefault(),
63+
Fill = false
64+
});
65+
</CodeSnippet>
66+
67+
@code {
68+
private LineChartConfig? _config1;
69+
private Chart? _chart1;
70+
71+
protected override async Task OnInitializedAsync()
72+
{
73+
_config1 = new LineChartConfig()
74+
{
75+
Options = new Options()
76+
{
77+
Responsive = true,
78+
MaintainAspectRatio = false,
79+
Animations = new Animations()
80+
{
81+
Tension = new Tension()
82+
{
83+
Duration = 1000,
84+
Easing = "linear",
85+
From = 1,
86+
To = 0,
87+
Loop = true
88+
}
89+
},
90+
Scales = new Dictionary<string, Axis>()
91+
{
92+
{
93+
Scales.YAxisId, new Axis()
94+
{
95+
Min = 0,
96+
Max = 100
97+
}
98+
}
99+
}
100+
}
101+
};
102+
103+
_config1.Data.Labels = LineDataExamples.SimpleLineText;
104+
_config1.Data.Datasets.Add(new LineDataset()
105+
{
106+
Label = "Looping tension",
107+
Data = AnimationExamples.SimpleLine.ToList(),
108+
BorderColor = Colors.PaletteBorder1.FirstOrDefault(),
109+
Fill = false
110+
});
111+
}
112+
}

‎ChartjsDemo/Pages/AreaSimple.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@page "/areaSimple"
22

3-
<h3>Zoom</h3>
3+
<h3>Area Simple</h3>
44

55
<Chart Config="_config1" @ref="_chart1" Height="400px"></Chart>
66

‎ChartjsDemo/Pages/CrosshairPage.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
on the graph to identify better where a point is. See the example below.
88
</p>
99

10-
<h4>Horizontal crosshair</h4>
10+
<h4>Vertical crosshair</h4>
1111

1212
<Chart Config="_config1" @ref="_chart1" Height="400px"></Chart>
1313

@@ -51,7 +51,7 @@ protected override async Task OnInitializedAsync()
5151

5252
<hr/>
5353

54-
<h4>Vertical crosshair</h4>
54+
<h4>Horizontal crosshair</h4>
5555

5656
<Chart Config="_config2" @ref="_chart1" Height="400px"></Chart>
5757

‎ChartjsDemo/Pages/GroupedPage.razor‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
@page "/grouped"
2+
3+
<h3>Grouped Chart</h3>
4+
5+
<Chart Config="_config1" @ref="_chart1" Height="400px"></Chart>
6+
7+
<hr />
8+
9+
<h3>Code</h3>
10+
11+
<p>
12+
This is the component to add in your page.
13+
</p>
14+
15+
<CodeSnippet Language="Language.xml" Style="Style.VisualStudio">
16+
&ltChart Config="_config1" &#64;ref="_chart1">&lt;Chart>
17+
</CodeSnippet>
18+
19+
<p>
20+
Then, in the code section, add the following code:
21+
</p>
22+
23+
<CodeSnippet Language="Language.csharp" Style="Style.VisualStudio" LoadMainScript="false">
24+
private BarChartConfig? _config1;
25+
private Chart? _chart1;
26+
27+
_config1 = new BarChartConfig()
28+
{
29+
Options = new Options()
30+
{
31+
Plugins = new Plugins()
32+
{
33+
Title = new Title()
34+
{
35+
Display = true,
36+
Text = "Population growth (millions)",
37+
Font = new Font()
38+
{
39+
Size = 18
40+
}
41+
}
42+
}
43+
}
44+
};
45+
46+
_config1.Data.Labels = BarDataExamples.GroupedLabels;
47+
_config1.Data.Datasets.Add(new BarDataset()
48+
{
49+
Label = "Africa",
50+
Data = BarDataExamples.Grouped1.ToList(),
51+
BackgroundColor = new List&lt;string>() { "#3e95cd" }
52+
});
53+
_config1.Data.Datasets.Add(new BarDataset()
54+
{
55+
Label = "Europe",
56+
Data = BarDataExamples.Grouped2.ToList(),
57+
BackgroundColor = new List&lt;string>() { "#8e5ea2" }
58+
});
59+
</CodeSnippet>
60+
61+
@code {
62+
private BarChartConfig? _config1;
63+
private Chart? _chart1;
64+
65+
protected override async Task OnInitializedAsync()
66+
{
67+
_config1 = new BarChartConfig()
68+
{
69+
Options = new Options()
70+
{
71+
Plugins = new Plugins()
72+
{
73+
Title = new Title()
74+
{
75+
Display = true,
76+
Text = "Population growth (millions)",
77+
Font = new Font()
78+
{
79+
Size = 18
80+
}
81+
}
82+
}
83+
}
84+
};
85+
86+
_config1.Data.Labels = BarDataExamples.GroupedLabels;
87+
_config1.Data.Datasets.Add(new BarDataset()
88+
{
89+
Label = "Africa",
90+
Data = BarDataExamples.Grouped1.ToList(),
91+
BackgroundColor = new List<string>() { "#3e95cd" }
92+
});
93+
_config1.Data.Datasets.Add(new BarDataset()
94+
{
95+
Label = "Europe",
96+
Data = BarDataExamples.Grouped2.ToList(),
97+
BackgroundColor = new List<string>() { "#8e5ea2" }
98+
});
99+
}
100+
}

‎ChartjsDemo/Pages/LineBar.razor‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -106,26 +106,26 @@ protected override async Task OnInitializedAsync()
106106
}
107107
},
108108
Scales = new Dictionary<string, Axis>()
109-
{
110109
{
111-
Scales.XAxisId, new Axis()
112110
{
113-
Stacked = true,
114-
Ticks = new Ticks()
111+
Scales.XAxisId, new Axis()
115112
{
116-
MaxRotation = 0,
117-
MinRotation = 0
113+
Stacked = true,
114+
Ticks = new Ticks()
115+
{
116+
MaxRotation = 0,
117+
MinRotation = 0
118+
}
118119
}
119-
}
120-
},
121-
{
122-
Scales.YAxisId, new Axis()
120+
},
123121
{
124-
Stacked = true
122+
Scales.YAxisId, new Axis()
123+
{
124+
Stacked = true
125+
}
125126
}
126127
}
127128
}
128-
}
129129
};
130130

131131
_config1.Data.Labels = BarDataExamples.SimpleBarText;

0 commit comments

Comments
 (0)