I feel this must be easy but I'm just not seeing it. In the following, I want the 0 to be the very centre of the plot.
http://bit.ly/1LE6Cvr
I presumed this could be achieved with the "min" option but it does not work as expected. Instead, the zero point is created at half the charts radius.
Can someone please put me out of my misery? Thanks.
Your problem lies in the data your putting into the chart.
Because all of your plot points are 0 highcharts is adjusting the axis in order to make the data display in a readable manner.
If you adjust the data to a wider spread of numbers 0 becomes the center of the chart.
http://jsfiddle.net/3w8hq9tg/
$(function () {
$('#container').highcharts({
chart: {
polar: true
},
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: 'line',
name: 'Line',
data: [10, 0, 1, 5, 1, 6, 6, 2]
}]
});
});
I think I may have found a solution myself.
It would seem only way to have to plot point sitting neatly at 0 is to have a "max" value. See example.
But of course in most cases, you cannot just decide on an arbitrary max value if your series is being generated dynamically.
The trick is to determine from the API what the max value for the chart's yAxis dataset is, which if 0, you know there is no data to show, so you then set it dynamically.
See solution
Related
When the chart loads, instead of just having the points on the x-axis of 1, 2, 3, etc. it includes 0.2, 0.4, 0.6, etc in between each integer point. I can't figure out how to get rid of the in-between tick marks.
Chart:
new Highcharts.chart('<some id>', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'bar'
},
title: {
text: '<some label>'
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
xAxis: {
categories: categories,
// tickInterval: 1,
tickPositions: [0, 1, 2, 3, 4],
labels: {
step: 1
}
},
yAxis: {
min: 0,
max: 4,
title: {
text: '<some title>'
}
},
series: seriesData
})
It seems like it's just ignoring my tick mark settings. I've tried tickInterval w/out the positions specified, and nothing has even somewhat altered the x-axis from the default look. Even if I remove all the settings other than the category data, it looks the same. And yes, my interval is always [0,4] so there's no unbounded worries there.
Any ideas?
edit: It seems dependent on page size and the chart width... but how do I turn this setting off? As I increase and decrease the size of the page, it should never show decimals in between the integer tick marks.
I've reproduced your example and I believe you wanted to add your tickPositions property to the yAxis (in the bar series yAxis is horizontal by default, so you may have missed it).
yAxis: {
tickPositions: [0, 1, 2, 3, 4]
},
Live Demo: https://jsfiddle.net/BlackLabel/v1f2d5mp/
yAxis: {
min: 0,
gridLineInterpolation : 'polygon',
lineWidth : 0
},
Even though it is drawn as polygon, there is still a circle around the whole chart as if it is a radar chart. How can I remove it? Thanks
here is a fiddle example
https://jsfiddle.net/mryg2vhq/
Here is working fiddle for your case: https://jsfiddle.net/narkhedetusshar/v2jydeq1/10/
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
lineWidth: 0, // you need to add this line
labels: {
format: '{value}°'
}
},
I'm trying to make a polar type chart, which is similar to this:
http://star-board-sup.com/2015/wp-content/uploads/2014/09/11_6x30_astro_touring.png
Basically I have 4 values all ranging from 1-10 and would need them displayed in a fashion like above...so stretched out over the axis. Can you help me accomplish that using Highcharts? Looks similar to their polar type chart, but I can't figure out how to display it.
Thanks for all the help
Here is a simple try to rebuild your polar chart:
http://jsfiddle.net/c6unynr2/
This options should do most of your needs:
chart: {
polar: true
},
xAxis: {
categories: ['Tracking', 'Maneuverability', 'Stability', 'Speed'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
lineWidth: 0,
min: 0,
max: 10,
tickmarkPlacement: 'on'
},
series: [{
type: 'line',
name: 'Line',
data: [1, 2, 3, 4]
}]
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?