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'}]
},
Related
I am using highcharts to make a graph . My graph is look like below,
I want to merge the points using an Arc or Curve. So my excepted output look like below,
Also i am using PlotLines to draw a line in Yaxis. I want to mark the point in the PlotLine . I am using the following code to make this graph .
$(document).ready(function () {
var left = [[4,7],[9,2]];
var right = [[2,2],[9,9]];
Highcharts.chart('container', {
title:{
text:''
},
tooltip: { enabled: false },
exporting: { enabled: false },
credits: {enabled: false},
plotOptions: {
series: {
pointStart: 1
}
},
xAxis: {
max: 10,
min: 1,
tickInterval: 1
},
yAxis: {
max: 11,
min: 0,
tickInterval: 1,
plotLines: [{
color: 'black',
value: 5.5,
width: 2
}],
},
series: [{
showInLegend: false,
data: left
},
{
showInLegend: false,
data: right
},
],
});
});
Question is related to this one.
Problem : Currently I have chart with 2 series - one serie with positive and one with negative values. By default each serie has dynamic scaling but they are not relating (I mean if 20 for first serie is MAX value and 5 for second serie is MAX, then it looks on graph like the same). When I set max and min values to yAxis, it solve problem, but adds to much empty space, that for some cases column is too small. Can I update chart setting to have dynamic scalling but one for both series?
Here is my example with setted MAX and MIN values for yAxis http://jsfiddle.net/futw5e8k/6/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: null
},
xAxis: {
categories: ['13-17', '18-24', '25-34', '35-44', '45-54', '55-64', '65+'],
offset: -150,
lineWidth: 0,
tickWidth: 0
},
yAxis: [{
title: {
text: null,
},
top: 50,
height: 124,
min: 0,
max: 100,
gridLineColor: 'transparent',
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
}
},{
title: {
text: null
},
top: 200,
height: 150,
offset: 0,
min: -100,
max: 0,
gridLineColor: 'transparent',
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
}
}],
plotOptions: {
column: {
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
formatter: function() {
return Math.abs(this.y);
}
}
}
},
tooltip: {
formatter: function() {
return this.x + '<br/>' + this.series.name + ': ' + Math.abs(this.y);
}
},
series: [{
name: 'John',
data: [1, 13, 20, 19, 15, 7, 2]
}, {
name: 'Joe',
yAxis: 1,
data: [-0.35, -6, -9, -16, -3, -1.5, -0.25]
}]
});
On load event you can find the maximum of your data and dynamically update axes' max - see Axis.update().
chart: {
type: 'column',
events: {
load: function() {
const max = Math.max(this.series[0].dataMax, this.series[1].dataMax);
this.yAxis[0].update({
max: max,
}, false);
this.yAxis[1].update({
max: max,
top: 130
}, false);
this.redraw(false);
}
}
},
example: http://jsfiddle.net/futw5e8k/7/
I have a requirement to display completion percentage on a bar chart with the start date for each of those project as line chart.
Now, for achieving this I have created a chart with dual y-axis.
1 - axis-1 shows progress with bar-chart. With max: 100 - avoid displaying values > 100.
2 - axis-2 shows start dates with a line chart
With this set up, I expect the bar to go all the way to the end when value is 100 and the secondary axis to adjust with in it. Instead the bar stops at about 3/4 of the way and line chart actually plots point beyond bar chart's 100%.
Following jsfiddle would display the prominently.
var completionChart = $('#Chart').highcharts({
title: {
text: 'Project QUAL Status - SD/uSD'
},
xAxis: {
categories: window.xCategories,
crosshair: true
},
yAxis: [{
title: {
text: '% Completion'
},
min: 0,
max: 100,
labels: {
enabled: false
},
gridLineWidth: 0
}, {
"title": {
"text": "Start Date"
},
type: 'datetime',
opposite: true
}],
tooltip: {
backgroundColor: 'rgba(255,255,255,1)',
borderRadius: 10,
borderWidth: 1,
borderColor: '#000000',
useHTML: true,
positioner: function () {
return { y: 317 };
},
shared: false,
style: {
padding: 5
}
},
plotOptions: {
bar: {
groupPadding: 0
},
series: {
dataLabels: {
enabled: true,
align: 'left',
overflow: 'none',
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function () {
if (this.y <= 100)
return Math.round(this.y) + '%';
}
},
cursor: 'pointer'
}
},
credits: {
enabled: false
},
series: [{
index: 0,
name: 'Completion %',
data: completionpercent,
showInLegend: false,
type: 'bar'
}, {
data: startDate,
type: 'spline',
name: 'Start Date',
connectNulls: true,
color: '#2F4367',
lineWidth: 3,
yAxis: 1,
index: 1,
}]
});
The width of the chart is set and I can not change it without affecting the overall design of the application. Changing the width does help sometimes, but I want a solution that does not depend on the chart width to work.
You need to set the alignTicks property to false in order to achieve this.
Updated fiddle:
https://jsfiddle.net/jlbriggs/mup6vL8d/2/
Reference:
http://api.highcharts.com/highcharts/chart.alignTicks
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'm trying to plot decimal values on my x-axis, but each of my data points gets placed only on my major tick marks (at whole numbers). I'm using an array of [x,y] paired data, e.g. [[35,1500], [35.21,2000], [35.72,3500], [36.32,4000]]
What is happening, is the first item get's placed over the starting value (35), the second value (x 35.21) is being placed directly over 36, the next value (x 35.72) gets placed over 37, etc. It's as if the x-value in my data is being ignored.
Here is the chart's setup attributes:
chart: {
zoomType: 'x',
spacingRight: 10,
type: 'area'
},
title: {
text: null
},
xAxis: {
allowDecimals: true,
tickInterval: 1,
minorTickInterval: 10,
labels: {
step: 1
},
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'total$'
}
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
pointStart: 35,
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [
{
//index: 1,
name: 'trajectory$',
data: progressUpdateData,
}
]
How do I get the x-values plotted properly?
Thanks
Here's a fiddle showing your points in-between whole numbers
http://jsfiddle.net/LLExL/2462/
plotOptions: {
area: {
pointStart: 35,
pointPlacement: 'between',
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
}
You might want to look at http://api.highcharts.com/highcharts#plotOptions.area.pointPlacement as maybe you have this set to "on" instead of "between" somewhere?
Will's answer didn't work for me. However, setting a min and a max to yAxis did. If you have these values [[35,1500], [35.21,2000], [35.72,3500], [36.32,4000]], you simply set a minimum of 35 and a maximum of 37.
This
yAxis: {
min: 0,
title: {
text: 'total$'
}
},
became this
yAxis: {
min: 35,
max: 37,
title: {
text: 'total$'
}
},