I would like some help with Area chart. If the series values are not 0.0, the minimum value of the chart always set into 0, and it's correctly on the bottom of the chart (ie) y-axis:
I try to set
{
min: 0,
minPadding:0
}
on the y-axis, but it doesn't work. Obviously I can't set a max value because I have a dynamic data. How can I solve this?
I have tried above cases in line charts its working properly, but not in Area charts?
If your issue is to set a max (or min) dynamically, you can use event to set dynamically max and min:
var newMaxValue=60000000;
var newMinValue=10000000;
...
events: {
load: function() {
var check = $('#container').highcharts();
check.yAxis[0].setExtremes(newMinValue, newMaxValue);
}
Check the example (jsfiddle):
$(function() {
var newMaxValue=60000000;
var newMinValue=10000000;
$('#container').highcharts({
chart: {
type: 'area',
events: {
load: function() {
var check = $('#container').highcharts();
check.yAxis[0].setExtremes(newMinValue, newMaxValue);
}
}
},
series: [{
"data": [{
"y": 198975.14,
}, {
"y": 15031755.47,
}, {
"y": 21374471.88,
}],
"name": "Income Statement",
"yAxis": 0
}]
});
});
Related
When I resize the navigator on the bottom from left and right the mouse over tooltip stops working, but it works fine when zoom is set to YTD or ALL, how can I fix this please? Thank you!
https://jsfiddle.net/BlackLabel/anp4L9do/1
series: [{
type: 'spline',
name: 'Price',
point: {
events: {
mouseOver: function(e) {
var point = this,
chart = point.series.chart;
chart.series[1].points[point.index].setState('hover');
},
mouseOut: function(e) {
var point = this,
chart = point.series.chart;
chart.series[1].points[point.index].setState('normal');
},
},
},
states: {
inactive: {
opacity: 1
}
},
data: [
[1541514600000, 20100.92],
[1543847400000, 18428.466]
]
}, {
type: 'column',
name: 'Volume',
data: [
[1541514600000, 31882900],
[1543847400000, 40802500]
],
states: {
inactive: {
opacity: 1
}
},
enableMouseTracking: false,
yAxis: 1
}]
});
An array with points is reduced to only the visible ones, use data array instead:
point: {
events: {
mouseOver: function(e) {
var point = this,
chart = point.series.chart;
chart.series[1].data[point.index].setState('hover');
},
mouseOut: function(e) {
var point = this,
chart = point.series.chart;
chart.series[1].data[point.index].setState('normal');
},
},
}
Live demo: https://jsfiddle.net/BlackLabel/gnkjf8q9/
I have a chart created with highchart and here is the demo
$(function () {
var seriesData = [["apple",29.9], ["banana",71.5], ["orange",106.4], ["mango",106.4], ["mango",106.4], ["mango",106.4], ["mango",106.4], ["mango",106.4], ["mango",106.4], ["mango",106.4],];
$('#container').highcharts({
chart: {
},
xAxis: {
tickInterval: 1,
labels: {
enabled: true,
color: '#FFFFFF',
formatter: function() { return seriesData[this.value][0];
},
}
},
series: [{
data: seriesData
}]
});
});
and it have many labels placed on x-axis and i can not use rotation option. This is the output i would like to achieve
Set staggerLines: 2 in your xAxis labels, like this:
xAxis: {
labels: {
staggerLines: 2,
...
},
...
},
Working JSFiddle example: http://jsfiddle.net/ewolden/ktgd5h98/
API on staggerlines: https://api.highcharts.com/highcharts/xAxis.labels.staggerLines
I am using Highchart to create a chart. I am using xAxis type: 'datetime'
my first xAxis label is showing repeatedly. When i add tickInterval all graph ticks overlaps on one and another, So i used pointInterval instead. All graph options are working except first xAxis label which is showing repeatedly.
here is my options js:
$(function () {
$('#container').highcharts({
chart: { type: 'area'},
title: {text: null},
exporting: { enabled: false },
xAxis: {
type: 'datetime',
pointInterval: 24 * 3600 * 1000,
labels: {
padding: 0,
step: 1,
formatter : function() {
var dayStr = Highcharts.dateFormat('%a ',this.value);
return dayStr;
}
},
startOnTick: true,
endOnTick: false
},
yAxis: {
min: <?php echo $this_min;?>,
max: <?php echo $this_max;?>,
title: { text:'mmHg' }
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{showInLegend: false, name:'diastolic', data:[[1464998400, 130], [1465171200, 125], [1465344000, 120], [1465430400, 122]]}, {showInLegend: false, name:'systolic', data:[[1464998400, 90], [1465171200, 85], [1465344000, 80], [1465430400, 82]]}],
tooltip: {
formatter: function() {
var s = [];
$.each(this.points, function(i, point) {
s.push('<span style="font-weight:bold;">'+point.y +'<span>');
});
return s.join('/')+' mmHg';
},
shared: true
},
credits: { enabled: false}
});
});
I rewrote your code in jsFiddle.
The timestamp [1464998400, 1465171200, 1465344000, 1465430400] that you used in series is pointing to the same date which is Jan 18 1970 and that's why your x-axis label seems repeating. Check out my modified code #line#54 and the label is working fine now.
pointInterval is no longer available in the new version of Highchart. You should use tickInterval instead.
When I try do display flat values using HighStock chart the ticks and labes on Y Axis disappear as you can see in the followin link:
http://jsfiddle.net/garlam/VmwAQ/
$(function() {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 1
},
yAxis: {
title: {
text: 'test-values'
}
},
series: [{
name: 'test',
data: [ { x: 1361443380000, y: 10}, { x: 1361443410000, y: 10}, { x: 1361443440000, y:10}, {x:1361443470000, y:10} ]
}]
});
});
I would like to avoid set of y axis min value
Any help ?
You can set min / max value
yAxis: {
min:0,
max:20,
title: {
text: 'test-values'
}
},
I am creating a HighChart with a plotLine in it. The plotLine has a fixed value, while the data can vary between charts.
HighChart scales the y-axis automatically based on the maximum value of data, but it doesn't consider the plotLine's value in its calculations.
Hence, if the data range encompasses the plotLine value, the plotLine gets shown, but gets cropped out of the viewport if not.
Example:
$(function () {
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Dummy Data by Region'
},
xAxis: {
categories: ['Africa', 'America', 'Asia']
},
yAxis: {
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'}
}]
},
series: [{
name: 'Year 1800',
data: [107, 31, 650]
}]
});
});
});
JSFiddle for above code: http://jsfiddle.net/4R5HH/3/
The goal line (in red) is shown for the default data, but if I change the data to [107, 31, 250], then the plotLine goes out of the graph viewport and hence becomes invisible.
One other option that does not introduce data points:
yAxis: {
minRange:450,
min:0,
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'}
}]
},
This sets the minimum for the yAxis to 0 (this is unlikely to be false in this case) and the minimum Range to 450.
See updated fiddle.
You need to add in a point to you chart but disable the marker.
I added a new series with scatter plot type and its value equal to the goal value:
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450]
}
See updated jsFiddle: http://jsfiddle.net/wergeld/4R5HH/4/
In some cases, wergeld's solution would be preferable than jank's solution, especially when you are not sure about min and minRange. But wergeld's solution has a minor issue. If you point your mouse over the plot line, it will show a point and tooltip on the point. To avoid this, I have modified his solution and added enableMouseTracking to get rid of the problem.
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450],
enableMouseTracking: false
}
See updated jsFiddle: http://jsfiddle.net/4R5HH/570/
You could simply set the max attribute to the max value you will have:
yAxis: {
max:650 //HERE
plotLines...
},
Adjust the axis while loading the chart:
$(function() {
$('#container').highcharts({
chart: {
events: {
load: function() {
var check = $('#container').highcharts();
var min = check.yAxis[0].min;
var max = check.yAxis[0].max;
var pLine = check.yAxis[0].chart.options.yAxis[0].plotLines[0].value;
if (pLine > max) {
check.yAxis[0].setExtremes(null, pLine);
}
if (pLine < min) {
check.yAxis[0].setExtremes(pLine, null);
}
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar'],
},
yAxis: {
minPadding: 0.30,
plotLines: [{
color: '#FF0000',
width: 2,
value: 200
}]
},
series: [{
data: [70, 60, 95]
}]
});
});