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
Related
How can I move the below datalabel football in the top right of the variable pie chart instead of showing in bottom. I tried these options
alignTo: 'connectors' or alignTo: 'toPlotEdges'
But nothing worked for me. Any help will be appreciated
var total = 80;
Highcharts.chart('container', {
chart: {
type: 'variablepie',
height: 370,
marginBottom: 50
},
credits: {
enabled: false
},
title: {
text: 'Football vs cricket',
align: 'center',
y: -5,
verticalAlign: 'bottom',
style: {
fontFamily: 'proxima_nova_bold',
fontSize: '20px',
fontWeight: 'normal',
color: '#8d99ab',
}
},
subtitle: {
text: ' ' + total + '<br/> Total',
useHTML: true,
verticalAlign: 'middle',
y: -20
},
xAxis: {
labels: {
rotation: 0
}
},
plotOptions: {
variablepie: {
size: 220,
dataLabels: {
enabled: true,
connectorColor: '#979797',
useHTML: true,
formatter: function () {
var key;
if(this.key == 'football'){
key = 'as football / Lionel Messi';
}else if(this.key == 'cricket'){
key = 'as cricket / Sachin Tendulkar';
}else{
key = this.key;
}
return '<span class=cls1>' + this.y + '</span>' + '<span class=cls2>' + key + '</span>';
}
},
showInLegend: true,
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
legend: {
enabled: false
},
series: [{
minPointSize: 10,
innerSize: '70%',
zMin: 0,
data: [{name: "football", y: 71, z: 30}, {name: "cricket", y: 2, z: 18}]
}]
});
https://jsfiddle.net/anikettiwari/Lr3zy8qc/2/
You can try to implement one of the options showed here: https://www.highcharts.com/docs/advanced-chart-features/pie-datalabels-alignment
Or use the render callback and set the y position of this particular label manually.
Demo: https://jsfiddle.net/BlackLabel/2oskhmnd/
events: {
render() {
let chart = this;
chart.series[0].points[0].dataLabel.attr({y: 10});
chart.series[0].points[0].connector.hide();
}
}
Unfortunately, this solution requires to render the custom connector to moved dataLabel. You can do it by using some of the methods shown in the above link (pie-datalabels-alignment) or by using SVGRenderer tool to render a path: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
API: https://api.highcharts.com/highcharts/chart.events.render
I am bringing in to my chart json objects, indexed two different ways.
I have a button to flip my index, and it works in the sense that my catagories will flip back and forth, but my new data does not...
var $chart_data = data[1];
$button = $('#button');
var chart_ops_support_times = new Highcharts.Chart({
chart: {
renderTo: 'chart_ops_support_times',
type: 'column'
},
title: {
useHTML: true,
text: '',
align: 'left'
},
subtitle: {
text: ' '
},
xAxis: {
categories: [
'priority 1',
'priority 2',
'priority 3'
]
},
yAxis: {
min: 0,
max: 60,
title: {
text: 'Total Actual Hours by Type',
style: {
fontSize: '8px',
fontWeight: 'normal'
}
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold'
}
}
},
legend: {
align: 'center',
x: 0,
verticalAlign: 'top',
y: 0,
floating: true,
borderColor: '#CCC',
borderWidth: 1,
shadow: false,
symbolHeight: 10,
symbolWidth: 10
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
style: {
textShadow: '0 0 3px black'
}
}
}
},
exporting: {
enabled: false
},
series: $chart_data
});
$button.click(function() {
if (!flipxAxis) {
console.log('flip to priority x axis');
chart_ops_support_times.xAxis[0].categories = priority_bkts ;
chart_ops_support_times.series[0].update({
dataLabels: {
enabled: true
},
series: data[0]
});
chart_ops_support_times.redraw();
} else {
console.log('flip to time span x axis');
chart_ops_support_times.xAxis[0].categories = time_span_bkts;
chart_ops_support_times.series[0].update({
dataLabels: {
enabled: false
},
series: data[1]
});
chart_ops_support_times.redraw();
}
flipxAxis = !flipxAxis;
});
}
I have put in the swap of datalabels just to test if the update is firing, and it is...
I'm working with the highcharts stacked bar and want to remove some space between the bars so I can make room for some text I am rendering.
I've tried pointPadding and groupPadding but those are not working. I've tried minPadding/maxPadding on the xAxis and that did not do anything as well.
Seems the only way get rid of that space is to change the width of the whole chart which is what I really don't want.
Here is my fiddle:
http://jsfiddle.net/nick1572/dfcysj39/
$("#profit-chart").highcharts({
lang: {
thousandsSep: ","
},
chart: {
type: "column",
style: {
fontFamily: "Open Sans, sans-serif"
}
},
legend: {
enabled: false
},
title: {
text: ""
},
xAxis: {
//minPadding: 20, Not working here
//maxPadding:1, Not working here either
categories: [ "other business", "somekind of business profit" ],
labels: {
style: {
color: "#333333",
fontSize: "15px"
}
}
},
yAxis: {
gridLineDashStyle: "longdash",
title: {
text: "Dollars"
},
labels: {
enabled: true,
formatter: function() {
return "$" + Highcharts.numberFormat(this.value, 0, "", ",");
}
}
},
tooltip: {
enabled: false
},
plotOptions: {
column: {
stacking: "normal",
dataLabels: {
enabled: true,
color: "white",
inside: true,
useHTML: true,
style: {
fontSize: "18px",
fontWeight: "600"
}
}
},
series: {
//pointPadding: 0,
//groupPadding: 0, this does not work
animation: {
complete: function() {
}
},
pointWidth: 145
}
},
series: [ {
color: "#327631",
data: [ 0, 850 ],
stack: "female",
dataLabels: {
enabled: true,
formatter: function() {
if (0 != this.y) return "$" + Highcharts.numberFormat(this.y, 0);
else return null;
}
}
}, {
color: "#ADC9AD ",
data: [ 10000, 10000 ],
stack: "female",
dataLabels: {
enabled: true,
formatter: function() {
return "$" + Highcharts.numberFormat(this.y, 0);
}
}
}]
},
function (chart) { // on complete
chart.renderer.text('<span class="bracketed">}</span> <em>Profit</em>', 870, 85)
.css({
color: 'green',
fontSize: '24px',
x: 200
})
.add();
});//End HighCharts Call
Thanks in advance!
it seems that the point width setting is conflicting with the groupPadding and pointPadding .. if you remove the pointWidth: 145 in the series and add groupPadding and pointPadding to the column you will get the gap removed. on the flipside however the bars will take up the entire available width of your chart.
column: {
stacking: "normal",
groupPadding: 0,//add here
pointPadding: 0,//add here
...
}
http://jsfiddle.net/dfcysj39/9/
Ok so I think this may solve my problem at this point. Not sure if its the right way but it works. The pointPadding and groupPadding partially worked for this particular problem. I thank you Birgit for taking the time to respond!!!
What I did to solve this is explicitly put a spacingRight on the chart to give the plot area more space w/o making the bars wider. I did go back and add some pointPadding to make the cols a little wider for aesthetics. This allowed for the rendered text to show.
http://jsfiddle.net/nick1572/dfcysj39/
$("#profit-chart").highcharts({
lang: {
thousandsSep: ","
},
chart: {
spacingRight: 220,
type: "column",
width: 1200,
style: {
fontFamily: "Open Sans, sans-serif"
}
},
legend: {
enabled: false
},
title: {
text: ""
},
xAxis: {
//minPadding: 20, Not working here
//maxPadding:1, Not working here either
categories: [ "other business", "somekind of business profit" ],
labels: {
style: {
color: "#333333",
fontSize: "15px"
}
}
},
yAxis: {
gridLineDashStyle: "longdash",
title: {
text: "Dollars"
},
labels: {
enabled: true,
formatter: function() {
return "$" + Highcharts.numberFormat(this.value, 0, "", ",");
}
}
},
tooltip: {
enabled: false
},
plotOptions: {
column: {
stacking: "normal",
dataLabels: {
enabled: true,
color: "white",
inside: true,
useHTML: true,
style: {
fontSize: "18px",
fontWeight: "600"
}
}
},
series: {
pointPadding: 0.05,
//groupPadding: 0, this does not work
animation: {
complete: function() {
}
}//,
//pointWidth: 145
}
},
series: [ {
color: "#327631",
data: [ 0, 850 ],
stack: "female",
dataLabels: {
enabled: true,
formatter: function() {
if (0 != this.y) return "$" + Highcharts.numberFormat(this.y, 0);
else return null;
}
}
}, {
color: "#ADC9AD ",
data: [ 10000, 10000 ],
stack: "female",
dataLabels: {
enabled: true,
formatter: function() {
return "$" + Highcharts.numberFormat(this.y, 0);
}
}
}]
},
function (chart) { // on complete
chart.renderer.text('<span class="bracketed">}</span> <em>Profit</em>', 900, 84)
.css({
color: 'green',
fontSize: '24px',
x: 200
})
.add();
});//End HighCharts Call
Trying to increase bar height to accommodate series name inside bar and trying to reduce default gap between series group. The section "series: []" is, I assume for the JSON return function to populate. Tried many examples from all the generous JSFiddle examples to no avail. I'm a noob so please be patient. Any ideas? So far I have: http://jsfiddle.net/PeterHanekom/7ue5bkm8/1/
var options = {
chart: {
renderTo: 'container',
type: 'bar'
},
colors: ['#00B9B9', '#527CED', '#A7D36B', '#B9B900', '#0097FF', '#400040', '#EA4D00', '#336699', '#8080C0', '#ADA870'],
title: {
text: 'Cluster Totals',
x: -20 //center
},
subtitle: {
text: 'Dept - Branch',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Percentage'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
align: 'center',
borderWidth: 0
},
plotOptions: {
bar: {
stacking: 'normal',
pointWidth: 20,
pointPadding: 0,
cursor: 'pointer',
point: {
events: {
click: function() {
alert('later drilldown events');
}
}
dataLabels: {
enabled: true,
inside:true,
useHTML: true,
align: 'left',
color: 'white',
style: {
fontWeight: 'bold'
},
verticalAlign: 'middle',
formatter: function () {
if (this.series.name)
return '<span style="color:black; height: 25px;">' + this.series.name + ' = ' + this.y + '</span>';
else return '';
}
}
}
},
series: []
}
$.getJSON("./services/get360Pivot.php?s_Search=" + sOperatorSearch, function(json)
{
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
options.series[2] = json[3];
options.series[3] = json[4];
chart = new Highcharts.Chart(options);
});
I think you options you need are groupPadding and pointWidth. e.g.
groupPadding:0.1,
pointWidth:20,
http://jsfiddle.net/s3t2pL94/
Do you see the range problem when I use multiple yAxis? How Can I solve this problem?
It is the same code I use!!
yAxis: [
{ labels: { formatter: function() { return this.value + '".$unitall1."' }, style: { color: '#89A54E' } }, title: { text: '".$graphall1."' , style: { color : '#4572A7' } }, opposite: true },
{ labels: { formatter: function() { return this.value + '".$unitall2."' }, style: { color: '#4572A7' } }, title: { text: '".$graphall2."' , style: { color : '#89A54E' } }, },
{ labels: { formatter: function() { return this.value + '".$unitall3."' }, style: { color: '#000000' } }, title: { text: '".$graphall3."' , style: { color : '#000000' } }, },
{ labels: { formatter: function() { return this.value + '".$unitall4."' }, style: { color: '#C4087C' } }, title: { text: '".$graphall4."' , style: { color : '#C4087C' } }, opposite: true }
],
You can use offset parameter to set distance yAxis properly.
http://api.highcharts.com/highstock#yAxis.offset
Use the yAxis.offset property to set the offset for each of your y-axis. Looks like the default gap between two axes is lesser in highstock then it is in highchart
You have two options:
use yAxis.offset for each axis, see: http://api.highcharts.com/highstock#yAxis.offset
use Highstock, but create chart using new Highcharts.Chart() instead of new Highcharts.StockChart(). In that case you can use Highstock features like ordinal axis, range selector, scrollbar etc. You have to just enable each of features directly: http://api.highcharts.com/highstock#scrollbar.enabled