So Im using this code to create a highcharts line chart
http://jsfiddle.net/3oLh5r2w/
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate from 2006 through 2008'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime',
minRange: 14 * 24 * 3600000 // fourteen days
},
yAxis: {
title: {
text: 'Exchange rate'
},
floor:1,
min: 1,
max: 300,
reversed: true,
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'line',
name: 'USD to EUR',
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2006, 0, 1),
data: [
83, 28, 253, 113, 72, 177, 279, 71, 228, 72, 54, 162, 275, 246, 111, 119, 225, 19, 244, 102, 1, 75
]
}]
});
});
In the Fiddle, Im trying to make it so that the yaxis always shows 1 - 300. The problem I am having is that it is always rounding down to 0. I have tried using startOnTick, but it didnt do anything. The only thing that I could find that made it work correctly was setExtremes, but it could only be activated through an after load function like a click function.
How can I get this to work right?
In case when you set min as 1, you need to have tickInterval which allows to achieve 300. Other solution is using tickPositions / tickPositioner
EDIT:
Examples: http://jsfiddle.net/3oLh5r2w/4/ tickPositions
set startOnTick : false,
here is the updated fiddle
http://jsfiddle.net/3oLh5r2w/2/
here is the documentation
The minimum value of the axis. If null the min value is automatically calculated. If the startOnTick option is true, the min value might be rounded down.
Related
I want to show the last plot band value(225) as the max value in x axis.In the picture you can see the x axis max value is 300, that's why a gap is created. I want to show the plotband
max value 225 as the max value in x axis. So the gap will eliminate.
Highcharts.chart('container1', {
chart: {
marginTop: 20,
width: 225,
height: 80
},
title: {
text: ''
},
xAxis: {
categories: ['<span class="hc-cat-title">Revenue</span><br/>']
},
yAxis: {
plotBands: [{
from: 0,
to: 132,
color: '#666'
}, {
from: 132,
to: 157.7,
color: '#999'
}, {
from: 157.7,
to: 225,
color: '#bbb'
}],
title: null
},
series: [{
data: [{
y: 225,
target: 157.7
}]
}],
tooltip: {
pointFormat: '<b>{point.y}</b> (with target at {point.target})'
}
});
Jsfiddle: Bullet Chart
You need to set the max property and disable the endOnTick option:
yAxis: {
...,
max: 225,
endOnTick: false
},
Live demo: https://jsfiddle.net/BlackLabel/je7ocpnh/
API Reference:
https://api.highcharts.com/highcharts/yAxis.max
https://api.highcharts.com/highcharts/yAxis.endOnTick
similar to this question, I have a Highcharts spline chart with two y-Axis, the first representing a percentage, having floor and ceiling set at 0 and 100, and the second one an unknown numeric value. Setting the chart height to 200 results in the y-Axis showing 105 as last tick.
$(function () {
$('#container').highcharts({
chart: {
defaultSeriesType: 'spline',
alignTicks: false,
height: 200
},
title: {
text: 'Y axis exceeds `ceiling` value'
},
xAxis: {
showFirstLabel: true,
showLastLabel: true,
labels: {
enabled: false
}
},
yAxis: [{
title: {
text: 'Percentage'
},
floor: 0,
ceiling: 100,
//,
//tickPositioner: function () {
// alert(this.tickPositions[this.tickPositions.length-1]);
//}
},{
title: {
text: 'Number'
},
gridLineWidth: 0,
opposite: true
}],
series: [{
data: [86, 89, 91, 97, 97, 97, 97, 97, 97, 97, 97, 97]
}, {
yAxis: 1,
data: [685, 676, 651, 649, 649, 649, 649, 649, 649, 649, 649, 649]
}]
});
});
JSFiddle
I tried setting minPadding and maxPadding, but that doesn't work. I also tried setting my own tick positions using tickPoisitioner function, but the weird thing here is that the last tick position seems to be 100 (see commented code) but is shown as 105 anyway... Setting startOnTick to false does seem to help setting the last tick right, but that does not quite fit my requirements as I want the labels shown at first and last positions on the axis.
Any help is greatly appreciated.
I recently encountered a weird issue with HighStock.
Firstly here is my code http://jsfiddle.net/woon123/br0e8mkw/
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#analytics_line').highcharts('StockChart', {
credits: {
enabled: false
},
title: {
text: 'Analytics of Deals'
},
subtitle: {
text: 'View Count and Redemption Count'
},
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Day',
dataGrouping: {
forced: true,
units: [
['day', [1]]
]
}
}, {
type: 'year',
count: 1,
text: 'Week',
dataGrouping: {
forced: true,
units: [
['week', [1]]
]
}
}],
buttonTheme: {
width: 60
},
},
yAxis: {
floor: 0,
title: {
text: 'Number'
}
},
plotOptions: {
dataLabels: {
visible: true
},
series: {
compare: 'value'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
valueDecimals: 2
},
legend: {
enabled: true,
align: 'right',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
layout: 'vertical',
verticalAlign: 'top',
y: 100,
shadow: true
},
series: [{
id: "First Graph",
name: "First Graph",
pointStart: 1444060800000.0,
pointInterval: 24 * 3600 * 1000,
data: [20, 23, 23, 23, 23, 23, 23, 23, 23, 23],
}, {
id: "Second Graph",
name: "Second Graph",
pointStart: 1444060800000.0,
pointInterval: 24 * 3600 * 1000,
data: [9, 12, 16, 16, 16, 16, 16, 16, 16, 16],
}, ]
}, function (chart) {
// apply the date pickers
setTimeout(function () {
$('input.highcharts-range-selector', $(chart.container).parent())
.datepicker();
}, 0);
});
// Set the datepicker's date format
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
onSelect: function () {
this.onchange();
this.onblur();
}
});
});
In this case, First Graph is suppose to be above Second Graph according to the data. When you compare the series, First Graph values are always higher then Second Graph.
However, the graph plotted actually cause First Graph to be below Second graph although when you mouse over the lines, it gives the correct values.
Furthermore, First Graph is suppose to start at 20 but as you can see it starts at 0, and the Y-axis values are wrong as well (0-2.5-5)
However, all these errors can be solved by placing 0 at the start of the data.
For the case of First Graph it is [0, 20, 23, 23, 23, 23, 23, 23, 23, 23, 23] and Second Graph it is [0, 9, 12, 16, 16, 16, 16, 16, 16, 16, 16].
Can anyone advice why is this the case and perhaps provide a solution to allow my data to start with a positive integer rather then 0
Take out the compare on the plotOptions, series
series: {
compare: 'value'
}
Fiddle: http://jsfiddle.net/br0e8mkw/2/
From the API: http://api.highcharts.com/highstock#plotOptions.series.compare
Compare the values of the series against the first value in the visible range. The y axis will show percentage or absolute change depending on whether compare is set to "percent" or "value". When this is applied to multiple series, it allows comparing the development of the series against each other. Defaults to undefined.
i want to update the values as decimals for a guage chart point.update([my decimal value]). But it always points to 10. It works only when i supply an integer value.
Heres the yAxis definition -
yAxis: [{
lineWidth: 0,
min: 0,
max: 10,
tickInterval :100,
tickPosition: 'outside',
minorTickPosition: 'outside',
tickLength: 15,
minorTickLength: 0,
labels: {
distance: 25
},
offset: 5,
endOnTick: false,
title: {
y: -70
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
}],
and the series is
series: [{
name: 'Speed',
data: [{
id: 'hour',
y: 10,
dial: {
backgroundColor: '#DEA12F',
radius: '100%',
baseLength: '5%',
baseWidth: 15,
rearLength: '0%'
}
}],
Here is the pic of the dial with the values
How can make the dial to point to the specified value(0.9)?
I want to display a small polar chart on my web site.
But there is an anoying behaviour. the container (circle) of the chart do not fit with the chart, it grow step by step. If a value is just too big, the chart will be lost in a huge empty circle.
Please, have a look on this jsfiddle to understand the problem :
http://jsfiddle.net/7zmT9/
Is it possible to force the frame to fit the chart? or to reduce the step value?
Here is my code :
$(function () {
$('#container').highcharts({
chart: {
polar: true,
height: 252,
width: 262
},
pane:{
size: '100%',
},
title: {
text: 'Highcharts Polar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 20], // replace 20 by 18 to see the a more fitted chart
pointPlacement: 'between'
}, {
type: 'line',
name: 'Line',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'area',
name: 'Area',
data: [1, 8, 2, 7, 3, 6, 4, 5]
}]
});
});
Universal solution is to set maxPadding: 0 and sometimes endOnTick: false. See demo: http://jsfiddle.net/7zmT9/4/
yAxis: {
min: 0,
maxPadding: 0
},
You can indeed set the step, but I am not 100% sure if this is what you are looking for.
On your yAxis you can set the tickInterval
yAxis: {
min: 0,
tickInterval: 2 //change this value to suit your needs
},
I have updated your Fiddle. Is that what you are after?