Skip to content

Commit 994f180

Browse files
erossinierossini
authored
Merge pull request #31 from erossini/feature/groupYAxis
Add GroupYAxis
2 parents 0845449 + 0cb5e2b commit 994f180

10 files changed

Lines changed: 276 additions & 13 deletions

File tree

‎ChartjsDemo/Pages/BarHorizontal.razor‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@page "/barSimple"
1+
@page "/barHorizontal"
22

33
<h3>Bar Simple</h3>
44

@@ -30,6 +30,7 @@ protected override async Task OnInitializedAsync()
3030
{
3131
Options = new Options()
3232
{
33+
IndexAxis = "y",
3334
Responsive = true,
3435
MaintainAspectRatio = false,
3536
Plugins = new Plugins()
@@ -86,6 +87,7 @@ protected override async Task OnInitializedAsync()
8687
{
8788
Options = new Options()
8889
{
90+
IndexAxis = "y",
8991
Responsive = true,
9092
MaintainAspectRatio = false,
9193
Plugins = new Plugins()

‎ChartjsDemo/Pages/BarSimple.razor‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@page "/barHorizontal"
1+
@page "/barSimple"
22

33
<h3>Bar Simple</h3>
44

@@ -86,15 +86,14 @@ protected override async Task OnInitializedAsync()
8686
{
8787
Options = new Options()
8888
{
89-
IndexAxis = "y",
9089
Responsive = true,
9190
MaintainAspectRatio = false,
9291
Plugins = new Plugins()
9392
{
9493
Legend = new Legend()
9594
{
9695
Align = Align.Center,
97-
Display = false,
96+
Display = true,
9897
Position = LegendPosition.Right
9998
}
10099
},

‎ChartjsDemo/Pages/LineMultiAxes.razor‎

Lines changed: 55 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@ To achieve that, under <b>Options</b>, there is <b>GroupXAxis</b>: if the proper
1818

1919
<Chart Config="_config1" @ref="_chart1" Height="400px"></Chart>
2020

21+
<p>
22+
Also, the graph can have multiple Y axis. In the following example, I use the same values from the example above but the axises are inverted and the group is on Y.
23+
</p>
24+
25+
<Chart Config="_config2" @ref="_chart2" Height="400px"></Chart>
26+
2127
<hr />
2228

2329
<h3>Code</h3>
@@ -37,6 +43,8 @@ To achieve that, under <b>Options</b>, there is <b>GroupXAxis</b>: if the proper
3743
<CodeSnippet Language="Language.csharp" Style="Style.VisualStudio" LoadMainScript="false">
3844
private LineChartConfig? _config1;
3945
private Chart? _chart1;
46+
private LineChartConfig? _config2;
47+
private Chart? _chart2;
4048

4149
public static List&lt;string> MultiAxesLineText = new List&lt;string>() {
4250
"January;2015", "February;2015;Y", "March;2015",
@@ -53,23 +61,46 @@ protected override async Task OnInitializedAsync()
5361
}
5462
};
5563

56-
_config1.Data.Labels = LineDataExamples.SimpleLineText;
64+
_config1.Data.Labels = LineDataExamples.MultiAxesLineText;
5765
_config1.Data.Datasets.Add(new LineDataset()
5866
{
59-
Label = "My First Dataset",
60-
Data = LineDataExamples.SimpleLine.ToList(),
67+
Label = "# of Votes",
68+
Data = LineDataExamples.MultiAxesLine.ToList(),
6169
BorderColor = Colors.PaletteBorder1.FirstOrDefault(),
6270
Tension = 0.1M,
6371
Fill = false,
6472
PointRadius= 15,
6573
PointStyle = PointStyle.Cross
6674
});
75+
76+
_config2 = new LineChartConfig()
77+
{
78+
Options = new Options()
79+
{
80+
GroupYAxis = true,
81+
IndexAxis = "y"
82+
}
83+
};
84+
85+
_config2.Data.Labels = LineDataExamples.MultiAxesLineText;
86+
_config2.Data.Datasets.Add(new LineDataset()
87+
{
88+
Label = "# of Votes",
89+
Data = LineDataExamples.MultiAxesLine.ToList(),
90+
BorderColor = Colors.PaletteBorder1.FirstOrDefault(),
91+
Tension = 0.1M,
92+
Fill = false,
93+
PointRadius = 15,
94+
PointStyle = PointStyle.Cross
95+
});
6796
}
6897
</CodeSnippet>
6998

7099
@code {
71100
private LineChartConfig? _config1;
72101
private Chart? _chart1;
102+
private LineChartConfig? _config2;
103+
private Chart? _chart2;
73104

74105
protected override async Task OnInitializedAsync()
75106
{
@@ -92,5 +123,26 @@ protected override async Task OnInitializedAsync()
92123
PointRadius= 15,
93124
PointStyle = PointStyle.Cross
94125
});
126+
127+
_config2 = new LineChartConfig()
128+
{
129+
Options = new Options()
130+
{
131+
GroupYAxis = true,
132+
IndexAxis = "y"
133+
}
134+
};
135+
136+
_config2.Data.Labels = LineDataExamples.MultiAxesLineText;
137+
_config2.Data.Datasets.Add(new LineDataset()
138+
{
139+
Label = "# of Votes",
140+
Data = LineDataExamples.MultiAxesLine.ToList(),
141+
BorderColor = Colors.PaletteBorder1.FirstOrDefault(),
142+
Tension = 0.1M,
143+
Fill = false,
144+
PointRadius = 15,
145+
PointStyle = PointStyle.Cross
146+
});
95147
}
96148
}

‎ChartjsDemo/Pages/StackedBarSimple.razor‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
@page "/stackedbar"
2+
3+
<h3>Bar 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 BarChartConfig? _config1;
25+
private Chart? _chart1;
26+
27+
protected override async Task OnInitializedAsync()
28+
{
29+
_config1 = new BarChartConfig()
30+
{
31+
Options = new Options()
32+
{
33+
Responsive = true,
34+
MaintainAspectRatio = false,
35+
Plugins = new Plugins()
36+
{
37+
Legend = new Legend()
38+
{
39+
Align = Align.Center,
40+
Display = true,
41+
Position = LegendPosition.Right
42+
}
43+
},
44+
Scales = new Dictionary&lt;string, Axis>()
45+
{
46+
{
47+
Scales.XAxisId, new Axis()
48+
{
49+
Stacked = true,
50+
Ticks = new Ticks()
51+
{
52+
MaxRotation = 0,
53+
MinRotation = 0
54+
}
55+
}
56+
},
57+
{
58+
Scales.YAxisId, new Axis()
59+
{
60+
Stacked = true
61+
}
62+
}
63+
},
64+
IndexAxis = Axes.Y
65+
}
66+
};
67+
68+
_config1.Data.Labels = BarDataExamples.GroupedLabels;
69+
_config1.Data.Datasets.Add(new BarDataset()
70+
{
71+
Label = "Value",
72+
Data = BarDataExamples.Grouped1,
73+
BackgroundColor = new List&lt;string>() { Colors.Palette1.First() },
74+
BorderColor = new List&lt;string>() { Colors.Palette1.First() },
75+
BorderWidth = 1
76+
});
77+
_config1.Data.Datasets.Add(new BarDataset()
78+
{
79+
Label = "Value2",
80+
Data = BarDataExamples.Grouped2,
81+
BackgroundColor = new List&lt;string>() { Colors.PaletteBorder1.First() },
82+
BorderColor = new List&lt;string>() { Colors.PaletteBorder1.First() },
83+
BorderWidth = 1
84+
});
85+
}
86+
</CodeSnippet>
87+
88+
@code {
89+
private BarChartConfig? _config1;
90+
private Chart? _chart1;
91+
92+
protected override async Task OnInitializedAsync()
93+
{
94+
_config1 = new BarChartConfig()
95+
{
96+
Options = new Options()
97+
{
98+
Responsive = true,
99+
MaintainAspectRatio = false,
100+
Plugins = new Plugins()
101+
{
102+
Legend = new Legend()
103+
{
104+
Align = Align.Center,
105+
Display = true,
106+
Position = LegendPosition.Right
107+
}
108+
},
109+
Scales = new Dictionary<string, Axis>()
110+
{
111+
{
112+
Scales.XAxisId, new Axis()
113+
{
114+
Stacked = true,
115+
Ticks = new Ticks()
116+
{
117+
MaxRotation = 0,
118+
MinRotation = 0
119+
}
120+
}
121+
},
122+
{
123+
Scales.YAxisId, new Axis()
124+
{
125+
Stacked = true
126+
}
127+
}
128+
},
129+
IndexAxis = Axes.Y
130+
}
131+
};
132+
133+
_config1.Data.Labels = BarDataExamples.GroupedLabels;
134+
_config1.Data.Datasets.Add(new BarDataset()
135+
{
136+
Label = "Value",
137+
Data = BarDataExamples.Grouped1,
138+
BackgroundColor = new List<string>() { Colors.Palette1.First() },
139+
BorderColor = new List<string>() { Colors.Palette1.First() },
140+
BorderWidth = 1
141+
});
142+
_config1.Data.Datasets.Add(new BarDataset()
143+
{
144+
Label = "Value2",
145+
Data = BarDataExamples.Grouped2,
146+
BackgroundColor = new List<string>() { Colors.PaletteBorder1.First() },
147+
BorderColor = new List<string>() { Colors.PaletteBorder1.First() },
148+
BorderWidth = 1
149+
});
150+
}
151+
}

‎ChartjsDemo/Shared/NavMenu.razor‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,11 @@
2929
<span class="oi oi-bar-chart" aria-hidden="true"></span> Horizontal Bar
3030
</NavLink>
3131
</div>
32+
<div class="nav-item px-3">
33+
<NavLink class="nav-link" href="stackedbar">
34+
<span class="oi oi-bar-chart" aria-hidden="true"></span> Stacked Bar
35+
</NavLink>
36+
</div>
3237
<div class="nav-item px-3">
3338
<NavLink class="nav-link" href="lineSimple">
3439
<span class="oi oi-graph" aria-hidden="true"></span> Line Simple

‎src/Models/Common/Legend.cs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ public Align? Align
5454
/// <value><c>null</c> if fullSize contains no value, <c>true</c> is the default; otherwise, <c>false</c>.</value>
5555
[JsonPropertyName("fullSize")]
5656
[JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
57-
public bool? FullSize { get; set; } = true;
57+
public bool? FullSize { get; set; }
5858

5959
/// <summary>
6060
/// Gets or sets the position.
@@ -90,7 +90,7 @@ public LegendPosition Position
9090
/// <c>true</c> if reverse; otherwise, <c>false</c>.
9191
/// </value>
9292
[JsonPropertyName("reverse")]
93-
public bool Reverse { get; set; } = false;
93+
public bool Reverse { get; set; }
9494

9595
/// <summary>
9696
/// Gets or sets a value indicating if the <see cref="Legend"/> will be rendered from right to left.

‎src/Models/Common/Options.cs‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,38 @@ public bool? GroupXAxis {
9090
}
9191
private bool? _groupXAxis;
9292

93+
/// <summary>
94+
/// Gets or sets a value indicating whether [group y axis].
95+
/// </summary>
96+
/// <value><c>null</c> if [group y axis] contains no value, <c>true</c> if [group y axis]; otherwise, <c>false</c>.</value>
97+
[JsonPropertyName("groupYAxis")]
98+
[JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
99+
public bool? GroupYAxis
100+
{
101+
get => _groupYAxis;
102+
set
103+
{
104+
_groupYAxis = value;
105+
106+
if (Scales == null)
107+
Scales = new Dictionary<string, Axis>();
108+
109+
if (Scales.Keys.Where(k => k == "y").Count() == 0)
110+
Scales.Add("y", new Axis() { Ticks = new Ticks() });
111+
if (Scales.Keys.Where(k => k == "yAxis2").Count() == 0)
112+
Scales.Add("yAxis2", new Axis()
113+
{
114+
Type = "category",
115+
Grid = new Grid()
116+
{
117+
DrawOnChartArea = false
118+
},
119+
Ticks = new Ticks()
120+
});
121+
}
122+
}
123+
private bool? _groupYAxis;
124+
93125
/// <summary>
94126
/// Gets a value indicating whether this instance has on hover asynchronous.
95127
/// </summary>

‎src/Models/Common/StringEnums/LegendPosition.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ public static LegendPosition Left
5252
/// Right
5353
/// </value>
5454
public static LegendPosition Right
55-
{ get { return new LegendPosition("Right"); } }
55+
{ get { return new LegendPosition("right"); } }
5656

5757
/// <summary>
5858
/// Gets the value.

‎src/PSC.Blazor.Components.Chartjs.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<PackageIcon>psc_logo.png</PackageIcon>
88
<ApplicationIcon>psc_ico.ico</ApplicationIcon>
99
<PackageReadmeFile>README.md</PackageReadmeFile>
10-
<PackageReleaseNotes>Add multiple axes - Fix few bugs</PackageReleaseNotes>
10+
<PackageReleaseNotes>Fix legend</PackageReleaseNotes>
1111
<PackAsTool>False</PackAsTool>
1212
<Copyright>Enrico Rossini - PureSourceCode.com</Copyright>
1313
<RepositoryType>git</RepositoryType>

0 commit comments

Comments
 (0)