Skip to content

Commit eadcd39

Browse files
smukilansf3478smukilansf3478
committed
987389: To add a content for axis label template in MVC and Core documentation.
1 parent ea3e303 commit eadcd39

File tree

6 files changed

+122
-0
lines changed

6 files changed

+122
-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/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)