When I say space, I mean not only the space between bars/columns, but also the space between the sides of the chart (y axis and other size). I am looking at this example
Highcharts.chart('container', {
chart: {
type: 'column',
},
plotOptions: {
column: {
stacking: 'normal',
groupPadding: 0.3,
pointPadding: 0,
pointWidth: 20,
}
},
series: [{
data: [5, 3, 4]
}, {
data: [2, 2, 3]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
As you see, there is EQUAL SPACING between 0-1, and 1-2, BUT the spacing it NOT equal between the Y-Axis to 0, and 2 to the right side of the chart (the opposite side of the Y axis). How do I adjust these? Can I set them to a set pixel padding/margin for between the Y axis and the 0 bar, and similarly to the other side?
You can use minPadding and maxPadding properties, but their value is relative to the length of the axis.
You can also define pointRange as 2 and correct ticks by using tickPositions or tickPositioner:
plotOptions: {
column: {
stacking: 'normal',
pointRange: 2,
pointWidth: 20,
}
},
xAxis: {
maxPadding: 0,
minPadding: 0,
tickPositions: [0, 1, 2]
},
Live demo: http://jsfiddle.net/BlackLabel/2xdwuah9/
Finally, you can reset default margins and specify min and max for the x-axis:
plotOptions: {
column: {
stacking: 'normal',
pointRange: 0,
pointWidth: 20,
}
},
xAxis: {
maxPadding: 0,
minPadding: 0,
min: -1,
max: 3
},
Live demo: http://jsfiddle.net/BlackLabel/96pw12u0/
API Reference:
https://api.highcharts.com/highcharts/xAxis.minPadding
https://api.highcharts.com/highcharts/series.column.pointRange
https://api.highcharts.com/highcharts/xAxis.tickPositioner
https://api.highcharts.com/highcharts/xAxis.min
Related
Can we add negative color in highcharts based on a variable other that data? Since, the data I have are all positive values but I need to show the chart in red based on a variable which will be negative.
series: [{
type: 'area',
data: [-12,24,54,-9,-12],
visible: false,
gapSize: 0,
tooltip: {
valueDecimals: 2
},
marker: {
enabled: false,
symbol: 'circle',
radius: 4,
lineWidth: 0,
states: {
hover: {
fillColor: '#58aa00',
}
},
},
lineColor: '#58aa00',
negativeColor: 'red',
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
},
stops: [
[0, '#c6e1b2'],
[1, Highcharts.color('#eaf4e2')
.setOpacity(0)
.get("rgba"),
],
],
}
Now from the above code I will get the negative color wherever there is a negative value, but I want to make the chart red based on a different value, say I have a variable x = -20 which is not present in the data array.
Any help would be appreciated. Thanks in advance.
The negative value is taken from the threshold value, so you can easily define/change it.
Demo: https://jsfiddle.net/BlackLabel/t9zhuakp/
API: https://api.highcharts.com/highcharts/plotOptions.series.threshold
By default, the scale for the x-axis and y-axis are on the bottom & left of the chart, respectively. I want them adjacent to the plot lines (the x- and y-axis). Here's an illustration of what I'm hoping to achieve: imgur.com/a/tf53t
I know that I can use offset: to move the scales to a specific pixel location, but they no longer align to the plot lines if I change the maximum/minimum values on either axis.
I labeled where I think offset should go in the code below, but I'm not sure what to type after it.
http://jsfiddle.net/z7eyv/60/
Here's the specific part of the code in question:
yAxis: {
min: -20,
max: 20,
tickInterval: 1,
endOnTick: false,
title: {
text: ''
},
plotLines: [{
value: 0.1,
width: 1,
color: 'black'}]
},
plotOptions: {
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
}
},
xAxis: {
min: -20,
max: 14,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
offset: //???????????????????????????????????????
title: {
text: '',
},
plotLines: [{
value: 0.1,
width: 1,
color: 'black'}]
},
I want to display a small polar chart on my web site.
But there is an anoying behaviour. the container (circle) of the chart do not fit with the chart, it grow step by step. If a value is just too big, the chart will be lost in a huge empty circle.
Please, have a look on this jsfiddle to understand the problem :
http://jsfiddle.net/7zmT9/
Is it possible to force the frame to fit the chart? or to reduce the step value?
Here is my code :
$(function () {
$('#container').highcharts({
chart: {
polar: true,
height: 252,
width: 262
},
pane:{
size: '100%',
},
title: {
text: 'Highcharts Polar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 20], // replace 20 by 18 to see the a more fitted chart
pointPlacement: 'between'
}, {
type: 'line',
name: 'Line',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'area',
name: 'Area',
data: [1, 8, 2, 7, 3, 6, 4, 5]
}]
});
});
Universal solution is to set maxPadding: 0 and sometimes endOnTick: false. See demo: http://jsfiddle.net/7zmT9/4/
yAxis: {
min: 0,
maxPadding: 0
},
You can indeed set the step, but I am not 100% sure if this is what you are looking for.
On your yAxis you can set the tickInterval
yAxis: {
min: 0,
tickInterval: 2 //change this value to suit your needs
},
I have updated your Fiddle. Is that what you are after?
I have a problem with data labels overlapping columns in my chart.
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime'
},
series: [{
data: [[Date.UTC(2013, 3, 1, 0, 0, 0), 169],
[Date.UTC(2013, 4, 1, 0, 0, 0), 176],
[Date.UTC(2013, 5, 1, 0, 0, 0), 470],
[Date.UTC(2013, 6, 1, 0, 0, 0), 346],
[Date.UTC(2013, 7, 1, 0, 0, 0), 252],
[Date.UTC(2013, 8, 1, 0, 0, 0), 138]],
dataLabels: {
enabled: true
}
}]
});
});
You can see an exmaple here: http://jsfiddle.net/J6WvR/1/
My chart should have fixed height and I don't understand why the largest column height cannot be calculated to fit its data label. How can I fix this?
According to official API documentation: overflow property
To display data labels outside the plot area, set crop to false and overflow to "none".
dataLabels: {
enabled: true,
crop: false,
overflow: 'none'
}
you can try max for yAxis,
calculate maximum value from you data and add some cushion say 100 to it and set it as max for yAxis
yAxis:{
max: 600,
},
updating your fiddle with max for yAxis at http://jsfiddle.net/J6WvR/3/
hope this will be of use for you
One option is to move the position of the labels. e.g. this will move them inside the bars:
plotOptions: {
column: {
dataLabels: {
y: 20,
color:'white'
}
}
},
http://jsfiddle.net/TBfLS/
An alternative is to manually set the max y value to make room for the label:
yAxis: {
max: 600,
endOnTick: false
},
http://jsfiddle.net/2AhVT/
Hopefully one of these options will help.
A third (and probably better) option was posted by Ivan Chau.
after enabling dataSorting highchart it is not showing data label properly in stacked column chart
I have a HighCharts chart that combines a spline and a column. The column data defines a single Y value---indicating a single column---and uses pointRange to indicate what X value range that single column covers. Everything works fine as long as the pointRange is less than the maximum X value in the spline data. But when the pointRange is greater than the maximum X value in the spline data, HighCharts radically truncates the point range, e.g. from my desired 10,000 to about 4200, about half the maximum X value. The label also shifts radically to the left, as if the column has a significant extent for X values less than 0, which do not exist in the data I pass.
(I would like to post a snapshot of the problem, but my reputation is insufficient.)
Is this a HighCharts bug, or am I missing something here? Bayes suggests the latter of course, but I can't fine what I am missing. Hence this request to the gods of stackoverflow.
Here is a fiddle illustrating my problem: http://jsfiddle.net/Bridgeland/UVF4P/1/ If you change the pointRange from 10000 to 8000, you can see the result that I expected, albeit with slightly smaller column.
Here's my code, with much of the data omitted for brevity:
$(function () {
$('#container').highcharts({
title: {
text: 'pointRange is too small'
},
yAxis: {
min: 0,
max: 1
},
xAxis: {
min: 0
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
data: [
[0, 1],
[215, 1],
// middle of spline data omitted for brevity
[8189, 0.007198560287942413],
[8404, 0],
[8620, 0]
],
type: 'spline',
marker: {
enabled: false
},
zIndex: 1
}, {
data: [0.5],
type: 'column',
pointInterval: 10000,
pointPadding: 0.01,
groupPadding: 0,
borderWidth: 0,
shadow: false,
pointPlacement: 'between',
pointRange: 10000,
zIndex: 0,
minPointLength: 3,
dataLabels: {
enabled: true,
inside: true,
color: 'white',
formatter: function () {
return 'Misplaced'
}
}
}]
})
})
(And you might be wondering why I have a column chart with a single column? My chart generally has more columns. The single column is a pathological case for a particular combination of data. But despite the pathology, I would still like it to display properly.)
It seems that Highcharts do not permit to have a pointRange greater than the max value in x or the minRange value.
You can fix that by doing :
$(function () {
$('#container').highcharts({
title: {
text: 'pointRange is too small'
},
yAxis: {
min: 0,
max: 1
},
xAxis: {
min: 0,
minRange: 10000
//^^^^^^^^^^^
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
data: [
[0, 1],
[215, 1],
// middle of spline data omitted for brevity
[8189, 0.007198560287942413],
[8404, 0],
[8620, 0]
],
type: 'spline',
marker: {
enabled: false
},
zIndex: 1
}, {
data: [0.5],
type: 'column',
pointInterval: 10000,
pointPadding: 0.01,
groupPadding: 0,
borderWidth: 0,
shadow: false,
pointPlacement: 'between',
pointRange: 10000,
zIndex: 0,
minPointLength: 3,
dataLabels: {
enabled: true,
inside: true,
color: 'white',
formatter: function () {
return 'Misplaced'
}
}
}]
})
})
Since you set pointInterval at 10000, I think you can do the same thing with the minRange value ?
Can't you also set a xAxis max of, say, 10500? Wouldn't that allow the column to expand to 10k?