Related
I have already made a custom graph using highchart. But it doesn't look same with design.
this is chart that i already custom
this is design that what i want
this is my code that i build using vue js,
<template>
<div>
<div class="card">
<Highcharts :options="options" />
<!--<Highstock :options="options" />
<Highmaps :options="options" />
<HighchartsGantt :options="options" />-->
</div>
</div>
</template>
<script>
import Datepicker from 'vuejs-datepicker';
import moment from 'moment';
import Highcharts from 'highcharts';
import loadMap from 'highcharts/modules/map.js';
import { genComponent } from 'vue-highcharts';
loadMap(Highcharts);
export default {
name: "SummarySproutComponent",
data: function() {
return {
}
},
created() {
this.getOption()
},
components: {
Highcharts: genComponent('Highcharts', Highcharts),
Highmaps: genComponent('Highmaps', Highcharts)
},
methods: {
getOption(){
let color = {
'38,5': 'red',
'39': 'green',
'39,4': 'blue'
}
let dataColor = [
{
'name':'halo',
'value': '39,5',
'floatValue': 3.5
},
{
'name':'halo',
'value': '39,77',
'floatValue': 4
},
{
'name':'halo',
'value': '40',
'floatValue': 5
}
]
let dataPlotlines = []
for(let i=0;i<dataColor.length;i++){
let dataPlotlinesLoop = {
color: '#FF0000',
width: 2,
value: dataColor[i].floatValue,
zIndex: 1.67,
label: {
// text: 'Plot line',
formatter: function () {
return '<span>'+dataColor[i].value+'</span></br><img style="width:100px" src="https://img2.pngdownload.id/20180422/lpe/kisspng-microsoft-word-template-document-clip-art-61-clipart-5adce2aaedf920.7563442215244253869748.jpg" />';
},
verticalAlign: 'top',
align: 'right',
x: 15,
rotation: 0
}
}
dataPlotlines.push(dataPlotlinesLoop)
}
let colors = Highcharts.getOptions().colors
let optionStatic = {
chart: {
styledMode: true,
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo',
align: 'left'
},
subtitle: {
text: 'Source: WorldClimate.com',
align: 'left'
},
xAxis: [
{
categories: ['38,5', '39', '39,4', '39,5', '39,6', '39,77', '39,9', '40', '40,2', '40,4', '40,5', '41'],
plotLines:
dataPlotlines
,
labels: {
formatter () {
return `<span style="color: ${color[this.value]}">${this.value}</span>`
}
}
}
],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true,
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
},],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || // theme
'rgba(255,255,255,0.25)'
},
plotOptions: {
spline: {
// lineWidth: 4,
marker: {
enabled: false
}
},
plotLines:{
dataLabels: {
enabled: true,
color: '#000000',
}
}
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [0,0,0,1,2,6,2.5,1.8,0,0,0,0],
tooltip: {
valueSuffix: ' mm'
}
},
{
name: 'Temperature',
type: 'areaspline',
data: [0,10,40,80],
tooltip: {
valueSuffix: ' °C'
},
marker: {
enabled: false
},
},
{
name: 'Temperature',
type: 'spline',
// type: 'areaspline',
data: [0,10,40,80,150,280,150,80,40,10,0,0],
tooltip: {
valueSuffix: ' °C'
},
marker: {
enabled: false
}
}
],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
floating: false,
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 0
},
yAxis: [{
labels: {
align: 'right',
x: 0,
y: -6
},
showLastLabel: false
}, {
labels: {
align: 'left',
x: 0,
y: -6
},
showLastLabel: false
}, {
visible: false
}]
}
}]
}
}
this.options = optionStatic
},
genComponent(name, Highcharts) {}
}
}
</script>
This is my first try making custom chart using highchart with a difficult pattern. I have already tried my best to make that design match with required one. I am still learning javascript and css (with the framework(vue)). I request someone to please help me to solve that problem.
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
can you have a separate legend for each yAxis when they are split in highstock? I'm using a stacked bar chart with the same data series running on both yAxes and this is duplicated in the legend at the top which isn't ideal - can the legend be split in two with the second one placed lower down above the second yAxis?
If anyone can advise on the config below please I would be really grateful - i've attached a screengrab so you can see how it currently looks - i'd like the 2nd green 'direct consumption' + 'Charge' + 'export' on the lower legend.
Many thanks.
// Highstock split stacked column chart
Highstock.setOptions({
colors: ['#FB654B', '#FFBE6B', '#2FC099', '#2FC099', '#FF8954', '#FCEA6E']
});
Highstock.stockChart('container2', {
chart: {
type: 'column'
},
title: {
text: 'Energy Balance History'
},
xAxis: {
type: 'datetime'
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'top',
enabled: true,
x: 0,
y: 50
},
navigator: {
height: 30,
series: {
data: <%- JSON.stringify(solarValuesDays) %>
}
},
rangeSelector: {
buttons: [{
type: 'week',
count: 1,
text: '1w'
}, {
type: 'week',
count: 2,
text: '2w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: true, // it supports only days
selected: 1 // month
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
min: 0,
title: {
text: 'Consumption Energy (kWh)'
},
height: '50%',
// linkedTo: 1,
lineWidth: 2,
stackLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.total,2);
},
// allowOverlap: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},{
labels: {
align: 'right',
x: -3
},
min: 0,
title: {
text: 'Generation Energy (kWh)'
},
top: '53%',
height: '50%',
linkedTo: 0,
lineWidth: 2,
offset: 0,
// linkedTo: 0,
stackLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.total,2);
},
// allowOverlap: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
}],
tooltip: {
// headerFormat: '<b>Consumption Total: {point.stackTotal}</b><br/><b>Generation Total: {point.stackTotal[1]}</b><br/>',
pointFormat: '{series.name}: {point.y:.2f}'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Import',
yAxis: 0,
data: <%= JSON.stringify(importValuesDays) %>
}, {
name: 'Discharge',
yAxis: 0,
data: <%=JSON.stringify(dischargeValuesDays) %>,
}, {
name: 'Direct Consumption',
yAxis: 0,
data: <%= JSON.stringify(dirConsumptionValuesDays) %>
}, {
name: 'Direct Consumption',
yAxis: 1,
data: <%= JSON.stringify(dirConsumptionValuesDays) %>
}, {
name: 'Charge',
yAxis: 1,
data: <%=JSON.stringify(chargeValuesDays) %>
}, {
name: 'Export',
yAxis: 1,
data: <%= JSON.stringify(exportValuesDays) %>
}]
});
By default legend can not be splitted, but you can use custom code to reposition legend items:
var H = Highcharts;
H.wrap(H.Legend.prototype, 'positionItems', function(proceed) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
var items = this.allItems;
items.forEach(function(item, i) {
if (i > 1) {
item.legendGroup.attr({
translateY: 215,
translateX: item.legendGroup.translateX - this.legendWidth / 4
});
} else {
item.legendGroup.attr({
translateX: item.legendGroup.translateX + this.legendWidth / 4
});
}
}, this);
});
Live demo: https://jsfiddle.net/BlackLabel/dq0wefL3/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
Hi there I would like to draw a chart with a three lines in Highchart. Two of them can shows results as shown in the data [4.12,3.34,5.45] / [3.45,5.45,3.23] but the third line should be visibe without any comma. Resuls should be like [7,4,2]
code:
$(function () {
$('#container').highcharts({
title: {
text: '',
x: -20 //center
},
colors: ['blue', 'red'],
plotOptions: {
line: {
lineWidth: 3
},
tooltip: {
hideDelay: 200
}
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: [
''
]
},
yAxis: [{
min: 0,
title: {
text: ''
}
}, {
title: {
text: ''
},
opposite: true
}],
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y:.0f} h</b><br/>',
valueSuffix: ' h',
crosshairs: true,
shared: true
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 1
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y,2);
}
},
enableMouseTracking: true
}
},
series: [{
name: '1',
color: 'rgba(51, 204, 204, 0.75)',
lineWidth: 2,
data: [4.12,3.34,5.45]
}, {
name: '2',
color: 'rgba(255, 77, 77,0.75)',
marker: {
radius: 6
},
data: [3.45,5.45,3.23]
},{
name: '3',
color:'#bfbfbf',
marker: {
radius: 6
},
data: [7.34,4.23,1.78]
}]
});
});
http://jsfiddle.net/bmv5e8v7/3/
Can you guys help in this?
In addition to what #BarbaraLaird wrote, you can also define format of data labels for only one series, like this:
dataLabels: {
format: '{y:.0f}'
}
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.format
Example:
http://jsfiddle.net/ozvgfkj0/
You can add a conditional to your dataLabels formatter function:
dataLabels: {
enabled: true,
formatter: function() {
if (this.series.name == '3')
return Highcharts.numberFormat(this.y, 0);
else
return Highcharts.numberFormat(this.y, 2);
}
},
http://jsfiddle.net/blaird/bmv5e8v7/4/
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';
}
},