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.
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
By default, the scale for the x-axis and y-axis are on the bottom & left of the chart, respectively. I want them adjacent to the plot lines (the x- and y-axis). Here's an illustration of what I'm hoping to achieve: imgur.com/a/tf53t
I know that I can use offset: to move the scales to a specific pixel location, but they no longer align to the plot lines if I change the maximum/minimum values on either axis.
I labeled where I think offset should go in the code below, but I'm not sure what to type after it.
http://jsfiddle.net/z7eyv/60/
Here's the specific part of the code in question:
yAxis: {
min: -20,
max: 20,
tickInterval: 1,
endOnTick: false,
title: {
text: ''
},
plotLines: [{
value: 0.1,
width: 1,
color: 'black'}]
},
plotOptions: {
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
}
},
xAxis: {
min: -20,
max: 14,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
offset: //???????????????????????????????????????
title: {
text: '',
},
plotLines: [{
value: 0.1,
width: 1,
color: 'black'}]
},
I am using Highcharts for Area Chart and displaying 2 y-axis but unable to set different min, max and tick intervals for them.
We need help in implementing multiple y axis with set values of min , max and tick intervals.
We are using Highcharts for Area Chart with 2 Y axis one on left side of the chart and other on right side of the chart.
On left side of Y Axis we need the tick interval to be of 5 which is currently being shown as 20.
Whereas on the right side of Y axis we need the tick interval of 10 which is currently being shown as 20.
Siimilarly the min and max values for both the Y axis needs to be different.
How we can we implement this ?
Appreciate the help.
Below is my highcharts config:
chart: {
type: 'area',
},
title: {
text: null
},
xAxis: {
min: 0,
max: 600,
tickInterval: 50,
title: {
text: ""
}
},
yAxis: [{
min: 10,
max: 40,
tickInterval: 5,
title: {
text: ''
}
},{
min: -30,
max: 30,
tickInterval: 10,
title: {
text: ''
},
opposite: true
}],
size: {
width: 1050,
height: 170
},
series: [{
showInLegend : false,
name: '',
yAxis: 0,
color: 'red',
lineWidth: 1,
data: [33.69, 33.68, 33.68, 33.68, 33.68, 33.86, 33.59, 33.96, 33.89, 33.98]
},{
showInLegend : false,
name: '',
yAxis: 0,
color: 'orange',
lineWidth: 1,
data: [21.71, 30.42, 30.42, 30.42, 30.42, 31.03, 21.63, 29.81, 30.92, 21.63]
},{
showInLegend : false,
name: '',
yAxis: 1,
color: 'black',
lineWidth: 1,
data: [-8.44, -8.65, -8.65, -8.65, -8.65, -8.68, -8.62, -8.77, -8.56, -8.73]
};
you will have to use
alignTicks: false
here is updated fiddle
I try drawing a polar chart by 'HighChart' that each series have 2 data category between 0 to 100 that have overlap on other.
My problem is when data value is greater than 90, dataLabel of 2 category have overlap.
I want set dataLabel position dynamically by formatter function.
All my try to do this was failed.
Is there solution to solve this problem?
In below is my simplified code. And in this JSFiddle.net you can see result and edit it
var chart;
var options={
chart:
{
renderTo: 'container',
type: 'column',
polar: true
},
xAxis:
{
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
},
yAxis:
{
gridLineWidth: 0,
labels:
{
enabled: false
}
},
colors: ['#F47414', '#A8CBFF'],
plotOptions:
{
column:
{
grouping: false,
shadow: false
},
series:
{
dataLabels:
{
enabled: true /// for use My solution, comment this line
/* ------------------------------------------------------------
/// My solution is using formatter to set y align based on value. But I don't know why this don't work.
enabled: true,
formatter: function ()
{
if (this.y>=90 && this.y<100)
{
console.log(this.series.options.dataLabels.y);
this.series.options.dataLabels.y =+ 20;
}
}
---------------------------------------------------------------*/
}
}
},
series:
[
{name: 'GoalPerecent', data:[100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]},
{name: 'ActualPerecent', data:[95, 20, 23, 45, 98, 10, 35, 73, 33, 85, 64, 10]}
]
}
$(document).ready(function()
{
chart = new Highcharts.Chart(options);
});
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.