Can you in plotBands use "wildcards" og min/max values for to/from value?
Like here http://jsfiddle.net/CBE9R/1/
$(function () {
$('#container').highcharts({
chart: {
},
xAxis: {
tickInterval: 24 * 3600 * 1000, // one day
type: 'datetime'
},
yAxis: {
plotBands: [{
color: 'green',
from: 150,
to: ''
},{
color: 'red',
from: '',
to: '150'
}]
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000
}]
});
});
Without knowing the min/max values of the chart is there a way to set for instance red from bottom to 150 and from 150 to top as green ?
It can be done using API after chart is rendered:
var chart = $('#container').highcharts();
var extremes = chart.yAxis[0].getExtremes();
var maxY = extremes.max;
var minY = extremes.min;
chart.yAxis[0].addPlotBand({
color: 'green',
from: 150,
to: maxY
});
chart.yAxis[0].addPlotBand({
color: 'red',
from: minY,
to: '150'
});
Function getExtremes() returns current extremes for the axis (dataMax, dataMin, max and min axis value). And those values are used to set proper bands. Note: additional check should be done if hardcoded value (150) is between minY and maxY.
See updated example at jsfiddle.
Related
i want to do a chart like below:
red bar's xAxis share with blue line's yAxis datas
red bar's yAxis using top scale,
blue line's xAxis using bottom scale.
To achieve the wanted result you will need to use two xAxis and two yAxis - each for one series type and redefined your line data, because the bar series inverts the axes.
Demo: https://jsfiddle.net/BlackLabel/482vc9np/
series: [{
data: [{
x: 49.9,
y: 0
}, {
x: 71.5,
y: 1
}, {
x: 106.4,
y: 2
}, {
x: 129.2,
y: 3
}, {
x: 144.0,
y: 4
}],
}, {
type: 'bar',
yAxis: 1,
xAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0],
}]
I has series like this
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 19552.1, 95.6, 54.4]
}]
you can see that I has small points (29.9, 71.5) in this series and other (19552.1) has larger than small point
that make I cant click in small point
how can I deal with this problem
you can see this jsfiddle to know what I mean
Or You could set a minimum length for the columns using the ´minPointLength´ option
http://api.highcharts.com/highcharts#plotOptions.column.events.click
minPointLength: 0,
jsfiddle
how about to use logarithmic yAxis
http://jsfiddle.net/xLcmojzr/2/
$(function () {
$('#container').highcharts({
title: {
text: 'Logarithmic axis demo'
},
xAxis: {
tickInterval: 1
},
yAxis: {
type: 'logarithmic',
minorTickInterval: 0.1
},
tooltip: {
headerFormat: '<b>{series.name}</b><br />',
pointFormat: 'x = {point.x}, y = {point.y}'
},
series: [{
data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
pointStart: 1
}]
});
});
I have a fiddle http://jsfiddle.net/adaykin/QKw77/ which uses the datetime type for the xAxis. As you can see the data points in the line and the labels are on the tick marks and not between them. How can I change both the data points and the labels so that they are centered within a tick mark?
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime',
labels: {
format: "{value:%Y-%m-%d}",
},
tickmarkPlacement: 'between'
},
yAxis: {
},
series: [
{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6],
pointStart: Date.UTC(2014, 1, 3),
pointInterval: 24 * 3600 * 1000 * 7 // one day
},
{
data: [50.0, 50.0, 50.0, 50.0, 50.0, 50.0, 50.0],
pointStart: Date.UTC(2014, 1, 3),
pointInterval: 24 * 3600 * 1000 * 7
}
]
});
The data points and labels are centered between the tick marks when the xAxis is not using the datetime type.
You can use startOfWeek
xAxis: {
startOfWeek: 5,
type: 'datetime',
labels: {
format: "{value:%Y-%m-%d}",
},
},
http://jsfiddle.net/QKw77/2/
I'm trying to create a spider chart with a plot band that runs up against the outer edge of the circular border. Unfortunately, no matter what I try (yAxis max, yAxis maxPadding, plotBand thickness....) (tested in Firefox and Chrome), it ends up with some white space in between the yAxis max and the edge of the chart. I'm creating a bullseye pattern in my actual application, which looks fine except for the whitespace.
edit: the problem is not that I cannot fill in this whitespace (I can if I just increase the plotBand end to beyond the yAxis.max. The problem is that this area exists at all--I also want the last point to go up to the edge of the chart, so the inner plot bands are not shrunken to scale.
In this example, there's also whitespace in the middle of the circle--that's ok.
http://jsfiddle.net/XEte8/
html:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="height: 400px"></div>
javascript:
$(function () {
$('#container').highcharts({
chart: {
polar:true
},
yAxis: {
plotBands: [{ // mark the weekend
color: '#FCFFC5',
from: 0,
to: 250,
}],
max:250,
endOnTick:true,
maxPadding:0,
minPadding:0,
startOnTick:true,
tickmarkPlacement:"on"
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000
}]
});
});
What you need is configure tickInterval
javascript:
$(function () {
$('#container').highcharts({
chart: {
polar:true,
marginTop: 10
},
yAxis: {
plotBands: [{ // mark the weekend
color: '#FCFFC5',
from: 100,
to: 250,
}],
max:250,
tickInterval: 50,
startOnTick:true,
tickmarkPlacement:"on"
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000
}]
});
});
jsfiddle: http://jsfiddle.net/Ng3s5/
If the endOnTick option is true, max will sometimes be rounded up. I updated your fiddle with endOnTick:false:
http://jsfiddle.net/XEte8/1/
I'm using highstock/highcharts, and plotting a stacked (and grouped) column, based on the last 5 minutes.
I want to highlight the last minute (and have been using a plotband for that).
My problem is that the plotband will not cover the whole time range, as you can see in http://jsfiddle.net/duuuE/1/
What I want the plotband to cover is the last minute (up until the current timestamp), but using stacked/grouped columns makes it weird, because the columns are not drawn at the corresponding x-axis tick that corresponds to the timestamp.
Code is this:
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var now = new Date().getTime();
var last10min = now - (10 * 60 * 1000);
var lastMin = now - (60 * 1000);
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
minTickInterval: 60 * 1000,
tickMarkPlacement: 'on',
plotBands: [{ // highlight last minute
color: '#FCFFC5',
from: lastMin,
to: now
}],
},
plotOptions: {
series: {
pointStart: last10min,
pointInterval: 60 * 1000 // one minute
},
column: {
stacking: 'normal',
pointPlacement: 'between'
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1]
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5]
}]
});
});
I think you need to remove pointPlacement from your options, see: http://jsfiddle.net/Fusher/duuuE/2/
Reported issue to bug tracker.
Possible workaround: http://jsfiddle.net/duuuE/7/