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'
}
},
Related
How can i draw following graph using Scatter Plot highchart?
I am trying to achieve this kind of plot that is being displayed in screenshot using Highcharts. Till now I am able to Draw point onto the chart using Scatter Plot but I am having trouble plot these two red line from X-axis and Y-axis. Can anyone of you help me here the what I need to do to draw two straight line from a point, one toward X-axis and second toward Y-axis. The attached code is only the JS code that I used for ploting the scatter graph. Thanks
/* calculationChart */
$(function () {
$('#FHIchart').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Strategic Alignment'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
},
yAxis: {
title: {
text: 'Process & Technology Integration'
},
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
lineWidth: 2
}
},
series: [{
name: ' ',
color: 'Red',
data: [[3.1, 3]]
}]
});
});
here is my code.
Use renderer.path to draw a line. You can draw the line on load event and redraw it on redraw event.
events: {
load: function() {
var point = this.series[0].points[0],
{
plotX: x,
plotY: y
} = point;
point.path = this.renderer.path()
.add(point.series.group)
.attr({
stroke: point.color,
'stroke-width': 1,
d: `M 0 ${y} L ${x} ${y} L ${x} ${this.plotHeight}`
});
},
redraw: function() {
var point = this.series[0].points[0],
{
plotX: x,
plotY: y
} = point,
path = point.path;
if (path) {
path.attr({
d: `M 0 ${y} L ${x} ${y} L ${x} ${this.plotHeight}`
})
}
}
}
example: https://jsfiddle.net/5j208Lpb/
The other solution is to define 2 additional points which will have be drawn outside the plot area. You need to set axes limits and set series.lineWidth to 1.
example: https://jsfiddle.net/5j208Lpb/1/
I have a area chart build with highcharts, I am trying to reduce some spaces between y axis cell columns means reduce height from 0 to 1 , 1 to 2 etc, but not getting proper result. how to achieve it ?
jQuery(document).ready(function () {
var txt = document.getElementById('hdnYaxis');
var txtFoxXAxis = document.getElementById('hdnXaxis');
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Monthly Status'
},
xAxis: {
categories: $.parseJSON(txtFoxXAxis.value),
labels: {
style: {
color: 'red'
}
},
maxPadding: 0,
},
tooltip: {
pointFormat: '{series.name} <b>{point.y:,.0f}'
},
plotOptions: {
area: {
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: $.parseJSON(txt.value)
});
});
set tickPixelInterval in yAxis ,use this:
yAxis: {
tickPixelInterval: 10 // whatever you want
}
Set maxPadding on yAxis as 0.
yAxis:{
maxPadding:0
}
I want the gradline and the xaxis started in the same line, I tried set the yaxis.min and so on。
it don't work, so some one could help me on this?
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'text'
},
xAxis: {
categories: [],
labels: {
style: {
width: '50px',
'min-width': '50px'
}
}
},
yAxis: {
categories: [],
title: {
text: 'text'
},
min: 0,
},
series: [
{
name: 'name',
type: 'spline'
}
]
This is my chart option, and I dynamicly update the values of xAxis and yAxis, this's my update code
chart.yAxis[0].setExtremes(0, maxy);
chart.xAxis[0].setCategories(timeArr);
chart.series[0].setData(valArr);
timeArr is the string array about time, valArr is my data, maxy is max of the valArr.
In general it should work fine: http://jsfiddle.net/bteWs/31/ (try to update to 4.0.1 version)
However, I advice to remove categories from yAxis, since you want numeric values, right?
yAxis: {
categories: [], //remove that option
title: {
text: 'text'
},
min: 0,
},
http://jsfiddle.net/gabrielesandoval/efHq7/
Is there a way to fill in the gap between the y-axis and the first point. The first point on my chart should be "25 years" and i would like the area between 0 and 25 to be filled in as well. Even if the tooltip doesn't work for that point, I would just like to visually show that the values between 0 and the first point.
I tried adding a point with a x value of zero but that didnt work. The only area charts I have seen where there is no gap between the two axis and the area are examples where the chart is inverted. Is there a proper way to do this?
Current Code:
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Monthly Comparison'
},
subtitle: {
text: '1 vs 2'
},
xAxis: {
min: 0,
categories: [0, '25 years', '30 years', '35 years', '40 years', '45 years']
},
yAxis: {
labels: {
formatter: function() {
return '$' + this.value;
}
},
min: 0,
title: {
text: 'Cost'
}
},
tooltip: {
shared: true,
valuePrefix: '$'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
area: {
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
type: 'area',
name: 'series1',
data: [['',60],['25 years',60], ['30 years',60], ['35 years',60], ['40 years',60], ['45 years',60]]
}, {
type: 'area',
name: 'series2',
data: [['',90], ['25 years',100], ['30 years',175], ['35 years',300], ['40 years',400], ['45 years',400]]
}]
});
});
You should set minPadding/maxPadding as 0, but these parameters doesn't work with categories. So you need to use numeric xAxis, instead of categories.
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]
}]
});
});