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}°'
}
},
Related
I continue having issues with highchart.
I am generating a chart with given data.
My x-axis labels needed to be customized, so I pass a set of arrays
xAxis: {
min: -3.5,
//catagories: [xaxis],
//type: 'linear',
tickInterval: 1,
//showFirstLabel: true,
//startOnTick: true,
labels: {
formatter: function () {
return xaxis[this.value];
},
//tickPositions: -3,
rotation: -90,
},
},
I've looked around and tried many things, what am I doing wrong?
the label starts at 0, I need it to start at beginning of the graph
Thanks for #codeer,
xAxis: {
min: -3.5,
//catagories: [xaxis],
//type: 'linear',
tickInterval: 1,
//showFirstLabel: true,
//startOnTick: true,
labels: {
formatter: function () {
return xaxis[this.value+3];
},
//tickPositions: -3,
rotation: -90,
},
},
the +3 does solve my issue, i did tried with -3, but never tried +3.. thank you!
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 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
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?