I created a graph with Highcharts polar type. The boundaries of chart are overflowing. Can anyone please help me in fixing the graph.
Please find my problem on JSFiddle:
JSFiddle
Code:
$(function () {
$('#container').highcharts({
chart: {
polar: true,
showAxes: false
},
title: {
text: 'Highcharts Polar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return this.value + '°';
}
},
lineWidth: 10,
lineColor: "#000000",
gridLineWidth: 5,
gridLineColor: "#000000"
},
yAxis: {
offset: 120,
tickmarkPlacement: 'on',
min: 0,
max: 4,
visible: false,
endOnTick: false
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
},
line: {
color: "#ff0000",
lineWidth: 10
}
},
series: [{
type: 'line',
name: 'Line2',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}]
});
});
This produces axis outside plot area. I would like to increase plot area so as to see the meeting point of extremist end points.
The reason the Plot is overflowing is because you have set a Maximum Value for the yAxis of 4 but in your data you have values that are greater than 4, like 8,7,6 and 5.
Just remove the max: 4 option from the yAxis Object and your Chart will display fine.
Related
When trying to configure a polar chart in highcharts 7.2.0 I am unable to configure the chart to always show labels on the xAxis. When the chart is not a polar chart then configuration property of xAxis.labels.styles.textOverflow = 'none' works correctly. The jsfiddle below shows that labels on the xAxis will automatically be removed if they collide with another label. I am looking to configure the polar chart to do the same thing as the line chart. When chart.polar: true is removed you can see the line chart with labels that overlap each other.
https://jsfiddle.net/y6xor7ac/3/
Highcharts.chart('container', {
chart: {
// comment this line to show line graph working correctly
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
subtitle: {
text: 'Also known as Radar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
overflow: 'allow',
labels: {
style: {
textOverflow: 'none'
},
format: '{value}° super long text to make it overlap super long text to make it overlap super long text to make it overlap '
}
},
yAxis: {
min: 0,
overflow: 'allow',
stackLabels: {
allowOverlap: true
}
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 1],
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]
}]
});
You can use internal allowOverlap property:
xAxis: {
...
labels: {
allowOverlap: true,
...
}
},
Live demo: https://jsfiddle.net/BlackLabel/1rkz9sfp/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels
Is it possible to remove/hide the concentric circles (yAxis plotLines) that Highcharts automatically draws in polar charts? Setting the yAxis lineWidth to zero did not work. Also, setting the yAxis plotLines to an empty array did not work.
These options successfully create a green plot band filling the chart, but do not create a red plot line in the chart. However, what appears to be a light grey y-axis plot line circle is drawn at y=5. This is the line I want to remove or hide.
{
colors: COMPETITOR_COLORS,
chart: {
polar: true,
backgroundColor: 'pink',
plotBackgroundColor: KAHN_DARK_GRAY_BG,
},
title: {
text: '',
},
tooltip: {
valueDecimals: 2,
headerFormat: '<br/>',
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0,
},
pane: {
startAngle: 0,
endAngle: 360,
},
xAxis: {
min: 0,
max: 360,
tickInterval: 45,
labels: {
format: '{}',
},
},
yAxis: {
min: 0,
max: 10,
plotLines: [{color: 'red', value: 7, width: 3}],
plotBands: [{color: 'green', from: 0, to: 10}],
labels: {
format: '{}',
},
},
plotOptions: {
series: {
pointStart: 45,
pointInterval: 90,
},
column: {
pointPadding: 0,
groupPadding: 0,
},
},
series: kahnSeries,
}
The lines that you want to remove are grid lines, not plot lines. To remove them use:
yAxis: {
gridLineWidth: 0,
...
},
Live demo: http://jsfiddle.net/BlackLabel/46xvajn5/
API Reference: https://api.highcharts.com/highcharts/yAxis.gridLineWidth
Is there is a way to round off the area points and make them less pointed when used in the polar chart?
I have tried the 'areaspline', but with polar chart it's not quite right, as you can see here:
http://jsfiddle.net/qwbu6r3t/2/
Highcharts.chart('container', {
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
}
},
series: [{
type: 'areaspline',
name: 'Area spline',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'area',
name: 'Area',
data: [1, 8, 2, 7, 3, 6, 4, 5]
}]
});
EDIT
What I need
You can override highcharts Highcharts.seriesTypes.areaSpline.prototype.getPointSpline with same method but with changed smoothing parameter. (Default 1.5)
...
var smoothing = 3, // 1 means control points midway between points, 2 means 1/3 from the point, 3 is 1/4 etc
...
Live example:
http://jsfiddle.net/q3h6xwog/
just change area to areaspline would do what you want i think so
I want a polar chart (with highcharts library), but I need the chart is rotated 45º. I have the following base script:
$(function () {
var interval = 90;
var startAngle = 0;
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
polar: true,
margin: 60
},
title: {
text: 'Style of thought',
},
pane: {
startAngle: startAngle
},
xAxis: {
tickmarkPlacement: 'on',
startOnTick: true,
tickInterval: interval,
min: 0,
max: 360
},
yAxis: {
min: 0,
max: 100
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: interval
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [
{
type: 'area',
name: 'Luis',
data: [40, 60, 35, 89]
}, {
type: 'line',
name: 'Media de comunidad',
data: [60, 75, 15, 52]
}]
});
});
Example in jsfiddle and the chart nice.
I need to rotate the chart 45º, for this I change the value of startAngle to 45
$(function () {
var interval = 90;
var startAngle = 45;
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
polar: true,
margin: 60
},
title: {
text: 'Style of thought',
},
pane: {
startAngle: startAngle
},
xAxis: {
tickmarkPlacement: 'on',
startOnTick: true,
tickInterval: interval,
min: 0,
max: 360
},
yAxis: {
min: 0,
max: 100
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: interval
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [
{
type: 'area',
name: 'Luis',
data: [40, 60, 35, 89]
}, {
type: 'line',
name: 'Media de comunidad',
data: [60, 75, 15, 52]
}]
});
});
Example 2 in jsfiddle and now the chart is bad. If you see it, the center of the circle is not equidistant from the circumference.
Any idea of the problem?
Thank you very much!!
It looks like a bug, so I've reported to our devs here: https://github.com/highslide-software/highcharts.com/issues/1561
Thanks for suggestion
I am having a problem with Highstock. I have a multi-pane chart (multiple charts stacked on top of each other). When I specify a min and max value for the y-axis, if any value in the series is less than the min value, it will extend below the chart, usually extending into the chart below. For some reason, the same is not true for when a data point is above the max value. I can't tell if this is a bug in Highstock or just something I am doing wrong.
I understand that this is an unusual use case for Highstock, but it is necessary for the application I am developing. The only example I can find for multi-pane charts with Highstock is on their demo page at http://www.highcharts.com/stock/demo/candlestick-and-volume, but that is a different situation.
Please see my example: http://jsfiddle.net/afoster777/UJaJG/
Here is my configuration:
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false,
plotOptions: {
shadow: false,
series: {
connectNulls: false
},
plotBorderColor: "#CCCCCC",
plotBorderWidth: 2,
plotBackgroundColor: "#FFFFFF"
}
},
navigator: {
enabled: false
},
xAxis: {
title: {
text: 'Time'
},
type: 'datetime',
ordinal: false
},
yAxis: [{
title: {
text: "Y"
},
min: 0.8,
max: 0.9,
labels: {
align: 'right',
x: -6,
y: 3
},
lineWidth: 1,
height: 250,
offset: 0,
startOnTick: false,
endOnTick: false
}, {
title: {
text: "Y"
},
min: 0.8,
max: 0.9,
labels: {
align: 'right',
x: -6,
y: 3
},
lineWidth: 1,
top: 320,
height: 250,
offset: 0,
startOnTick: false,
endOnTick: false
}],
series: [{
type: 'line',
id: 0,
name: 'Series1',
yAxis: 0,
data: series1data,
marker: {
enabled: false
},
tooltip: {
valueDecimals: 2
},
gapSize: 2,
connectNulls: false
}, {
type: 'line',
id: 1,
name: 'Series2',
yAxis: 1,
data: series2data,
marker: {
enabled: false
},
tooltip: {
valueDecimals: 2
},
gapSize: 2,
connectNulls: false
}]
});
I would appreciate any suggestions.
Edit: Apparently there is an open issue about this already (Issue# 1387). Does anyone have any ideas for a workaround?
Apparently github user sappling has made a fix for this problem and submitted a pull request. I included sappling's version of Highstock <script src="http://raw.github.com/sappling/highcharts.com/clip/js/highstock.src.js"></script> instead of the vanilla one, and the problem seems to be fixed. http://jsfiddle.net/afoster777/jEZ9w/