Skip to content

Commit 9bad2b9

Browse files
erossinierossini
committed
Add Help; add multiple axis; Fix minor bugs
1 parent 25d8c09 commit 9bad2b9

File tree

817 files changed

+407432
-29
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

817 files changed

+407432
-29
lines changed

‎CHANGELOG.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,21 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). To
88
auto-changelog
99
```
1010

11+
#### [0.93](https://github.com/erossini/BlazorChartjs/compare/0.92...0.93)
12+
13+
> 10 November 2022
14+
15+
- Add for Line chart Y and Y2 - Add Pie chart options - Introduce StringEnum for Align, LegendAlign, CrossAlign, PointStyle and Poistion [`#28`](https://github.com/erossini/BlazorChartjs/pull/28)
16+
- Update issue templates [`e4621c0`](https://github.com/erossini/BlazorChartjs/commit/e4621c0a7341187c4e27bb4710cba77d98ed13a7)
17+
- Update README [`710f8c0`](https://github.com/erossini/BlazorChartjs/commit/710f8c0010af15a263b03907d7039f29d8ea0c9d)
18+
19+
#### [0.92](https://github.com/erossini/BlazorChartjs/compare/0.91...0.92)
20+
21+
> 7 November 2022
22+
23+
- Add borderWidth for all charts [`#26`](https://github.com/erossini/BlazorChartjs/pull/26)
24+
- Update CHANGELOG [`0039102`](https://github.com/erossini/BlazorChartjs/commit/003910208c6e8b8dffb817a36eca9f9d81da674e)
25+
1126
#### [0.91](https://github.com/erossini/BlazorChartjs/compare/0.9...0.91)
1227

1328
> 2 November 2022

‎ChartjsDemo/ChartjsDemo.csproj‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@
2525
<Content Update="Pages\CrosshairPage.razor">
2626
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
2727
</Content>
28+
<Content Update="Pages\LineMultiAxes.razor">
29+
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
30+
</Content>
2831
</ItemGroup>
2932

3033
</Project>

‎ChartjsDemo/Data/LineDataExamples.cs‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,11 @@ public static class LineDataExamples
99
// custom code
1010
public static List<string> CustomLineText = new List<string>() { "January", "February", "March", "April", "May", "June" };
1111
public static List<decimal> CustomLine = new List<decimal>() { 60, 80, 81, 56, 55, 40 };
12+
13+
// multi axes
14+
public static List<string> MultiAxesLineText = new List<string>() {
15+
"January;2015", "February;2015;Y", "March;2015",
16+
"January;2016", "February;2016;Y", "March;2016" };
17+
public static List<decimal> MultiAxesLine = new List<decimal>() { 12, 19, 3, 5, 2, 3 };
1218
}
13-
}
19+
}

‎ChartjsDemo/Pages/AreaSimple.razor‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,14 @@ protected override async Task OnInitializedAsync()
6565
Options = new Options()
6666
{
6767
Responsive = true,
68-
MaintainAspectRatio = false
68+
MaintainAspectRatio = false,
69+
Plugins = new Plugins()
70+
{
71+
Legend = new Legend()
72+
{
73+
Display = true
74+
}
75+
}
6976
}
7077
};
7178

‎ChartjsDemo/Pages/DoughnutSimple.razor‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,21 @@ private Chart? _chart1;
2727
protected override async Task OnInitializedAsync()
2828
{
2929
_config1 = new DoughnutChartConfig()
30+
{
31+
Options = new Options()
3032
{
31-
};
33+
Responsive = true,
34+
MaintainAspectRatio = false,
35+
Plugins = new Plugins()
36+
{
37+
Legend = new Legend()
38+
{
39+
Display = true,
40+
Position = LegendPosition.Left
41+
}
42+
}
43+
}
44+
};
3245

3346
_config1.Data.Labels = PieDataExamples.SimplePieText;
3447
_config1.Data.Datasets.Add(new DoughnutDataset()
@@ -52,7 +65,15 @@ protected override async Task OnInitializedAsync()
5265
Options = new Options()
5366
{
5467
Responsive = true,
55-
MaintainAspectRatio = false
68+
MaintainAspectRatio = false,
69+
Plugins = new Plugins()
70+
{
71+
Legend = new Legend()
72+
{
73+
Display = true,
74+
Position = LegendPosition.Left
75+
}
76+
}
5677
}
5778
};
5879

‎ChartjsDemo/Pages/LineBar.razor‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -42,26 +42,31 @@ protected override async Task OnInitializedAsync()
4242
}
4343
},
4444
Scales = new Dictionary&lt;string, Axis&gt;()
45-
{
4645
{
47-
Scales.XAxisId, new Axis()
4846
{
49-
Stacked = true,
50-
Ticks = new Ticks()
47+
Scales.XAxisId, new Axis()
5148
{
52-
MaxRotation = 0,
53-
MinRotation = 0
49+
Stacked = true,
50+
Ticks = new Ticks()
51+
{
52+
MaxRotation = 0,
53+
MinRotation = 0
54+
}
5455
}
55-
}
56-
},
57-
{
58-
Scales.YAxisId, new Axis()
56+
},
5957
{
60-
Stacked = true
58+
Scales.YAxisId, new Axis()
59+
{
60+
Stacked = true,
61+
Title = new AxesTitle()
62+
{
63+
Display = true,
64+
Text = "This is an Y title"
65+
}
66+
}
6167
}
6268
}
6369
}
64-
}
6570
};
6671

6772
_config1.Data.Labels = BarDataExamples.SimpleBarText;
@@ -121,7 +126,12 @@ protected override async Task OnInitializedAsync()
121126
{
122127
Scales.YAxisId, new Axis()
123128
{
124-
Stacked = true
129+
Stacked = true,
130+
Title = new AxesTitle()
131+
{
132+
Display = true,
133+
Text = "This is an Y title"
134+
}
125135
}
126136
}
127137
}

‎ChartjsDemo/Pages/LineMultiAxes.razor‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
@page "/lineMultiAxes"
2+
3+
<h3>Line Multi Axes</h3>
4+
5+
<p>
6+
The graph can have multiple X axis and this is useful when you want to group some data. In this example, the graph shows the number of votes for the years <b>2015</b> and <b>2015</b> for <b>January</b> to <b>March</b>.
7+
</p>
8+
9+
<p>
10+
To achieve that, under <b>Options</b>, there is <b>GroupXAxis</b>: if the property is set to <b>True</b>, the property adds 2 <b>XAxis</b> and check for the labels to display. Separate one value from another with a semicolumn (<b>;</b>) The label should be contains:
11+
</p>
12+
13+
<ol>
14+
<li>the label to display</li>
15+
<li>the label for the group</li>
16+
<li>any value that identifies when the label for the group has to be display (in the example below the <i>Y</i> is where I define in corrispondence of what I want to display the label).</li>
17+
</ol>
18+
19+
<Chart Config="_config1" @ref="_chart1" Height="400px"></Chart>
20+
21+
<hr />
22+
23+
<h3>Code</h3>
24+
25+
<p>
26+
This is the component to add in your page.
27+
</p>
28+
29+
<CodeSnippet Language="Language.xml" Style="Style.VisualStudio">
30+
&ltChart Config="_config1" &#64;ref="_chart1">&lt;Chart>
31+
</CodeSnippet>
32+
33+
<p>
34+
Then, in the code section, add the following code:
35+
</p>
36+
37+
<CodeSnippet Language="Language.csharp" Style="Style.VisualStudio" LoadMainScript="false">
38+
private LineChartConfig? _config1;
39+
private Chart? _chart1;
40+
41+
public static List&lt;string> MultiAxesLineText = new List&lt;string>() {
42+
"January;2015", "February;2015;Y", "March;2015",
43+
"January;2016", "February;2016;Y", "March;2016" };
44+
public static List&lt;decimal> MultiAxesLine = new List&lt;decimal>() { 12, 19, 3, 5, 2, 3 };
45+
46+
protected override async Task OnInitializedAsync()
47+
{
48+
_config1 = new LineChartConfig()
49+
{
50+
Options = new Options()
51+
{
52+
GroupXAxis = true
53+
}
54+
};
55+
56+
_config1.Data.Labels = LineDataExamples.SimpleLineText;
57+
_config1.Data.Datasets.Add(new LineDataset()
58+
{
59+
Label = "My First Dataset",
60+
Data = LineDataExamples.SimpleLine.ToList(),
61+
BorderColor = Colors.PaletteBorder1.FirstOrDefault(),
62+
Tension = 0.1M,
63+
Fill = false,
64+
PointRadius= 15,
65+
PointStyle = PointStyle.Cross
66+
});
67+
}
68+
</CodeSnippet>
69+
70+
@code {
71+
private LineChartConfig? _config1;
72+
private Chart? _chart1;
73+
74+
protected override async Task OnInitializedAsync()
75+
{
76+
_config1 = new LineChartConfig()
77+
{
78+
Options = new Options()
79+
{
80+
GroupXAxis = true
81+
}
82+
};
83+
84+
_config1.Data.Labels = LineDataExamples.MultiAxesLineText;
85+
_config1.Data.Datasets.Add(new LineDataset()
86+
{
87+
Label = "# of Votes",
88+
Data = LineDataExamples.MultiAxesLine.ToList(),
89+
BorderColor = Colors.PaletteBorder1.FirstOrDefault(),
90+
Tension = 0.1M,
91+
Fill = false,
92+
PointRadius= 15,
93+
PointStyle = PointStyle.Cross
94+
});
95+
}
96+
}

‎ChartjsDemo/Pages/PieMulti.razor‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,16 @@ protected override async Task OnInitializedAsync()
6969
{
7070
Options = new PieOptions()
7171
{
72-
Responsive = true,
73-
MaintainAspectRatio = false
72+
Responsive = true,
73+
MaintainAspectRatio = false,
74+
Plugins = new Plugins()
75+
{
76+
Legend = new Legend()
77+
{
78+
Display = true,
79+
Position = LegendPosition.Left
80+
}
81+
}
7482
}
7583
};
7684

‎ChartjsDemo/Shared/MainLayout.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<main>
99
<div class="top-row px-4">
10-
<a href="https://www.puresourcecode.com" target="_blank">PureSourceCode.com</a>
10+
<a href="https://www.puresourcecode.com" target="_blank"><img src="psc_logo.png" width="25px" />PureSourceCode.com</a>
1111
<a href="https://www.puresourcecode.com/dotnet/blazor/blazor-component-for-chartjs/" target="_blank">Post</a>
1212
<a href="https://www.puresourcecode.com/forum/chart-js-for-blazor/" target="_blank">Forum</a>
1313
</div>

‎ChartjsDemo/Shared/NavMenu.razor‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,11 @@
3434
<span class="oi oi-graph" aria-hidden="true"></span> Line Simple
3535
</NavLink>
3636
</div>
37+
<div class="nav-item px-3">
38+
<NavLink class="nav-link" href="lineMultiAxes">
39+
<span class="oi oi-graph" aria-hidden="true"></span> Line Multi Axes
40+
</NavLink>
41+
</div>
3742
<div class="nav-item px-3">
3843
<NavLink class="nav-link" href="pieSimple">
3944
<span class="oi oi-pie-chart" aria-hidden="true"></span> Pie Simple

0 commit comments

Comments
 (0)