Skip to content

Commit d334ee9

Browse files
erossinierossini
committed
Add Multi Series Pie
1 parent e1326f1 commit d334ee9

4 files changed

Lines changed: 118 additions & 3 deletions

File tree

‎ChartjsDemo/Data/PieDataExamples.cs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,16 @@ public static class PieDataExamples
44
{
55
public static List<string> SimplePieText = new List<string>() { "January", "February", "March" };
66
public static List<decimal> SimplePie = new List<decimal>() { 300, 50, 100 };
7+
8+
public static List<string> MultiPieText = new List<string>() { "Overall Yay", "Overall Nay", "Group A Yay", "Group A Nay", "Group B Yay", "Group B Nay", "Group C Yay", "Group C Nay" };
9+
public static List<decimal> MultiPie1 = new List<decimal>() { 21, 79 };
10+
public static List<decimal> MultiPie2 = new List<decimal>() { 33, 67 };
11+
public static List<decimal> MultiPie3 = new List<decimal>() { 20, 80 };
12+
public static List<decimal> MultiPie4 = new List<decimal>() { 10, 90 };
13+
14+
public static List<string> MultiPieBackground1 = new List<string>() { "#AAA", "#777" };
15+
public static List<string> MultiPieBackground2 = new List<string>() { "hsl(0, 100%, 60%)", "hsl(0, 100%, 35%)" };
16+
public static List<string> MultiPieBackground3 = new List<string>() { "hsl(100, 100%, 60%)", "hsl(100, 100%, 35%)" };
17+
public static List<string> MultiPieBackground4 = new List<string>() { "hsl(180, 100%, 60%)", "hsl(180, 100%, 35%)" };
718
}
819
}

‎ChartjsDemo/Pages/PieMulti.razor‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
@page "/pieMulti"
2+
3+
<h3>Pie Simple</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 PieChartConfig _config1;
25+
private Chart _chart1;
26+
27+
protected override async Task OnInitializedAsync()
28+
{
29+
_config1 = new PieChartConfig()
30+
{
31+
Options = new Options()
32+
{
33+
Responsive = true,
34+
MaintainAspectRatio = false
35+
}
36+
};
37+
38+
_config1.Data.Labels = PieDataExamples.MultiPieText;
39+
_config1.Data.Datasets.Add(new PieDataset()
40+
{
41+
Data = PieDataExamples.MultiPie1,
42+
BackgroundColor = PieDataExamples.MultiPieBackground1,
43+
});
44+
_config1.Data.Datasets.Add(new PieDataset()
45+
{
46+
Data = PieDataExamples.MultiPie2,
47+
BackgroundColor = PieDataExamples.MultiPieBackground2,
48+
});
49+
_config1.Data.Datasets.Add(new PieDataset()
50+
{
51+
Data = PieDataExamples.MultiPie3,
52+
BackgroundColor = PieDataExamples.MultiPieBackground3,
53+
});
54+
_config1.Data.Datasets.Add(new PieDataset()
55+
{
56+
Data = PieDataExamples.MultiPie4,
57+
BackgroundColor = PieDataExamples.MultiPieBackground4,
58+
});
59+
}
60+
</CodeSnippet>
61+
62+
@code {
63+
private PieChartConfig? _config1;
64+
private Chart? _chart1;
65+
66+
protected override async Task OnInitializedAsync()
67+
{
68+
_config1 = new PieChartConfig()
69+
{
70+
Options = new Options()
71+
{
72+
Responsive = true,
73+
MaintainAspectRatio = false
74+
}
75+
};
76+
77+
_config1.Data.Labels = PieDataExamples.MultiPieText;
78+
_config1.Data.Datasets.Add(new PieDataset()
79+
{
80+
Data = PieDataExamples.MultiPie1,
81+
BackgroundColor = PieDataExamples.MultiPieBackground1,
82+
});
83+
_config1.Data.Datasets.Add(new PieDataset()
84+
{
85+
Data = PieDataExamples.MultiPie2,
86+
BackgroundColor = PieDataExamples.MultiPieBackground2,
87+
});
88+
_config1.Data.Datasets.Add(new PieDataset()
89+
{
90+
Data = PieDataExamples.MultiPie3,
91+
BackgroundColor = PieDataExamples.MultiPieBackground3,
92+
});
93+
_config1.Data.Datasets.Add(new PieDataset()
94+
{
95+
Data = PieDataExamples.MultiPie4,
96+
BackgroundColor = PieDataExamples.MultiPieBackground4,
97+
});
98+
}
99+
}

‎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-pie-chart" aria-hidden="true"></span> Pie Simple
3535
</NavLink>
3636
</div>
37+
<div class="nav-item px-3">
38+
<NavLink class="nav-link" href="pieMulti">
39+
<span class="oi oi-pie-chart" aria-hidden="true"></span> Pie Multi Series
40+
</NavLink>
41+
</div>
3742
<div class="nav-item px-3">
3843
<NavLink class="nav-link" href="doughnutSimple">
3944
<span class="oi oi-pie-chart" aria-hidden="true"></span> Doughnut Simple

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -105,18 +105,18 @@ _config1.Data.Datasets.Add(new Dataset()
105105

106106
The result of the code above is this chart
107107

108-
![image](https://user-images.githubusercontent.com/9497415/145194274-63997957-82ab-4b38-a2bf-bdd748c2b005.png)
108+
![image](https://user-images.githubusercontent.com/9497415/196763122-306142fa-e810-47fc-af06-12d4889ab21f.png)
109109

110110
## Implemented charts
111111
- [x] Bar chart
112112
- [x] Line chart
113113
- [x] Area
114-
- [ ] Other charts
114+
- [x] Other charts
115115
- [x] Scatter
116116
- [x] Scatter - Multi axis
117117
- [x] Doughnut
118118
- [x] Pie
119-
- [ ] Multi Series Pie
119+
- [x] Multi Series Pie
120120
- [x] Polar area
121121
- [x] Radar
122122
- [x] Radar skip points

0 commit comments

Comments
 (0)