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()