I want to have a chart that displays values only over the 'min' value for the yAxis (jsfiddle):
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
min: 100
},
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]
}]
});
But actually Highcharts shows shadow and tooltip of the points which are under the minimum:
How can I configure Highcharts to ignore those points which are outside the chart plot?
use formatter function in toolTip:
tooltip: {
formatter: function() {
if (this.y < this.series.yAxis.min) return false; else return this.series.name + ': ' + this.y;
}}
See fiddle with your example
Related
am trying to plot a line graph in highchart but its rectangle in shape, how to make it in square shape.
code here
Highcharts.chart('container', {
chart: {
type: 'area'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
fillOpacity: 0.1
}
},
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]
}]
});
Should be something like above img
How can we add content above every series like a html content .for ex - My Content. I am using line chart.
here is an example which i found in api.
jsFiddle: http://jsfiddle.net/ekec5nut/
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
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]
}]
}, function (chart) { // on complete
chart.renderer.text('Series 1', 90, 150)
.attr({
rotation: 0
})
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
});
});
but I do not want to give position like this : chart.renderer.text('Series 1', 90, 150) . I want is to have the content above each series while series are getting created.
How about simply using dataLabels for first point? Just like this:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [
{
dataLabels: {
enabled: true,
formatter: function() { return 'My Content'; }
},
y: 29.9
},
71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
I have a Highchart where i am showing a scrollbar. i have defined the
xAxis: {
min:0,
max:6,
For instances where data is less than 6 grids..it shows extra points with null. How to avoid showing those extra points?
In the below example see the extra points are 12,13, 14..I want to remove them.
http://jsfiddle.net/highcharts/fj6d2/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
min: 0,
max: 14
},
legend: {
verticalAlign: 'top',
y: 100,
align: 'right'
},
scrollbar: {
enabled: true
},
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]
}]
});
You can simply get length of data, and then set proper max, see: http://jsfiddle.net/Fusher/fj6d2/2378/
var 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],
len = data.length;
len = len < 6 ? len : 6;
Then in options for Highcharts:
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
min: len
},
series: [{
data: data
}]
I have a line graph where Y values are -10 to +60. I would like to style the y=0 line to stand out from other grid lines.
Is this possible?
Thanks.
Take a look at the plotLines API in the yAxis...
http://api.highcharts.com/highcharts#yAxis.plotLines
Example...
http://jsfiddle.net/48dUL/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yAxis: {
plotLines: [{
color: '#C0C0C0',
width: 5,
value: 0
}]
},
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]
}]
});
});
Is there a way in highstock for panning to work in yAxis. I have set max in yAxis so that the user cannot see data above the max yAxis value by default. However I want to give user the ability to pan and see the data beyond the max yAxis value.
Example in the jsfiddle where max yAxis is set to 200.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
panning: true
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
max: 200
},
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]
}]
});
Thanks.