I built a column chart with a plot band
plotBands: [{
zIndex: 1,
to: Date.UTC(2020,4,6),
from: Date.UTC(2020,3,30),
color: 'rgb(217, 217, 217, .4)',
}],
and a zone with a different colors for the x values:
zones: [{
value: Date.UTC(2020,3,30),
color: '#003f6e'
}, {
color: '#999999'
}]
see fiddle
Now I want both to cover the range of the last 7 days from data. The data comes from a google spreadsheet and is updated continuously. I tried something like this:
plotBands: [{
zIndex: 1,
to: this.series.data[this.series.data.length-1].x,
from: this.series.data[this.series.data.length-7].x,
color: 'rgb(217, 217, 217, .4)',
}],
What can I do?
You can use the data.complete callback to set the plotLines and the zones dynamically by updating the xAxis and series.
Demo: https://jsfiddle.net/BlackLabel/m0vdtjzo/
complete() {
let xColumn = this.columns[0];
chart.xAxis[0].update({
plotBands: [{
zIndex: 1,
to: xColumn[xColumn.length - 1],
from: xColumn[xColumn.length - 7],
color: 'rgb(217, 217, 217, .4)',
}]
})
chart.series[0].update({
zones: [{
value: xColumn[xColumn.length - 7],
color: '#003f6e'
}, {
color: '#999999'
}]
})
}
API: https://api.highcharts.com/highcharts/data.complete
API: https://api.highcharts.com/class-reference/Highcharts.Axis#update
Related
I would like to emphasise the difference between 2 different series in the same graphic : one coming from the user data and one from static data as following :
I wanted to define the pointPadding value, but this is available for all the series. How can I set this value only for a specific serie ?
The simplest solution seems to be adding a second x-axis and separate series. For example:
series: [{
...,
groupPadding: 0.325,
id: 'id1'
}, {
...,
groupPadding: 0.325,
id: 'id2'
}, {
...,
xAxis: 1,
linkedTo: 'id1'
}, {
...,
xAxis: 1,
linkedTo: 'id2'
}],
xAxis: [{
width: '20%',
type: 'category',
tickWidth: 1
}, {
offset: 0,
width: '80%',
left: '20%',
type: 'category',
tickWidth: 1
}]
Live demo: http://jsfiddle.net/BlackLabel/rwg6tL2v/
API Reference: https://api.highcharts.com/highcharts/xAxis
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.
I would like to add columns inside the area of chart red for negative and green for positive like attaching screenshot.
https://prnt.sc/psk7ge
You need to create a chart with area and column series. The set the colors, use negativeColor and color options:
series: [{
type: 'area',
data: [10, 20, 10, 20, 10],
threshold: -20
}, {
type: 'column',
data: [-10, 10, -15, 10, 15],
color: 'green',
negativeColor: 'red'
}]
Live demo: http://jsfiddle.net/BlackLabel/owh16dzL/
API Reference: https://api.highcharts.com/highcharts/series.column.negativeColor
I have multiseries spline chart. All series has own plotBand.
Is it possible to limit the plotBand interval by the length of the series?
Example, edited image:
plotLines can't help too:
plotLines: [{
value: 12345,
width: 10
}]
plotBands: [{
from: 30,
to: 45
}],
http://jsfiddle.net/r00tGER/1nuw4fqs/
This is not possible, but you can use Renderer.rect to add custom shape
chart.renderer.rect(100, 100, 100, 100, 5)
.attr({
'stroke-width': 2,
stroke: 'red',
fill: 'yellow',
zIndex: 3
})
.add();
Second solution is using annotation which allows to add rectangles.
Add one more range-type series as plot for every series.
series: [
{
name: 'as Plot',
type: 'areasplinerange',
data: [
[1434620400000, 58.0, 68.0], [1434620640000, 58.0, 68.0]
],
zIndex: 0
}
]
});
http://jsfiddle.net/r00tGER/ueqht2eL/
I have an issue with dynamically updating a yAxis using the Axis.update method. When doing an update on the yAxis, if there is more than one plot band, the second plot band does not get removed when the yAxis is redrawn, so it is duplicated. I think this is probably an issue in the Highcharts (highstock) library, but I was wondering if anyone had experienced this and knows if I have just missed a setting.
Example: http://jsfiddle.net/heeXA/
HTML:
<div id="chart"></div>
<button id="autoscale">Toggle autoscale</button>
JavaScript:
$("#chart").highcharts({
height: 350,
yAxis: [{
top: 50,
height: 200,
min: 0,
max: 30,
tickInterval: 4,
plotBands: [{
from: 12,
to: 16,
color: "#d9edf7",
label: {
"text": "Plot band 1"
}
}, {
from: 20,
to: 25,
color: "#dff0d8",
label: {
text: "Plot band 2"
}
}]
}],
series: [{
type: "line",
yAxis: 0,
data: [1, 5, 9, 15, 19, 21, 26, 9]
}]
});
$("#autoscale").on("click", function () {
$(this).toggleClass("autoscaled");
var autoscaled = $(this).hasClass("autoscaled");
var chart = $("#chart").highcharts();
chart.yAxis[0].update({
min: autoscaled ? null : 0,
max: autoscaled ? null : 30,
tickInterval: autoscaled ? null : 4
});
});
Update
This appears to be an issue with all the even numbered plot bands! http://jsfiddle.net/StgHu/1/