[Question]: Highcharts: highly column chart with only one point in drilldown, how to move it to the left side
author(s):
Torstein Hønsi
by Aman Adhikari
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<h3>Highcharts: A highly customized application demo</h3>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<a href="http://api.highcharts.com">Highcharts API reference link</a>
JavaScript
$(function () {
var renderer;
var groups = {};
(function (H) {
//DATALABELS
H.wrap(H.Series.prototype, 'drawDataLabels', function (proceed) {
var css = this.chart.options.drilldown.activeDataLabelStyle;
proceed.call(this);
css.textDecoration = 'none';
css.fontWeight = 'normal';
css.cursor = 'default';
css.color = 'blue';
H.each(this.points, function (point) {
if (point.drilldown && point.dataLabel) {
point.dataLabel
.css(css)
.on('click', function () {
return false;
});
}
});
});
//For X-axis labels
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;
//console.log("series");
//console.log(series);
console.log("Point = ");
console.log(point.name);
if (point.drilldown) {
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',
'color':'brown'
}).on('click', function () {
if (point.doDrilldown) {
return false;
...