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
}]
});
});
Related
I'm using 3D Column Highcharts and it does not show the datalabels, in 2D is ok but 3D is not. It's also so strange that the png download shows the datalabels.
// Set up the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: 'Chart rotation demo'
},
subtitle: {
text: 'Test options by dragging the sliders below'
},
plotOptions: {
column: {
depth: 25
},
},
series: [{
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],
dataLabels: {
enabled: true
}
}],
});
I expect the datalabels can be shown at the top of the columns, need help and thanks a lot!
Not sure if you noticed it but upgrading to V7.2.1 will fix the issue.
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'
}]
Is there a way to show all days at the X axis in this case? Even if i force the minTickInterval to one day highcharts dont show all days.
Fiddle example
$(function () {
$('#container').highcharts({
chart: {type: "column", inverted: true,
},
xAxis: {
type: 'datetime'
},
plotOptions: {
series: {
pointInterval: 24 * 3600 * 1000,
pointRange: 24 * 3600 * 1000
}
},
series: [{
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]
}]
});
});
Datetime axes are based on milliseconds, so an interval of one hour is: 3600 * 1000.
The solution above does not work in charts of type: area.
So if your xAxis is in days you could use:
chart: {
type: 'area'
},
xAxis: {
type: 'datetime',
tickInterval: 24 * 3600 * 1000
}
What you need is tickInterval in xAxis:
xAxis: {
type: 'datetime',
tickInterval: 1
}
Updated your jsFiddle here: http://jsfiddle.net/NR8vG/1/
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/