How to make the X axis label show as hypelink

[Timo]

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]

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]

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.rel='nofollow' href = 'https://abc.com/users/' + label.innerHTML;

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

                    aEl.target = '_blank';

                    aEl.innerHTML = label.innerHTML;

                    aEl.click();

                }

            }

        }

My rel='nofollow' href was set dynamically, but if I used your code, you could see that it always uses the latest label's innerHTML.

[Baby Palanidurai]

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]

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]

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.