Skip to content

Commit 2d14a7c

Browse files
BuvanaSathasivamBuvanaSathasivam
authored
Merge pull request #4684 from syncfusion-content/EJ2-935608-labelTemplate
987389: To add a content for axis label template in MVC and Core documentation
2 parents 6afbb86 + 5768e33 commit 2d14a7c

File tree

7 files changed

+140
-0
lines changed

7 files changed

+140
-0
lines changed

‎ej2-asp-core-mvc/chart/EJ2_ASP.MVC/axis-labels.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -449,3 +449,29 @@ Line break feature used to customize the long axis label text into multiple line
449449
{% endtabs %}
450450
{% endif %}
451451

452+
453+
## Axis label template
454+
455+
The axis label template allows you to customize axis labels by formatting them with HTML content, applying conditional styling, and including dynamic elements such as icons, images or additional data. This customization is enabled by setting the template content in the `LabelTemplate` property of the [ChartAxis](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartAxis.html).
456+
457+
{% if page.publishingplatform == "aspnet-core" %}
458+
459+
{% tabs %}
460+
{% highlight c# tabtitle="Label-template.cs" %}
461+
{% include code-snippet/chart/axis/multiple/label-template/label-template.cs %}
462+
{% endhighlight %}
463+
{% endtabs %}
464+
465+
{% elsif page.publishingplatform == "aspnet-mvc" %}
466+
467+
{% tabs %}
468+
{% highlight razor tabtitle="CSHTML" %}
469+
{% include code-snippet/chart/axis/multiple/label-template/razor %}
470+
{% endhighlight %}
471+
{% highlight c# tabtitle="Label-template.cs" %}
472+
{% include code-snippet/chart/axis/multiple/label-template/label-template.cs %}
473+
{% endhighlight %}
474+
{% endtabs %}
475+
{% endif %}
476+
477+
![ASP.NET MVC Chart Control](images/axislabel-template.png)

‎ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/axis-labels.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -449,3 +449,28 @@ Line break feature used to customize the long axis label text into multiple line
449449
{% endtabs %}
450450
{% endif %}
451451

452+
## Axis label template
453+
454+
The axis label template allows you to customize axis labels by formatting them with HTML content, applying conditional styling, and including dynamic elements such as icons, images or additional data. This customization is enabled by setting the template content in the `labelTemplate` property of the [ChartAxis](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartAxis.html).
455+
456+
{% if page.publishingplatform == "aspnet-core" %}
457+
458+
{% tabs %}
459+
{% highlight c# tabtitle="Label-template.cs" %}
460+
{% include code-snippet/chart/axis/multiple/label-template/label-template.cs %}
461+
{% endhighlight %}
462+
{% endtabs %}
463+
464+
{% elsif page.publishingplatform == "aspnet-mvc" %}
465+
466+
{% tabs %}
467+
{% highlight razor tabtitle="CSHTML" %}
468+
{% include code-snippet/chart/axis/multiple/label-template/razor %}
469+
{% endhighlight %}
470+
{% highlight c# tabtitle="Label-template.cs" %}
471+
{% include code-snippet/chart/axis/multiple/label-template/label-template.cs %}
472+
{% endhighlight %}
473+
{% endtabs %}
474+
{% endif %}
475+
476+
![ASP.NET Core Chart Control](images/axislabel-template.png)

‎ej2-asp-core-mvc/chart/images/axislabel-template.png‎

18.5 KB
Loading

‎ej2-asp-core-mvc/code-snippet/chart/axis/multiple/label-template/label-template.cs‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
public ActionResult Index()
2+
{
3+
List<ColumnChartData> chartData = new List<ColumnChartData>
4+
{
5+
new ColumnChartData{ country: 'USA', gold: 46 },
6+
new ColumnChartData{ country: 'UK', gold: 27 },
7+
new ColumnChartData{ country: 'China', gold: 26 },
8+
new ColumnChartData{ country: 'Russia', gold: 19 },,
9+
new ColumnChartData{ country: 'Germany', gold: 17 }
10+
};
11+
ViewBag.dataSource = chartData;
12+
return View();
13+
}
14+
public class ColumnChartData
15+
{
16+
public string country;
17+
public double gold;
18+
}

‎ej2-asp-core-mvc/code-snippet/chart/axis/multiple/label-template/labels-template.cs‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
public ActionResult Index()
2+
{
3+
List<ColumnChartData> chartData = new List<ColumnChartData>
4+
{
5+
new ColumnChartData{ country: 'USA', gold: 46 },
6+
new ColumnChartData{ country: 'UK', gold: 27 },
7+
new ColumnChartData{ country: 'China', gold: 26 },
8+
new ColumnChartData{ country: 'Russia', gold: 19 },,
9+
new ColumnChartData{ country: 'Germany', gold: 17 }
10+
};
11+
ViewBag.dataSource = chartData;
12+
return View();
13+
}
14+
public class ColumnChartData
15+
{
16+
public string country;
17+
public double gold;
18+
}

‎ej2-asp-core-mvc/code-snippet/chart/axis/multiple/label-template/razor‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@Html.EJS().Chart("container").Series(series => {
2+
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column)
3+
.XName("country")
4+
.YName("gold")
5+
.DataSource(ViewBag.dataSource)
6+
.Marker(mr => mr.Visible(true))
7+
.Add();
8+
}).PrimaryXAxis(px =>
9+
px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
10+
).PrimaryYAxis(py =>
11+
py.ValueType(Syncfusion.EJ2.Charts.ValueType.Double)
12+
).Title("Olympic Medals").Width("70%").Load("load").Render()
13+
14+
<script id="AxisLabelTemplate" type="text/x-template">
15+
<table>
16+
<tr>
17+
<td align="center" style="background-color: #2E8B57; font-size: 14px; color: #FFD700; font-weight: bold; padding: 5px">Country :</td>
18+
<td align="center" style="background-color: #4682B4; font-size: 14px; color: #FFFFFF; font-weight: bold; padding: 5px">${label}</td>
19+
</tr>
20+
</table>
21+
</script>
22+
23+
<script>
24+
var load = function (args) {
25+
args.chart.primaryXAxis.labelTemplate = "#AxisLabelTemplate";
26+
};
27+
</script>
28+

‎ej2-asp-core-mvc/code-snippet/chart/axis/multiple/label-template/tagHelper‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<ejs-chart id="container" title="Olympic Medals" width="70%" load="load">
2+
<e-chart-primaryxaxis valueType="Category">
3+
</e-chart-primaryxaxis>
4+
<e-chart-primaryyaxis valueType="Double">
5+
</e-chart-primaryyaxis>
6+
<e-series-collection>
7+
<e-series dataSource="ViewBag.dataSource" xName="country" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
8+
<e-series-marker visible="true"></e-series-marker>
9+
</e-series>
10+
</e-series-collection>
11+
</ejs-chart>
12+
<script id="AxisLabelTemplate" type="text/x-template">
13+
<table>
14+
<tr>
15+
<td align="center" style="background-color: #2E8B57; font-size: 14px; color: #FFD700; font-weight: bold; padding: 5px">Country :</td>
16+
<td align="center" style="background-color: #4682B4; font-size: 14px; color: #FFFFFF; font-weight: bold; padding: 5px">${label}</td>
17+
</tr>
18+
</table>
19+
</script>
20+
21+
<script>
22+
function load(args) {
23+
args.chart.primaryXAxis.labelTemplate = "#AxisLabelTemplate";
24+
}
25+
</script>

0 commit comments

Comments
 (0)