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/
Related
I have a High Chart chart similar to this bar chart: http://jsfiddle.net/s4zzpLzL/
How would I got about spliting the bar colors so that the color of the bar up until 500 is grey and the color of the bar after is the color you see on the screen? See image below.
You can set gradient color for series, demo: http://jsfiddle.net/pscwnzk7/1/
$('#container').highcharts({
chart: {
type: 'bar'
},
series: [{
color: {
linearGradient: [0, 0, 0, 500],
stops: [
[0, '#ff0ff0'],
[0.5, '#ff0ff0'],
[0.5, '#f0f00f']
]
},
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}]
});
The only problem with that solution is that you can't specify (in values) where will be break - try to resize chart. So you would need to update series color gradient on each window resize etc.
You can use zones in each serie like this:
zones: [{
value: 500,
color: '#A0A0A0'
}]
value is the up until value, and color is the color of that zone. Here's your edited FIDDLE
EDIT:
You can also use plotBands but it's not exactly what you would want: DEMO
There is also a plugin which I don't think covers exactly what you are asking: Plugin
Other than these I don't think there is another way unless you alter your data and use stacked bar chart. You will have to change all of your data though and it will be tiresome.
You can use concept of grouping, threshold and negativeColor to achieve this. Create 2 series with the same data and overlap them with grouping: false and a negativeColor: 'transparent'
demo: https://jsfiddle.net/1dp8L1gw/
plotOptions: {
bar: {
grouping: false,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [45.9, 71.5, 106.4],
color: 'red'
}, {
name: 'Tokyo',
data: [45.9, 71.5, 106.4],
color: 'blue',
threshold: 50,
negativeColor: 'transparent'
}]
The edge style of lines in previous versions of highcharts (at least through 2.2) end with a blocky edge when encountering a null value. In the current version of highcharts, the edge is rounded, this makes it more difficult to discern short lines in charts I'm making from points that are from another series. Here's how I want the lines to look using highcharts 2.2: jsfiddle
I can't figure out how to make them look that way using the current highcharts: jsfiddle. I've tried things like disabling the marker and adding square markers, but no luck.
Here's the code to create the chart:
<script src="http://code.highcharts.com/2.2/highcharts.js"></script>
or
<script src="http://code.highcharts.com/highcharts.js"></script>
and this plot:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
plotOptions: {
line: {
lineWidth: 10,
marker: {
enabled: false
}
}
},
series: [{
data: [29.9, 71.5, 106.4, null, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointStart: Date.UTC(2012, 0, 1),
pointInterval: 24 * 36e5
}]
});
Set plotOptions.line.dashStyle to 'Solid'. Example JSFiddle.
(This should be default, so why setting it explicitly makes them non-rounded is strange.)
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
}]
});
});
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.
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/