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/
Related
I want to add a logo when printing and exporting Highcharts only.
i tried with exporting and it works fine but with no hope with printing.
http://jsfiddle.net/andrew_safwat/zt5qLwe1/
$(function () {
// create the chart
$('#container').highcharts({
chart: {
events: {
load: function () {
if(this.options.chart.forExport) {
this.renderer.image('http://highsoft.com/images/media/Highsoft-Solutions-143px.png', 80, 40, 143, 57)
.add();
}
}
}
},
series: [{
animation: false,
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]
}]
});
});
any ideas please?
I use stacklabels in my stacked bar chart.
stackLabels: {
rotation : angelLabel,
style: {
fontSize: labelFontSize,
fontFamily: labelFontFamily
},
enabled:true,
color: '#000000',
useHTML: true
}
The code above works well at initialization. Now, I need to change "enabled" to false.
The code below is not working.
chart.options.yAxis[0].stackLabels.enabled = false;
chart.redraw();
How can i change stacklabels dynamically?
stackLabels is a property of a yAxis, so you could update that axis using API function Axis.update()
$(function () {
var chart = $('#container').highcharts({
chart: {
type: 'column'
},
yAxis: {
stackLabels: {
enabled: true
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
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]
}]
}).highcharts();
var enable = true;
$('#button').click(function () {
enable = !enable;
chart.yAxis[0].update({
stackLabels: {
enabled: enable
}
});
});
});
Example: http://jsfiddle.net/yqypj4qr/
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'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/
I would like to have two pie charts to show up on my page, next to each other. They are both the same style but different data.
Is that possible and how?
Thank you
You can have multiple series of pie chart data on the same chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: 'Group Name'
},
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],
center: ['20%'],
name: 'foo'
}, {
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],
center: ['80%'],
name: 'bar'
}],
plotOptions: {
pie: {
dataLabels: {
enabled: false
}
}
}
});
jsfiddle: http://jsfiddle.net/4NtBw/
Another solution is to set the same size for both charts. That would disable option to smart resize for pie with dataLabels and you will get two the same size charts both with enabled dataLabels.
Search center at : http://docs.highcharts.com/#polar-chart
It might help