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/
Related
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
I am working on a project and I would like to use bar chart(HighChart) to indicate values. I prefer to use bar chart of this kind-
bar chart image
If any one have worked on this type of bar chart or have any idea of how to implement it, please share. Thanks in advance.
Set axis min max and then create an additional series which will complete the first series data to the axis max. For the additional, dummy series set options like enableMouseTracking or showInLegend to false so it wont inteact with the user.
yAxis: {
min: 0,
max: 700
},
plotOptions: {
series: {
grouping: false,
borderWidth: 0
}
},
series: [{
enableMouseTracking: false,
linkedTo: 1,
data: [{
y: 700,
color: 'rgba(66, 134, 244, 0.5)'
}, {
y: 700,
color: 'rgba(206, 49, 28, 0.5)'
}]
}, {
dataLabels: {
enabled: true,
style: {
fontSize: '20px',
textOutline: null
}
},
data: [{
y: 107,
color: 'rgba(66, 134, 244, 1)'
}, {
y: 31,
color: 'rgba(206, 49, 28, 1)'
}]
}]
example: http://jsfiddle.net/sL5bpep3/
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.
I have this Highcharts column chart:
http://jsfiddle.net/ltherond/bmk71a8r/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
type: 'linear'
},
credits: {
enabled: false
},
plotOptions: {
column: {
borderWidth: 0,
groupPadding: 0,
pointPadding: 0,
pointPlacement: 'between',
shadow: false
}
},
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
});
});
I want the first bar to extend horizontally from 0 to 500 on the xaxis.
In other words, I want each bar to start at the current x value and end at the next x value.
How do I do that?
The option you are looking for is connectNulls for your series attribute
From my knowledge this options is only available for Area and Line Charts and no longer available for column or bar chart
I recommend you to change your Chart Type to area chart and use connectNulls option as mentioned in Documentation here
To meet your requirement in Column chart itself you need to tune your data you fed into High chart as follows in your series code segment
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
},{
x: 100,
y: 5,
color: "#00FF00"
},{
x: 200,
y: 5,
color: "#00FF00"
},{
x: 300,
y: 5,
color: "#00FF00"
},{
x: 400,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
This will solve your problem. see the working fiddle http://jsfiddle.net/bmk71a8r/3/
For this approach you need to write extra codes to format your Data
Good Day
I need to start the scrollbar at the left instead of the right for my Highstock graph. Any suggestions? I've seen the setExtremes options but I'm either not using it right or it doesn't do what I need. Here is the code for the graph I have so far.
$(function() {
$('#container').highcharts({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Placed By Advisor'
},
xAxis: {
categories: ['John Jenkins', 'Steve Smith', 'Will Douglas', 'Dustin Johnson', 'Suzy Abbott', 'Wendy Jones'],
min: 2
},
yAxis: {
min: 0
},
legend: {
shadow: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0.5
}
},
series: [{
name: 'Unemployed',
data: [100, 100, 120, 55, 35, 189]},
{
name: 'Placed In Related',
data: [80, 108, 15, 74, 48, 88]},
{
name: 'Placed In Unrelated',
data: [17, 22, 187, 70, 75, 35]},
{
name: 'Except',
data: [10, 0, 19, 65, 25, 174]}],
scrollbar: {
enabled:true,
barBackgroundColor: 'lightgray',
//barBorderRadius: 7,
//barBorderWidth: 0,
//buttonBackgroundColor: 'gray',
//buttonBorderWidth: 0,
//buttonArrowColor: 'yellow',
//buttonBorderRadius: 0,
//rifleColor: 'yellow',
//trackBackgroundColor: 'red',
//trackBorderWidth: 1,
//trackBorderColor: 'silver',
//trackBorderRadius: 7
}
});
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.xAxis[0].setExtremes(
);
});
});
Here is a fiddle of what I have so far.
You need to set min value as 0 and max as any (like 2).
http://jsfiddle.net/yHGS9/5/