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
}
},
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>
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>
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?