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
Related
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
I have trouble with performance of my highstock. All works, but time of plotting of my data is too slow, about 30 seconds. JSON is about 30000 points. Maybe problem in how I draw this data ? I already turn off animation, shadow, marks etc.
And here is my JS code:
$(function() {
Highcharts.setOptions({
global: {
useUTC: false,
timezoneOffset: - 3 * 60
}
});
function requestData() {
$.ajax({
url: 'values.php',
success: function(series) {
chart.addSeries({name: 'Temp1', data: series[0], yAxis:0}, false);
chart.addSeries({name: 'Temp2', data: series[1], yAxis:0}, false);
chart.redraw();
},
cache: false
});
}
chart = new Highcharts.StockChart({
chart: {
animation: false,
zoomType: 'xy',
renderTo: 'container',
events: {
load: requestData
}
},
title: {
text: 'Temperatures from DS18B20',
x: -20
},
plotOptions: {
spline: {
turboThreshold: 50000
}
},
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 10,
text: '10min'
}, {
type: 'minute',
count: 30,
text: '30min'
}, {
type: 'all',
text: 'all'
}],
buttonTheme: {
width:60
},
selected: 2
},
xAxis: {
type: 'datetime',
categories: true,
ordinal: false,
// tickInterval: 100*3600,
minTickInterval:100000,
labels: {
align: 'center',
formatter:function(){
return Highcharts.dateFormat('%H:%M:%S',this.value);
}
}
},
yAxis: {
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[0]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: false
},
legend: {
enabled: true,
align: 'right',
backgroundColor: '#DBFFDB',
borderColor: 'black',
borderWidth: 2,
layout: 'vertical',
verticalAlign: 'top',
y: 200,
shadow: true
},
tooltip: {
shared: true
},
series: []
});
});
I have a Highchart in my web application. In the browser it displays normally which is as follows:
But when I export the chart it flips the axis and I end up with the following image:
Following are the options I am using for my Highchart.
var options = ({
chart: {
renderTo: 'chartDiv'
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
tickInterval: 7200 * 10000,
allowDecimals:false,
labels: {
format: '{value}',
rotation: 30,
align: 'left',
},
title: {
text: 'Date'
}
},
yAxis: [{
title: {
text: 'No. of rings'
},
min: 0
},
{ // Secondary yAxis
gridLineWidth: 0,
min: 0,
title: {
text: 'Accumulative Rings',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} Ring',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true,
}
],
tooltip: {
shared: true
},
legend: { backgroundColor: 'rgba(211,223,181,0.6)', layout: 'vertical', align: 'left', verticalAlign: 'top', floating: true, borderWidth: 0, x: 70 },
plotOptions: {
spline: {
marker: {
enabled: false
},
}
}
});
I have three series in my chart, the bar chart can have 0 values.
The data is coming from an ajax service, which I put in an array and then add to chart as follows:
chart.addSeries({
type: 'bar',
name: 'Rings per day ',
data: barData,
pointInterval: mainInterval
});
chart.addSeries({
type: 'spline',
name: 'Accumilative rings ',
data: spline1Data,
yAxis: 1,
});
chart.addSeries({
type: 'spline',
name: 'Planned Progress ',
data: spline2Data,
yAxis: 1,
color: "#FF0000"
});
What's wrong with my chart?
bar series is the key part. bar series forces chart to be rendered flipped. In your case use column. It displays differently on your browser because, most probably, you have an old version of Highcharts.
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.
Kindly take a look at following fiddle in which i tried to remove the categories but on removing categories its placing numbers instead of it by default and also showing those numbers in tooltip.
All I am trying to do is that categories or numbers doesnot display on chart or on tooltip and only stackedbar appears on the chart , So kindly let me know how can i do it .Thanks,
http://jsfiddle.net/EJFsH/3/
$(function () {
var data = [ {
name: 'Year 2008',
data: [0, 914, 4054, 732, 34]
}];
data = $.grep(data, function (category) {
return $.grep(category.data, function (item) {
return item > 0;
}).length > 0;
});
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: data
});
});
I'm not 100% sure of what you are asking for. But, to turn off the XAxis or yAxis labels, juse labels : {enabled:false} and to change the tooltips use tooltip:{formatter: function() {...}}
see this fiddle:
http://jsfiddle.net/6ypq4/
xAxis: {
title: {
text: null
},
labels : {
enabled: false
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify',
enabled: false
}
},
tooltip: {
formatter: function() {
return this.y + ' millions';
}
},