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
Related
The first stack of my column chart is not fully visible.
The only solution I found was to add a max value on the y-axis.
Bu that is not an ideal solution because the max remains even when I disable a series by clicking on it in the legend.
Here is an JSFiddle example.
{
chart:{
type: 'column'
},
plotOptions: {
column: {
stacking:"normal",
grouping: false
}
},
yAxis: {
title: {
text: ""
},
labels: {
},
allowDecimals:true,
gridLineColor:"#DDDDDD",
endOnTick:false,
max:null
},
xAxis:{
type: "datetime",
min:1609459200000,
softMax:1638316800000,
dateTimeLabelFormats: {month:"%b",year:"%Y"},
labels: {y:20},
title:{text:null},
gridLineColor:"#DDDDDD"
},
series:[{
name:"Solar power",
data:[{
x:1609455600000,y:40.328},{x:1612134000000,y:108.824},{x:1614553200000,y:58.224}],
color: "rgba(255, 174, 1, 1)",
id:"del-solarPhotovoltaic"
},
{
name:"Delivered Electricity",
data:[{x:1609455600000,y:327.583405},{x:1612134000000,y:238.927913},{x:1614553200000,y:54.12531}],
color:"rgba(96, 189, 104, 1)",
id:"del-electricity"
},
{
name:"Natural gas",
data:[{x:1609455600000,y:4073.892843},{x:1612134000000,y:2768.81114}],
color:"rgba(93, 165, 218, 1)",
id:"del-naturalGas"
},
{
name:"Exported Electricity",
data:[{x:1609455600000,y:-19.093318},{x:1612134000000,y:-68.414876},{x:1614553200000,y:-37.718392,}],
color:"rgba(96, 189, 104, 1)",
id:"exp-electricity"
}]
}
This happens because your x-axis min value: 1609459200000 is greater than the first data point x value: 1609455600000 and Highcharts doesn't take into account the first column when calculating y-axis extremes (treated as if it were outside the chart).
Similar situation presented here: http://jsfiddle.net/BlackLabel/b1oucLne/
xAxis: {
min: 4,
max: 40
},
series: [{
type: 'column',
data: [{
x: 2,
y: 4073.892843
}, {
x: 6,
y: 2768.81114
}]
}]
As a solution reduce or remove xAxis.min property.
below is my code for the stacked bar chart, It sets the values Y-axis wise instead of X-axis wise, data [5,3] should be shown in x-axis in one row and [2,2] in another x-axis point, but plotting [5,3] and [2,2]
function barChartObject() {
return jQuery.extend(true, {}, Highcharts.setOptions({
chart: {
type: 'bar',
marginTop: 10,
marginBottom: 10,
marginLeft: 50,
marginRight: 2,
width: 500
},
xAxis: {
categories: ['Apples', 'Bananas']
},
yAxis: {
min: 0,
},
legend: {
reversed: true
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
stacking: 'normal'
}
}
}));
}
function addBarSeries(chart, chartData) {
_.each(chart.series, function(s) {
s.remove();
});
chart.options.legend.enabled = false;
var series = [{
name: 'John',
data: [5, 3]
}, {
name: 'Jane',
data: [2, 2]
}];
_.each(series, function(s) {
chart.addSeries(s, false);
});
chart.redraw();
}
data [5,3] should be shown in x-axis in
one row and [2,2] in another x-axis point, but plotting [5,3] and
[2,2]
Nope, it renders as it should be. Notice that your series has defined two points, like [{x: 0, y: 2}, {x: 1, y: 2}], which are clearly visible on the chart.
If you want to have those two values in one row of the xAxis, you will need to change your data into this format:
series: [{
name: 'John',
data: [2, 3]
}, {
name: 'Jane',
data: [2, 5]
}]
Demo: https://jsfiddle.net/BlackLabel/2d3u157o/
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
I have this issue, where I want a shared and custom-formatted tooltip on a Highcharts chart, but at the same time I want the crosshairs to work.
There is no issue on the x axis, but the on the y, it does not follow the pointer.
Any suggestions?
Highcharts.chart('container', {
chart: {
type: 'line'
},
xAxis: {
crosshair: true
},
yAxis: {
crosshair: true
},
series: [
{
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
{
data: [1, 2, 3, 4, 5, 6, 7, 8, 9].reverse()
}
],
tooltip: {
shared: true
}
});
1st JSFiddle example
UPDATE:
Based on the comments given under this post, I've updated the issue.
Now, I have some compromise: I have two crosshairs on the y axis (or, exactly as many as many series item I have...)
The issue is, that if I link the axis options to the 0th option, the scale will be wrong. If I don't (and I don't have an example for that, but you can delete the line and run again), the two series will be at different scales, but since the second option is hidden, the whole think is just a mess.
And if I don't link the options to the 0th item, the crosshairs will not work again...
Any idea for this?
Highcharts.chart('container', {
chart: {
type: 'line'
},
xAxis: {
crosshair: true
},
yAxis: [
{
crosshair: true
},
{
linkedTo: 0, // delete me and run again
crosshair: true,
visible: false
}
],
series: [
{
yAxis: 0,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
{
yAxis: 1,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9].reverse().map(value => value - 5)
}
],
tooltip: {
shared: true
}
});
2nd JSFiddle example
If I am thinking correctly,your worry is about the negative value.So for the negative value you can assign min value to yAxis in charts
check Fiddle demo
yAxis: [
{
crosshair: true,
min:-10,
},
{
linkedTo: 0, // delete me and run again
crosshair: true,
visible: false
}
],
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.