chartUser01
Posts: 2
Joined: Mon Apr 12, 2021 6:46 am

Custom data attribute and other attributes disappeared after upgrade

Hi,

I used Highcharts v 8.1.2 until now. Now I try to upgrade to newest version 9.0.1
In one of my more complex charts I used the formatter for the labels of xAxis plus useHTML:true.
This formatter shows an Image plus 2 different buttons at each tick which are used to change to other charts depending on clicked butten.
This seems to be similar to drill function, but I needed two very different drills each point in form of buttons. The label it self should be a text plus an icon. And the following Chart is not really a subset of clicked point. So drilling wasn't the solution

In v 8.1.2 I solved this problem by setting data attributes which I could use within my further javascript function after clicking the button.
In v 9.0.1 these attributes disappeared in generated chartcode and now my following code can't be executed.

To show my problem:

My xAxis definition formatter (simplified without styles):

Code: Select all

                xAxis: {
                            "type": "category",
                            "categories": arrayOfCategoryNames,
                            "labels": {
                                formatter: function () {
                                    var label = arrayOfCategoryNames[this.pos];
                                    var axisLabel = '<div>' + this.value + '</div><div>';
                                    axisLabel = axisLabel + '<img src="' + functionGetCatImage(categoriesMain[this.pos])[0] + '.svg" alt="' + functionGetCatImage(arrayOfCategoryValues[this.pos])[1] "'/> ';
                                    axisLabel = axisLabel + '<br clear="all"/><button data-buttontype="forward" data-type="MYTYPE001"  data-sektor="' + label + '" id="button-tr-' + functionGetCatImage(arrayOfCategoryValues[this.pos])[0] + '" class="forwardbutton" alt="tr"><img data-buttontype="forward" data-type="MYTYPE001"  data-sektor="' + label + '" src=""' + functionGetButtonImage1 + '" height="16px" alt="tr" title="tr"  /></button><button data-buttontype="forward" data-type="MYTYPE002"  data-sektor="' + label + '"  id="button-in-' + functionGetCatImage(arrayOfCategoryValues[this.pos])[0] + '" class="forwardbutton" alt="In"><img data-buttontype="forward" data-type="MYTYPE002"  data-sektor="' + label + '"  src="' + functionGetButtonImage2 +  '"  height="16px"  alt="In" title="In" /></button></div>';
                                    return axisLabel;
                                },
                                useHTML: true
                            }
                        },
Generated code 8.1.2 (simplified - anonymized data / reduced styles):

Code: Select all

<div>PointValue</div><div><img src="pointIcon.svg" height="1em" alt="categorytitle"> <br clear="all"><button data-buttontype="forward" data-type="MYTYPE001" data-sektor="12xxx" id="button-tr-" class="forwardbutton" alt="Zeitreihe" style="width:3em; margin: 3px;padding:0"><img data-buttontype="forward" data-type="MYTYPE001" data-sektor="12xxx" src="buttonImage1.svg" height="16px" alt="tr" title="tr"></button><button data-buttontype="forward" data-type="MYTYPE002" data-sektor="12xxx" id="button-in-" class="forwardbutton" alt="In"><img data-buttontype="forward" data-type="MYTYPE002" data-sektor="12xxx" src="buttonImage2.svg" height="16px" alt="In" title="In"></button></div>	
Generated code 9.0.1 (simplified - anonymized data / reduced styles):

Code: Select all

<div>PointValue</div><div><img src="pointIcon.svg" height="1em"><br  clear="all"><button id="button-tr-" class="forwardbutton"><img src="buttonImage1.svg" height="16px"></button><button id="button-in-" class="forwardbutton"><img src=""buttonImage2.svg" height="16px"></button></div>
You see not only data-attributes disappeared. Also other html-attributes like clear, alt and title.
Why? I thought the formatter shall give me the freedom to generate my elements like I need them.
And how can I do this on another way without getting some usefull items deleted? What can I do with formatter finally now, what will disappear or can I prevent this?
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: Custom data attribute and other attributes disappeared after upgrade

Hi! Welcome to the official highcharts forum, and thanks for contacting us with your question!
As you can read in the changelog here: https://www.highcharts.com/blog/changel ... rts-v9.0.0
Due to improved security, some tags or attributes may be removed from HTML configuration options like labels or tooltip formats and formatters. Read more in the docs on how to allow them.
https://www.highcharts.com/docs/chart-c ... #filtering

Kind regards,
Paweł Lysy
Highcharts Developer
chartUser01
Posts: 2
Joined: Mon Apr 12, 2021 6:46 am

Re: Custom data attribute and other attributes disappeared after upgrade

Thank you for this link, this is the solution :D
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: Custom data attribute and other attributes disappeared after upgrade

You're welcome! In case of any further questions feel free to contact us again! Kind regards
Paweł Lysy
Highcharts Developer
Ashutosh25
Posts: 1
Joined: Tue Dec 06, 2022 4:54 am

Re: Custom data attribute and other attributes disappeared after upgrade

Hello There,

We are facing exact same issue as mentioned above in HighStock implementation. I have found resolution as mentioned in this link
https://api.highcharts.com/class-refere ... charts.AST, but somehow this is not present in HighStock component.
Could you please how can we overcome this issue in HIghStock any reference?
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Custom data attribute and other attributes disappeared after upgrade

Hello,

pawelys sent a link to the documentation where everything is explained step by step how to add some of the tags. Could you send a simplified demo of what exactly are you having trouble with? You can start with one of the demos we have on our site: https://www.highcharts.com/demo/stock/stock-tools-gui

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”