Develop Reference

How can I align scale with axis in Highcharts?

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'}]
},

Highchart with dynamic scale for both series

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/

Highcharts Gauge styling and adding CSS elements

I'm working on a gauge module which is intended to look as follows:
Hydration Guage
Currently, I have the following model working:
(Please refer to the fiddle for the most updated code)
GaugeFiddle
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'gauge'
},
title: {
text: 'Hydration Index'
},
pane: {
startAngle: -140,
endAngle: 140,
size: 200,
background: {
backgroundColor: {
linearGradient: [0, 300, 300, 300],
stops: [
[0, 'rgb(152, 230, 230)'],
[1, 'rgb(0, 0, 10)']
]
},
innerRadius: '70%',
outerRadius: '100%',
shape: 'arc',
}
},
yAxis: {
reversed: true,
min: 0,
max: 100,
plotBands: [{ // mark the weekend
}],
tickInterval: 600
},
plotOptions: {
gauge: {
dataLabels: {
enabled: false
},
dial: {
radius: '100%',
backgroundColor: 'black',
borderColor: 'white',
borderWidth: 0.5,
rearLength: 0,
baseWidth: 10,
topWidth: 1,
baseLength: '0%'
},
pivot: {
radius: 0
}
},
},
series: [{
name: 'Hydration percent',
data: [20],
}],
credits: {
enabled: false
},
});
});
1) How would I add those curved edges on only one side of the gauge?
2) Can I reverse the direction of the needle from clockwise to counterclockwise? Currently, I have the yaxis reversed so the graph works how it is supposed to, but it counter-intuitively starts at high and proceeds from there onward (So if my chart goes from 0-100 and my data value is 10, it would start at 100 and go to 10 by default).
3) Finally, is there any way for me to add the dynamic text that changes based on the result?

It's possible but a bit tricky - you can modify SVG's path before it's renderer by modyfying Axis.getPlotBandPath method. See a demo below.
You can simply disable initial animation and set value = 0. Then, in callback, update the point to the correct value:
series: [{
name: 'Hydration percent',
animation: false,
data: [
0
]
}],
And callback:
function(chart) { // on complete
chart.series[0].points[0].update(80);
...
}
It's not a problem using Renderer.text. For example:
chart.myLabel = chart.renderer.text('Test', 10, 10).add(); // store in some variable
Then update text:
chart.myLabel.attr({
text: 'Nice!'
});
Here is a working demo: http://jsfiddle.net/8p8ab8bg/

Plot Bar chart and Line series chart on separate x-axis in Highcharts out of common dataset

I got common dataset for both line series and bar graph . In other words dataset consists both line series dataset and bar graph dataset. Now I want to plot line series graph on separate x-axis and bar graph on separate x-axis. And want to control them both from same frame. Like both tooltip for both should come in same popup, from same section I can show and hide them. Attached my screenshot , currently they are sharing same x-axis. I want to separate them. Here is my piece of code.
for(j=0; j<timelinejson.length; j++){
seriesOptions[j] = {
//name: selectedMarkers[i],
name: timelinejson[j].marker_desc,
data: mData,
marker : {
enabled : true,
radius : 3
},
type : 'spline',
tooltip : {
valueDecimals : 2
}
};
}
seriesOptions[10] = {
name: 'Speed',
data: [[1372636800000, 0.16], [1375315200000, 0.36], [1377993600000, 0.4], [1380585600000, 0.68], [1383264000000, 0.6], [1385856000000, 0.64], [1388534400000, 0.68], [1391212800000, 0.69], [1393632000000, 0.71], [1396310400000, 0.73], [1398902400000, 0.74], [1401580800000, 0.75], [1404172800000, 0.76], [1406851200000, 0.17], [1409529600000, 0.67], [1412121600000, 0.18], [1414800000000, 0.58], [1417392000000, 0.28], [1420070400000, 0.58], [1422748800000, 0.49], [1425168000000, 0.39], [1427846400000, 0.29], [1430438400000, 0.59], [1433116800000, 0.19]],
type: 'column',
valueDecimals: 1
};
drawTrend(seriesOptions,temp)
function drawTrend(marker_array_main,temp) {
$('#trendChart'+temp).highcharts('StockChart', {
chart: {
height: 400
//width: 500
},
rangeSelector: {
selected: 4
},
yAxis: {
/*labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},*/
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
legend: {
enabled: true,
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 100
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>',
valueDecimals: 2
},
series: marker_array_main
});
}

I think that you can use multiple yAxis in case of your chart. You can add as many yAxes as you want and you can connect your series with this axes using yAxis:x parameter in your Series object.
x value is an index of specific axis in yAxis array.
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
Here you can find simple example of this kind of chart from Highcharts demos:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/

HighCharts not plotting decimal values in x-axis

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$'
}
},