javascript - Highcharts Column chart with drilldown, remove hyperlink like formatting from x-axis labels -
i using column chart
drilldown
. here jsfiddle.
now problem is:
- i want remove hyperlink formatting labels on x-axis , datalabels
as able notice fiddle have tried apply formatting on x-axis labels using code like:
xaxis: { type: 'category', labels:{ style:{ color: 'red', textdecoration:"none" } } },
and used following code format datalabels:
plotoptions: { series: { borderwidth: 0, datalabels: { enabled: true, format: '{point.y:.1f}%', style:{ color: 'blue', textdecoration:"none" } } } }
but problem is: formatting works x-axis labels , datalabels that not have drilldown data. while works on x-axis labels , datalabels of drilldowned data !
useful references: http://api.highcharts.com/highcharts#xaxis.labels.style http://api.highcharts.com/highcharts#series.data.datalabels
any appreciated !
you need overwrite drilldown function, avoid add action labels.
http://jsfiddle.net/phpdeveloperrahul/fw64t/
(function (h) { h.wrap(h.point.prototype, 'init', function (proceed, series, options, x) { var point = proceed.call(this, series, options, x), chart = series.chart, tick = series.xaxis && series.xaxis.ticks[x], ticklabel = tick && tick.label; if (point.drilldown) { // add click event point label h.addevent(point, 'click', function () { point.dodrilldown(); }); // make axis labels clickable if (ticklabel) { if (!ticklabel._basicstyle) { ticklabel._basicstyle = ticklabel.element.getattribute('style'); } ticklabel.addclass('highcharts-drilldown-axis-label') .css({ 'text-decoration': 'none', 'font-weight': 'normal', 'cursor': 'auto' }) .on('click', function () { if (point.dodrilldown) { return false; } }); } } else if (ticklabel && ticklabel._basicstyle) { } return point; }); })(highcharts);
Comments
Post a Comment