We are having problems with Highchart Column chart, the yaxis labels displayed are not consistent. The Column bars generated are between two yaxis labels. This gives the appearance of there is no yaxis scales and the bars are floating.
And also it is not generating the 0 yaxis scale from which the bar starts all the time. We have both negative and positive values, so the bar should be displayed above and below the 0 yaxis line.
We cannot post a sample because the behaviour is random, it works correctly most of the time only on some occasions it is not working (quiet regular to ignore though).
Please find below the column chart setting options:
{
chart: {
type: 'column',
height: response.ChartHeight ? response.ChartHeight : ChartDefaults.Height
},
xAxis: {
categories: response.TimePeriodTranslated,
labels: {
style: {
fontSize: (response.ChartFontSize ? response.ChartFontSize + 'pt' : ChartDefaults.FontSize)
}
}
},
yAxis: {
startOnTick: true,
title: {
text: ''
},
labels: {
style: {
fontSize: (response.ChartFontSize ? response.ChartFontSize + 'pt' : ChartDefaults.FontSize)
}
}
},
tooltip: {
useHTML: true,
formatter: function () {
return this.series.name + "<br>" + this.x + " </b> : <b> " + this.y.toFixed(response.NumberOfDecimal ? 2 : response.NumberOfDecimal);
}
},
title: {
text: response.ShowAsAtDate == 1 ? modelContents.GetTranslation('AsAt') + ' ' + response.AsAtDate : '',
align: 'left',
//x: 70,
style: {
fontSize: (response.ChartFontSize ? response.ChartFontSize + 'pt' : ChartDefaults.FontSize)
}
},
subtitle: {
text: '',
style: {
fontSize: (response.ChartFontSize ? response.ChartFontSize + 'pt' : ChartDefaults.FontSize)
}
},
legend: {
enabled: true,
itemStyle: {
fontSize: (response.ChartFontSize ? response.ChartFontSize + 'pt' : ChartDefaults.FontSize)
}
},
credits: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: response.ShowDataLabels == 1 ? true : false,
formatter: function () {
return this.y ? this.y.toFixed(response.NumberOfDecimal ? 2 : response.NumberOfDecimal) : this.y;
},
style: {
fontSize: (response.ChartFontSize ? response.ChartFontSize + 'pt' : ChartDefaults.FontSize)
}
},
//To set the bar width.
//pointWidth: GetBarSettings(dataToPlot)
},
column: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
// This can be handled in the drilldown event but our requirements with drilldown need this event implementation
SetChart(e, data, divId, dataId);
}
}
}
}
},
series: dataToPlot
};
Thanks, Sarath