How to create a multi-axis highchart showing difference of multiple axis in different color. (how to show the orange color in attached image)
Expected graph.
The simplest way is to use column chart with 2 series (orange and grey) and plotOptions.grouping property set to false. I added 2 additional line series with disabled mouseTracking, and markers similar to markers on your image. Additionally i formatted tooltip to display the orange over value.
Cross marker SVG:
Highcharts.SVGRenderer.prototype.symbols.cross = function(x, y, w, h) {
return ['M', x, y, 'L', x + w, y + h, 'M', x + w, y, 'L', x, y + h, 'z'];
};
plotOptions.grouping:
plotOptions: {
column: {
borderWidth: 0,
grouping: false
}
},
And our series:
var orangeData = [1, 3, 8, 13, 11, 13, 15, 25, 29, 31, 27, 25, 16, 11, 10, 4, 4, 8, 2, 1, 1],
greyData = [3, 4, 11, 11, 12, 14, 15, 21, 25, 25, 23, 21, 15, 13, 12, 5, 5, 4, 2, 1, 1];
series: [{
data: orangeData,
color: '#f7931e',
tooltip: {
pointFormatter: function() {
return 'Orange value is higher than grey value by: ' + (orangeData[this.index] - greyData[this.index])
}
}
}, {
type: 'line',
data: orangeData,
color: '#ec1c24',
marker: {
symbol: 'cross',
lineColor: null,
lineWidth: 2
},
enableMouseTracking: false
}, {
data: greyData,
color: '#989898'
}, {
type: 'line',
data: greyData,
color: '#231f20',
enableMouseTracking: false
}]
You can take a look at jsFiddle demo:
https://jsfiddle.net/BlackLabel/xpwdhrvz/
Related
I have a chart with two yaxis but can't get the second data series to scale to the second axis. What am I missing?
Example: https://jsfiddle.net/32yugp6m/2/
Now I see where the problem is. You have set the series.yaxis to 1 and 2, meanwhile, it needs to be set as series.yAxis 0 and 1. Notice that Axis must be started with capital letter.
Demo: https://jsfiddle.net/BlackLabel/8u2rhegv/
series: [{
name: 'Deg F.',
type: 'line',
yAxis: 0,
data: [
[Date.UTC(2020, 1, 22, 12, 2), 70.8],
[Date.UTC(2020, 1, 22, 12, 1), 70.8],
...
],
},
{
name: 'RH',
type: 'line',
yAxis: 1,
data: [
[Date.UTC(2020, 1, 22, 12, 2), 33.4],
[Date.UTC(2020, 1, 22, 12, 1), 33.4],
...
],
}
]
API: https://api.highcharts.com/highcharts/series.line.yAxis
When last value in left stepped area is different from previous one it is hard to see it. (we just see a line along the end of the chart)
Demo:
https://jsfiddle.net/x2qf5wuy/1/
$("#container").highcharts({
chart: {
type: 'area'
},
plotOptions: {
area: {
stacking: 'normal',
step: 'left'
}
},
series: [{
name: "Example 1",
data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 0]
}, {
name: "Example 2",
data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 10]
}]
});
There is a way in highchart to add an artificial padding to data series so that the user can see the last point ?
Wanted result :
You can add a point with the same y value as the last series point and use the setExtremes method to show only the wanted part of the area:
chart: {
type: 'area',
events: {
load: function() {
var series = this.series[1],
lastPoint = series.data[series.data.length - 1];
series.addPoint({
x: lastPoint.x + 100,
y: lastPoint.y
}, false);
this.xAxis[0].setExtremes(null, lastPoint.x + 0.5);
}
}
},
Live demo: https://jsfiddle.net/BlackLabel/54a6jdgy/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
Is it possible to make the following chart with Highcharts library?
It's a simple line chart but with inverted triangle shaped grid. Is there any predefined type or a way to customize the grid shape? Any pointers which will guide me to a proper direction would help. Thank you!
Another method of how to create this type of chart:
Demo
Highcharts.chart('container', {
chart: {
width: 500,
},
xAxis: {
opposite: true,
title: {
text: 'Report Date'
},
gridLineWidth: 1,
type: 'datetime',
categories: ['01/01/2012', '02/01/2012', '03/01/2012', '04/01/2012', '05/01/2012', '06/01/2012', '07/01/2012', '08/01/2012', '09/01/2012', '10/01/2012'],
tickmarkPlacement: 'on',
labels: {
rotation: -90,
y: -18
},
offset: -13,
lineWidth: 0,
max: 8.6,
},
legend: {
enabled: false
},
yAxis: {
title: {
text: 'Milestones'
},
categories: ['01/01/2012', '02/01/2012', '03/01/2012', '04/01/2012', '05/01/2012', '06/01/2012', '07/01/2012', '08/01/2012', '09/01/2012', '10/01/2012'],
tickmarkPlacement: 'on',
gridLineWidth: 1,
tickPosition: 'inside',
min: 0,
minPadding: 0,
startOnTick: false
},
series: [{
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
marker: {
enabled: false
},
color: 'grey',
enableMouseTracking: false,
animation: false
}, {
data: [6, 6, 6, 7, 8, 7, 7, 8, 8.5, 9]
}, {
data: [5, 5, 5, 6, 6.5, 6, 6.5, 7.5, 8]
}, {
data: [4, 4, 4, 5, 5.5, 5.5, 6]
}, {
data: [2, 2.5, 2.5, 3.5, 4]
}, {
data: [1, 1.5, 2]
}, {
type: 'arearange',
data: [[0, 0, -5], [9.2, 9, -5]],
color: 'white',
fillOpacity: 1,
marker: {
enabled: false
},
zIndex: -1,
enableMouseTracking: false,
animation: false
}]
});
There is no such series type. However, you can make it with fake polygon series that will hide half of the chart. Check demo and code posted below.
Code:
Highcharts.chart('container', {
chart: {
height: 500,
width: 500,
events: {
load: function() {
var chart = this,
polygon = chart.series[2].group,
x = polygon.translateX,
y = polygon.translateY;
polygon.translate(x + 3, y + 3);
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
opposite: true,
gridLineWidth: 1,
gridLineColor: '#ddd',
tickInterval: 1,
maxPadding: 0,
lineWidth: 0,
max: 10,
min: 0
},
yAxis: {
maxPadding: 0,
tickInterval: 1,
gridLineColor: '#ddd',
max: 10,
min: 0
},
series: [{
name: 'Installation',
data: [8, 6, 7, 8, 7, 6]
}, {
name: 'Manufacturing',
data: [3, 2, 4, 4]
}, {
type: 'polygon',
animation: false,
showInLegend: false,
enableMouseTracking: false,
color: '#fff',
lineWidth: 10,
data: [
[0, 0],
[10, 0],
[10, 10]
]
}, {
type: 'line',
showInLegend: false,
enableMouseTracking: false,
data: [
[0, 0],
[10, 10]
],
color: '#ddd',
lineWidth: 1,
marker: {
enabled: false
}
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
Demo:
https://jsfiddle.net/BlackLabel/xL9taoym/1/
You can use Highcharts SVG Renderer to render triangle that covers half of the chart.
Check this demo: https://jsfiddle.net/BlackLabel/2boma9zs
events: {
load: function() {
var chart = this,
left = chart.plotLeft,
top = chart.plotTop,
width = chart.plotSizeX,
height = chart.plotSizeY;
chart.renderer.path([
'M', left + 1, top + height,
'L', left + width + 1, top,
left + width + 3, top,
left + width + 3, top + height + 3,
left + 1, top + height + 3,
left + 1, top + height
])
.attr({
fill: '#fff'
})
.add()
.toFront();
}
}
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
https://api.highcharts.com/class-reference/Highcharts.SVGElement#toFront
https://api.highcharts.com/highcharts/chart.events.load
I'm having an issue where the stackLabels do not show on my yAxis when reversed is enabled.
See fiddle; https://jsfiddle.net/mattscotty/vhv8p77v/2/
$(function () {
var chart = new Highcharts.chart( {
chart: {
renderTo :'container',
type: 'column'
},
title: {
text: 'Stacked bar chart'
},
exporting:{enabled:false},
credits:{enabled:false},
xAxis: {
type: 'datetime'
},
yAxis: {
min: 0,
max:100,
reversed:true, //Removing reversed fixes stack labels issue
title: {
text: null
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
plotOptions:{
column:{
stacking:'normal'
}
},
series: [{
name: 'Category I',
data: [
[Date.UTC(2014, 5, 14), 20],
[Date.UTC(2014, 5, 15), 30],
[Date.UTC(2014, 5, 16), 25],
[Date.UTC(2014, 5, 19), 10],
[Date.UTC(2014, 5, 20), 15]
]
}, {
name: 'Category II',
data: [
[Date.UTC(2014, 5, 14), 25],
//[Date.UTC(2014, 5, 15), 10],
[Date.UTC(2014, 5, 16), 35],
[Date.UTC(2014, 5, 19), 25],
[Date.UTC(2014, 5, 20), 5]
]
}, {
name: 'Category III',
data: [
[Date.UTC(2014, 5, 14), 10],
[Date.UTC(2014, 5, 15), 20],
[Date.UTC(2014, 5, 16), 35],
//[Date.UTC(2014, 5, 19), 25],
[Date.UTC(2014, 5, 20), 15]
]
}]
});
});
Remove 'reversed' from yAxis and you will see it works fine, does anyone have a work around or suggestion?
Thanks in advance.
I looked up the API documentation (see http://api.highcharts.com/highcharts#yAxis.stackLabels) and found something that may be useful for you.
Try adding verticalAlign: bottom to your stackLabels attribute. This will push your label to the inside bottom of your columns. If you wish, you can also add a value to y to move them directly under the column.
I'm curious why you're choosing to display your columns this way, as this presentation usually indicates negative value.
I hope this is helpful for you!
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
// verticalAlign puts the stack labels at the bottom
verticalAlign: 'bottom',
// the y value moves the label outside the stack;
// note that "15" or higher in your fiddle will push it off the chart altogether
y: 12
}
If you wish to have the labels still appear at the 0 mark for the axis you can either:
Pad the axis so that there is space in the plot area for the labels to be visible (JSFiddle):
yAxis: {
min: -10, // Now there is space in the plot area for the labels to show
// ...
}
Allow the stack labels to show outside the plot area by setting the crop value (JSFiddle):
yAxis: {
stackLabels: {
crop: false, // Now the labels ignore being outside the plot area
// ...
}
}
If you want them to appear at the top of the columns I suggest the verticalAlign and y approach detailed by #brightmatrix.
I need my yaxis in highcharts to always start on 1, not 0. My data sets are whole numbers with 1 being the lowest, i've tried everything combination on min, minrange startontick, that I could think of. The only way I was able to get the yaxis to show 1 instead of zero is with the snippet below. I basically hid the 0, then set a custom label for that plot band giving it a label of 1. Is this the only way?
yAxis: {
min:1,
showFirstLabel: false,
allowDecimals : false,
reversed: true,
plotBands: [{
color: '#EBFAEB',
from: 0,
to: 10,
label: {
text: '1',
style: {
color: '#000000',
},
align: 'left',
verticalAlign: 'top',
y: 0,
x: -15
}
}],
Sample data i'm using
series: [{
name: 'Tokyo',
data: [7, 6, 9, 14, 18, 21, 25, 26, 23, 18, 13, 9]
}, {
name: 'New York',
data: [13, 2, 1, 11, 17, 22, 24, 24, 20, 14, 8, 2]
}, {
name: 'Berlin',
data: [1, 3, 3, 8, 13, 17, 18, 17, 14, 9, 3, 1]
}, {
name: 'London',
data: [3, 4, 5, 8, 11, 15, 17, 16, 14, 10, 6, 4]
}]
It's probably because your tickInterval scales to something such that it wont' start at 0. min:1 should work if you give it an appropriate tickInterval.
Alternatively min:1 combined with startOnTick: false should also work.
EDIT:
I just tried the following combination myself and it works for me. If you tried this before and it didn't work for you then the issue is probably that you the proper case for the different options:
min: 1,
startOnTick: false,
tickInterval: 10
see: http://jsfiddle.net/Reality_Extractor/kTmqg/
Have you tried to use tickPositioner?
http://api.highcharts.com/highstock#yAxis.tickPositioner