How to make the X axis label show as hypelink

Question

I want to make the X axis label show as a clickable hypelink.

I used the following code to render chart:

private void InitializeChartForTopUsers(ChartProperties chartModel,List<TopUserViewModel> ls,string chartName)

{

chartModel.Loaded = "chartLoaded";

chartModel.IsResponsive = true;

chartModel.PrimaryXAxis.LabelIntersectAction = Syncfusion.JavaScript.DataVisualization.LabelIntersectAction.Rotate45;

chartModel.Title = new ChartTitle() {Text=chartName };

Series series = new Series();

series.Name = "UnMarked";

series.Fill = "#49a3ed";

series.EnableAnimation = true;

series.Marker.DataLabel.Visible = true;

series.Marker.DataLabel.Font = new ChartFont() {Color= "#ffffff"};

series.Marker.DataLabel.TextPosition = Syncfusion.JavaScript.DataVisualization.TextPosition.Middle;

series.Type = Syncfusion.JavaScript.DataVisualization.SeriesType.StackingColumn;

series.VisibleOnLegend = Syncfusion.JavaScript.DataVisualization.VisibleOnLegend.Visible;

foreach (var item in ls)

{

Points topuser = new Points();

topuser.X = item.OwnerId.ToString();

topuser.Y = item.ReplyCount - item.AcceptCount;

series.Tooltip.Visible = true;

series.Points.Add(topuser);

}

chartModel.Series.Add(series);

Series series1 = new Series();

series1.Fill = "#71ba35";

series1.Name = "Marked";

series1.EnableAnimation = true;

series1.Marker.DataLabel.Visible = true;

series1.Marker.DataLabel.Font = new ChartFont() { Color = "#ffffff" };

series1.Marker.DataLabel.TextPosition = Syncfusion.JavaScript.DataVisualization.TextPosition.Middle;

series1.Type = Syncfusion.JavaScript.DataVisualization.SeriesType.StackingColumn;

series1.VisibleOnLegend = Syncfusion.JavaScript.DataVisualization.VisibleOnLegend.Visible;

foreach (var item in ls)

{

Points topuser = new Points();

topuser.X = item.OwnerId.ToString();

topuser.Y = item.AcceptCount;

series1.Tooltip.Visible = true;

series1.Points.Add(topuser);

}

chartModel.Series.Add(series1);

}

Baby Palanidurai · Answer

Hi Xavier,

Thanks for using syncfusion products,

We have analyzed your query. As a workaround, we have achieved your scenario by creating hyper link for each axis label by binding click event. In this sample, in chart loaded, we have bind click event for each label and added the hyper link.

Please find the code snippet below to achieve this requirement/

<ej-chart id="container” loaded="chartLoaded">

</ej-chart>

///

function chartLoaded(sender) {

var axislabelCollection = document.getElementById('container_svg_XAxisLabels_0');

var label;

for (var i = 0; i < axislabelCollection.children.length; i++) {

label = axislabelCollection.children[i];

label.style.cursor = 'pointer';

label.onclick = function () {

var aEl = document.createElement('a');

aEl.rel='nofollow' href = 'https://js.syncfusion.com/demos/web/';

aEl.target = '_blank';

aEl.innerHTML = label.innerHTML;

aEl.click();

}

Screenshot:

Sample for reference can be find from below link.

https://www.syncfusion.com/downloads/support/forum/137836/ze/CoreSB-1813115240

Kindly revert us, if this is not your requirement and send us more detail on this.

Thanks,

Baby.

Timo · Answer

Hi Baby Palanidurai,Your code did not work well. function chartLoaded(sender) {                        var axislabelCollection = $("#" + this._id + "_svg_XAxisLabels_0");                        var label;            for (var i = 0; i < axislabelCollection.children.length; i++) {                                label = axislabelCollection.children[i];                                label.style.cursor = 'pointer';                label.onclick = function () {                    var aEl = document.createElement('a');                    aEl.href = 'https://abc.com/users/' + label.innerHTML;                    alert(aEl.href);                    aEl.target = '_blank';                    aEl.innerHTML = label.innerHTML;                    aEl.click();                }            }        }My href was set dynamically, but if I used your code, you could see that it always uses the latest label's innerHTML.

Baby Palanidurai · Answer

Hi Xavier,

Sorry for the inconvenience caused,

We have checked your scenario at our end. Please try the axisLabelClick event for linking hyper link for axis labels, this event fires while clicking the axis labels. As for your requirement we have prepared sample with axisLabelClick event. In that event, we have added dynamic link for clicked axis labels.

Please find the code snippet to achieve this requirement,

<ej-chart id="container" axis-label-click="axisLabelClick">

</ej-chart>

function axisLabelClick(args) {

var label = document.getElementById('container_svg_PrimaryAxis_XLabel_' + args.data.index);

var aEl = document.createElement('a');

aEl.rel='nofollow' href = 'https://abc.com/users/' + label.innerHTML;

alert(aEl.rel='nofollow' href);

aEl.target = '_blank';

aEl.innerHTML = label.innerHTML;

aEl.click();

}

Screenshot:

Click the label and show the link in alert box:

Sample for your reference can be find from below link,

https://www.syncfusion.com/downloads/support/forum/137836/ze/labelLink-996185617

Kindly revert us, if you have any concerns.

Thanks,

Baby.

Timo · Answer

Hi Baby Palanidurai,I referred to your code sample and made a code sample to test, but it did not work on my side. Please check my Code sample to help me diagnose this issue.You could see that I cannot click the X-axis, but the Y-axis can be clicked.

Baby Palanidurai · Answer

Hi Xavier,

We have checked the attached sample, in that we found only DateTimePicker and Grid control.

Kindly revert us with the chart sample, which will be helpful for us to analyze and provide an appropriate solution.

On running the sample, only DateTimePicker and grid are rendering.

Thanks,

Baby.