Highcharts stacked column is cut off - highcharts

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.

Related

Highcharts hide empty bars of categories for multiples series

I'm trying to implement a chart with different series but each series will have a value for different categories independently.
What I want to have:
What I have today:
With the following code:
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['a1', 't1', 't2', 'l1', 'l2', 'p1']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'a',
data: [267]
},{
name: 't',
data: [0, 21, 400]
},{
name: 'l',
data: [0, 0, 0, 600, 242]
},{
name: 'p',
data: [0, 0, 0, 0, 0, 1000]
}],
});
});
There is free space between bars because series has 0 as values for some category.
I just want to have a "nice" chart with all columns one by one.
Maybe, it's a different way to configure series and categories...
Disable grouping:
plotOptions: {
series: {
grouping: false
}
}
Live demo: http://jsfiddle.net/BlackLabel/x6758dcq/
API Reference: https://api.highcharts.com/highcharts/plotOptions.column.grouping

Precise Highcharts xrange

Is there a way to make 'xrange' type to render data with an absolute precision that would look like the 'column' type? I would use 'column', but it only uses one 'x' value and I need start and end time for each bar.
I need the bar to stretch over the yAxis from 0 to the y value.
Each bar uses padding and goes beyond the max value in this example:
https://jsfiddle.net/w5mhfp1x/1/
Highcharts.chart('container', {
chart: {
type: 'xrange',
styledMode: true
},
title: {
text: 'Highcharts X-range'
},
xAxis: {
type: 'datetime',
tickInterval: 1800000,
dateTimeLabelFormats: {
day: '%H:%M'
},
},
time: {
useUTC: false
},
series: [{
name: 'Project 1',
pointPadding: 0,
groupPadding: 0,
borderRadius: 1,
data: data,
}]
});
I think this version is precise, but I need the bar to stretch all the way to the 0:
https://jsfiddle.net/w5mhfp1x/2/
series: [{
name: 'Project 1',
pointPadding: 0,
groupPadding: 0,
borderRadius: 1,
pointWidth: 1,
data: data,
}]

Highcharts polar label textoverflow

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

Highcharts Polar Plot area scaling issues

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.

Dates instead of values on Highchart labels in graph with multiple axis

I've created a line and a bar graph that share the xAxis. But for some reason it chooses to display the value instead of date, even though I am supplying it the standard way.
What am I missing here?
Fiddle: http://jsfiddle.net/ZfP84/
$(function () {
var options = {
chart: {
renderTo: 'container',
},
navigator:{
enabled:true
},
scrollbar: {
enabled:true
},
rangeSelector: {
enabled: true,
//selected: 1
},
xAxis: {
gridLineWidth: 1,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: [
{
height: 150,
lineWidth: 2,
offset: 0,
title: {
text: 'Price',
}
},
{
top: 225,
//lineWidth: 0,
//min: 0,
//max: 5,
gridLineWidth: 0,
offset: 0,
height: 100,
title: {
text: 'Volume',
}
},
],
series: [
{
yAxis: 0,
name: 'Price by time',
stack: 0,
//data: [1, 12, 32, 43],
data: [[1147651200000,67.79],[1147737600000,64.98],[1147824000000,65.26],[1147910400000,63.18],[1147996800000,64.51],[1148256000000,63.38],[1148342400000,63.15],[1148428800000,63.34],[1148515200000,64.33],[1148601600000,63.55],[1148947200000,61.22],[1149033600000,59.77],[1149120000000,62.17],[1149206400000,61.66],[1149465600000,60.00],[1149552000000,59.72],[1149638400000,58.56],[1149724800000,60.76],[1149811200000,59.24],[1150070400000,57.00],[1150156800000,58.33],[1150243200000,57.61],[1150329600000,59.38],[1150416000000,57.56],[1150675200000,57.20],[1150761600000,57.47],[1150848000000,57.86],[1150934400000,59.58],[1151020800000,58.83],[1151280000000,58.99],[1151366400000,57.43],[1151452800000,56.02],[1151539200000,58.97],[1151625600000,57.27],[1151884800000,57.95],[1152057600000,57.00],[1152144000000,55.77],[1152230400000,55.40],[1152489600000,55.00],[1152576000000,55.65],[1152662400000,52.96],[1152748800000,52.25],[1152835200000,50.67],[1153094400000,52.37],[1153180800000,52.90],[1153267200000,54.10],[1153353600000,60.50],[1153440000000,60.72],[1153699200000,61.42],[1153785600000,61.93],[1153872000000,63.87],[1153958400000,63.40],[1154044800000,65.59],[1154304000000,67.96],[1154390400000,67.18],[1154476800000,68.16],[1154563200000,69.59],[1154649600000,68.30],[1154908800000,67.21],[1154995200000,64.78],[1155081600000,63.59],[1155168000000,64.07],[1155254400000,63.65],[1155513600000,63.94],[1155600000000,66.45],[1155686400000,67.98],[1155772800000,67.59],[1155859200000,67.91],[1156118400000,66.56],[1156204800000,67.62],[1156291200000,67.31],[1156377600000,67.81],[1156464000000,68.75],[1156723200000,66.98],[1156809600000,66.48],[1156896000000,66.96],[1156982400000,67.85],],
tooltip: {
valueDecimals: 2
},
},
{
name: 'Volume by time',
yAxis: 1,
stack: 0,
data: [[1147651200000,67.79],[1147737600000,64.98],[1147824000000,65.26],[1147910400000,63.18],[1147996800000,64.51],[1148256000000,63.38],[1148342400000,63.15],[1148428800000,63.34],[1148515200000,64.33],[1148601600000,63.55],[1148947200000,61.22],[1149033600000,59.77],[1149120000000,62.17],[1149206400000,61.66],[1149465600000,60.00],[1149552000000,59.72],[1149638400000,58.56],[1149724800000,60.76],[1149811200000,59.24],[1150070400000,57.00],[1150156800000,58.33],[1150243200000,57.61],[1150329600000,59.38],[1150416000000,57.56],[1150675200000,57.20],[1150761600000,57.47],[1150848000000,57.86],[1150934400000,59.58],[1151020800000,58.83],[1151280000000,58.99],[1151366400000,57.43],[1151452800000,56.02],[1151539200000,58.97],[1151625600000,57.27],[1151884800000,57.95],[1152057600000,57.00],[1152144000000,55.77],[1152230400000,55.40],[1152489600000,55.00],[1152576000000,55.65],[1152662400000,52.96],[1152748800000,52.25],[1152835200000,50.67],[1153094400000,52.37],[1153180800000,52.90],[1153267200000,54.10],[1153353600000,60.50],[1153440000000,60.72],[1153699200000,61.42],[1153785600000,61.93],[1153872000000,63.87],[1153958400000,63.40],[1154044800000,65.59],[1154304000000,67.96],[1154390400000,67.18],[1154476800000,68.16],[1154563200000,69.59],[1154649600000,68.30],[1154908800000,67.21],[1154995200000,64.78],[1155081600000,63.59],[1155168000000,64.07],[1155254400000,63.65],[1155513600000,63.94],[1155600000000,66.45],[1155686400000,67.98],[1155772800000,67.59],[1155859200000,67.91],[1156118400000,66.56],[1156204800000,67.62],[1156291200000,67.31],[1156377600000,67.81],[1156464000000,68.75],[1156723200000,66.98],[1156809600000,66.48],[1156896000000,66.96],[1156982400000,67.85],],
tooltip: {
valueDecimals: 2
},
lineWidth: 3,
marker: {
enabled: false
},
type: 'column',
},
]
};
var chart = new Highcharts.Chart(options);
});
If you added the the "type" to the xAxis definition then the x values will be interpreted as dates and times rather than decimal values
xAxis: {
type : "datetime", //add this line
gridLineWidth: 1,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
you may have to fiddle with the start times and intervals to get HighChart to correctly interpret your x-values.
see this demo on the highchart website as an example. http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-time-series/
The reason is that you are not actually creating a Stock chart. Your code looks like:
var chart = new Highcharts.Chart(options);
If you want it to be a Stock chart do:
var chart = new Highcharts.StockChart(options);
A Chart by default is a category chart. StockChart is time-based.
You can use dateFormat to replace time in miliseconds with date.
http://jsfiddle.net/3bE4X/
formatter:function(){
return Highcharts.dateFormat('%d / %m / %Y',this.value);
}
http://api.highcharts.com/highcharts#Highcharts.dateFormat()

Resources