I have a waterfall chart working, but I need that penultimate column start at zero.
I think I need to create a dummy point that hide and set Axis.min on the second point y position, but I can't put this working.
chart: {
type: 'waterfall'
},
title: {
text: ''
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
//colors: ['#DADBDF', '#ED4D5F','#ED4D5F','#ED4D5F','#ED4D5F','#ED4D5F','#D7EAFD','#D7EAFD','#D7EAFD' ],
xAxis: {
lineColor: '#FFFFFF',
lineWidth: 0,
gridLineColor: '#DADBDF',
categories: [],
},
yAxis: {
lineColor: '#FFFFFF',
lineWidth: 0,
gridLineColor: '#DADBDF',
plotBands: [{
color: '#000000',
from: 0,
to: 0
}],
title: {
text: ''
},
},
legend: {
enabled: false
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
color: '#000000'
},
colorByPoint: true,
pointWidth: 150
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
},
turboThreshold: 0,
label: {
enabled: false
}
}
},
series: [{
data: [],
showInLegend: false,
}],
You can add another waterfall series with defined x values:
Highcharts.chart('container', {
chart: {
type: 'waterfall'
},
...,
plotOptions: {
series: {
grouping: false
}
},
series: [{
data: [...]
}, {
data: [{
y: 569000,
x: 5
}, {
y: 1569000,
x: 6
}]
}]
});
Live example: https://jsfiddle.net/BlackLabel/qc07y5kf/
API Reference: https://api.highcharts.com/highcharts/series.waterfall.data
Related
I have code from this post. I want to populate the chart on click of a button instead of initializing it and provide only 3 values e.g.22286,12286,9286 ( these values would be dynamic) and plot the chart with the same appearance (i.e. 3 colors chart) as of the snippet
Highcharts.chart('container', {
colors: ['#762232', '#EFCA32', '#007788'],
title: {
text: '',
},
chart: {
type: 'area',
backgroundColor: null,
// spacingRight: 5,
spacingTop: 5,
spacingBottom: 5,
style: {
fontFamily: 'Arial, sans-serif',
},
plotBorderWidth: 1,
plotBorderColor: '#ccc',
},
xAxis: {
gridZIndex: 4,
gridLineWidth: 1,
tickInterval: 1,
tickWidth: 0,
alignTicks: true,
gridLineColor: '#762232',
minPadding: 0,
maxPadding: 0,
title: {
text: 'Years Invested',
},
labels: {
enabled: true,
},
},
yAxis: {
gridLineWidth: 0,
opposite: true,
title: {
text: 'Hypothetical Value',
},
showFirstLabel: false,
showLastLabel: false,
tickPositioner: function() {
var prevTickPos = this.tickPositions,
tickPositions = [prevTickPos[0], prevTickPos[prevTickPos.length - 1]],
series = this.chart.series;
series.forEach(function(s) {
tickPositions.push(s.processedYData[s.processedYData.length - 1]);
});
tickPositions.sort(function(a, b) {
return a - b;
});
return tickPositions;
},
labels: {
enabled: true,
align: "right",
reserveSpace: true,
},
},
tooltip: {
enabled: !1,
},
plotOptions: {
area: {
pointStart: 0,
stacking: false,
lineColor: '#762232',
lineWidth: 1,
fillOpacity: 1,
dataLabels: {
crop: !1,
color: '#762232',
align: 'right',
y: 5,
},
marker: {
enabled: !1,
symbol: 'circle',
radius: 1,
states: {
hover: {
enabled: !1,
},
},
},
},
},
series: [{
data: [4457, 13371, 22286]
}, {
data: [2457, 9371, 12286]
}, {
data: [1457, 5371, 9286]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<button>Populate Chart</button>
All you need to do is to create series with empty data array and use chart.update method to add data. Example:
var chart = Highcharts.chart('container', {
...,
series: [{
data: []
}, {
data: []
}, {
data: []
}]
});
document.getElementById('chartInit').addEventListener('click', function(){
chart.update({
series: [{
data: [4457, 13371, 22286]
}, {
data: [2457, 9371, 12286]
}, {
data: [1457, 5371, 9286]
}]
});
});
Live demo: https://jsfiddle.net/BlackLabel/8pL6hr3w/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#update
We are using Highcharts for the graphs in a dashboard web app. We are craeting the graph objects in javaScript. Most of the graphs share similar options. E.g. one graph is created by something like this:
Highcharts.chart('boiler-temp', {
chart: {
type: 'spline'
},
title: {
text: 'Boiler temperatures'
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
},
yAxis: [{
title: {
text: 'Inner temperature'
}
}, {
title: {
text: 'Outer temperature',
},
opposite: true,
min: 0,
max: 100
}],
data: {
rowsURL: dataUrl,
},
series: [{
yAxis: 0,
}, {
yAxis: 1,
}],
plotOptions: {
series: {
connectNulls: true
}
},
exporting: {
fallbackToExportServer: false
}
}
Another graph is created very similarly like this:
Highcharts.chart('boiler-temp', {
chart: {
type: 'spline'
},
title: {
text: 'Boiler pressure'
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
},
yAxis: [{
title: {
text: 'Inner pressure'
}
}, {
title: {
text: 'Outer outer pressure',
},
opposite: true,
min: 0,
max: 100
}],
data: {
rowsURL: dataUrl,
},
series: [{
yAxis: 0,
}, {
yAxis: 1,
}],
plotOptions: {
series: {
connectNulls: true
}
},
exporting: {
fallbackToExportServer: false
}
}
For maintainability I would like to define a default set of options as
{
chart: {
type: 'spline'
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
},
yAxis: [{
}, {
opposite: true,
min: 0,
max: 100
}],
series: [{
yAxis: 0,
}, {
yAxis: 1,
}],
plotOptions: {
series: {
connectNulls: true
}
},
exporting: {
fallbackToExportServer: false
}
}
and then, when I instantiate a graph, overwrite what changes. Is there a way to do this with Highcharts/JavaScript?
It can be done using Highcharts global options - set of options to all charts on the same page.
Highcharts.setOptions({
chart: {
type: 'spline'
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
},
yAxis: [{}, {
opposite: true,
min: 0,
max: 100
}],
series: [{
yAxis: 0,
}, {
yAxis: 1,
}],
plotOptions: {
series: {
connectNulls: true
}
},
exporting: {
fallbackToExportServer: false
}
});
Demo:
https://jsfiddle.net/BlackLabel/ugsfoyeh/
Docs:
https://www.highcharts.com/docs/getting-started/how-to-set-options#2
Another approach is to create a defaultOptions somewhere in your app and merge them with chart options using eg. Highcharts.merge().
const defualtData = {
chart: {
type: 'spline'
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
},
yAxis: [{}, {
opposite: true,
min: 0,
max: 100
}],
series: [{
yAxis: 0,
}, {
yAxis: 1,
}],
plotOptions: {
series: {
connectNulls: true
}
},
exporting: {
fallbackToExportServer: false
}
};
Highcharts.chart('boiler-temp1', Highcharts.merge(defualtData, {
title: {
text: 'Boiler temperatures'
}
}));
Demo:
https://jsfiddle.net/BlackLabel/5epm4hqc/
API reference:
https://api.highcharts.com/class-reference/Highcharts#.merge
I used the opposite attribute to move the xAxis to the right. How is it possible that the bars will also start on the right side?
Thanks!
Highcharts.chart('absoluteInterruptions', {
chart: {
type: 'bar',
rotate: -90
},
title: {
text: 'Absolute Interruptions'
},
xAxis: {
min: 0,
opposite: true,
categories: [
'Linie5007',
'Linie5007.ST405',
'Linie5007.ST406',
'Linie5007.ST407',
'Linie5007.ST408',
'Linie5007.ST409',
'Linie5007.ST410',
'Linie5007.ST411',
'Linie5007.ST412',
'Linie5007.ST413'
]
},
yAxis: {
legend: {
enabled: false
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
align: 'right',
name: 'Interruptions',
data: [19, 2, 2, 2, 1, 1, 1, 1, 1, 1],
dataLabels: {
enabled: true,
align: 'right',
color: '#000000'
}
}]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id='absoluteInterruptions'></div>
Found this from the documentation and managed to get it to work by setting
yAxis:{reversed:true}
By reversing the y-axis the bars go from right to left.
Highcharts.chart('absoluteInterruptions', {
chart: {
type: 'bar',
rotate: -90
},
title: {
text: 'Absolute Interruptions'
},
xAxis: {
min: 0,
opposite: true,
categories: [
'Linie5007',
'Linie5007.ST405',
'Linie5007.ST406',
'Linie5007.ST407',
'Linie5007.ST408',
'Linie5007.ST409',
'Linie5007.ST410',
'Linie5007.ST411',
'Linie5007.ST412',
'Linie5007.ST413'
]
},
yAxis: {
reversed: true,
legend: {
enabled: false
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
align: 'right',
name: 'Interruptions',
data: [19, 2, 2, 2, 1, 1, 1, 1, 1, 1],
dataLabels: {
enabled: true,
align: 'right',
color: '#000000'
}
}]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id='absoluteInterruptions'></div>
i made a bar stacked chart using highcharts and i want the legend to be on top, i used the attribute verticalAlign with the value top but it didn't work !
here is my jsfiddle http://jsfiddle.net/rchod/sbtt6/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
legend: {
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
labels: {
enabled: false
},
categories: ['']
},
yAxis: {
labels: {
enabled: true
},
min: 0,
title: {
text: ''
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
minPointLength: 3,
dataLabels: {
color: 'white',
align: 'center',
enabled: true,
format: '{y} %'
},
stacking: 'percent'
},
bar: {
events: {
legendItemClick: function () {
vote(1,this.userOptions.id);
return false;
}
}
,
showInLegend: true
}
},
series: [
{
name: 'yes',
data: [{ y : 73.91, id : '1' }],
id: '1'
},
{
name: 'no',
data: [{ y : 26.09, id : '2' }],
id: '2'
},
]
});
});
You have the legend property twice in your options. The 2nd one is overriding the first. Put them together:
legend: {
backgroundColor: '#FFFFFF',
reversed: true,
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100
},
Updated fiddle.
How can I limit showing ticks on X axis in Highcharts? The last one is outter of X axis:
My source:
var options = {
chart: {
renderTo: 'chart',
events: {
load: function(event) {
}
},
type: 'spline',
animation: false
},
title: {
text: ''
},
colors: [
'#499878','black'
],
rangeSelector: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true,
crosshairs: true
},
series: [{
name: 'Temperature (°C)',
type: 'spline',
tooltip : {
valueDecimals: 2,
valueSuffix: ' °C'
},
yAxis: 0,
color: '#89A54E',
data: []
},{
name: 'Wind speed (m/s)',
type: 'spline',
tooltip : {
valueDecimals: 2,
valueSuffix: ' m/s'
},
yAxis: 1,
color: '#4572A7',
data: []
},{
name: 'Humidity (%)',
type: 'spline',
tooltip : {
valueDecimals: 2,
valueSuffix: ' %'
},
yAxis: 2,
color: '#910000',
data: []
},{
name: 'Wind direction (°)',
type: 'spline',
tooltip : {
valueDecimals: 2,
valueSuffix: ' °'
},
yAxis: 3,
color: '#000000',
dashStyle: 'shortdot',
data: []
}],
xAxis: {
type: 'datetime',
tickInterval: 10000,
min: 0,
max: 0
},
yAxis: [{
labels: {
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
},
gridLineWidth: 1,
opposite: true
},{
labels: {
formatter: function() {
return this.value +' m/s';
},
style: {
color: '#4572A7'
}
},
title: {
text: 'Wind speed',
style: {
color: '#4572A7'
}
},
gridLineWidth: 1,
opposite: false,
min: 0
},{
labels: {
formatter: function() {
return this.value +' %';
},
style: {
color: '#910000'
}
},
title: {
text: 'Humidity',
style: {
color: '#910000'
}
},
gridLineWidth: 1,
opposite: true
},{
labels: {
formatter: function() {
return this.value +' °';
},
style: {
color: '#000000'
}
},
title: {
text: 'Wind direction',
style: {
color: '#000000'
}
},
opposite: false,
reversed: true,
min: 0,
max: 360,
minorGridLineDashStyle: 'longdash',
minorTickInterval: 'auto',
minorTickWidth: 0,
tickInterval: 90
}],
plotOptions: {
spline: {
lineWidth: 3,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
}
},
scatter: {
marker: {
enabled: true
}
}
}
};
I found out it's matter of oveflow: 'justify'. jsfiddle
What happens if you use 'spacingRight' (http://api.highcharts.com/highcharts#chart.spacingRight) as below:
chart: {
renderTo: 'chart',
events: {
load: function(event) {
}
},
type: 'spline',
animation: false,
spacingRight: 100 // you may change this for testing...
},