Related
Codepen: https://codepen.io/Lothain/pen/GRjBOyw
chart: {
type: 'column'
},
title: {
text: 'Job Billings By Month'
},
xAxis: {
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec',]
},
yAxis: {
min: 0,
title: {
text: 'Cost in USD'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
},
area: {
marker: {
enabled: false
},
lineColor: 'rgb(205,70,43)',
fillColor: 'rgb(240,198,189)'
}
},
series: [{
name: 'T&M',
data: [5, 3, 4, 7, 2, 4, 2, 5, 2, 8, 11, 3],
color: 'rgb(208,224,227)'
}, {
name: 'Workorder',
data: [2, 2, 3, 2, 1, 3, 4, 4, 2, 5, 4, 2],
color: 'rgb(207,226,243)'
}, {
name: 'Change Order',
data: [3, 4, 4, 2, 5, 4, 2, 5, 2, 8, 8, 2],
color: 'rgb(201,218,248)'
}, {
name: 'Main Contract',
data: [3, 4, 4, 2, 5, 2, 8, 11, 3, 4, 8, 3],
color: 'rgb(164,194,244)'
}, {
name: 'Projected Billed',
type: 'line',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
color: 'rgb(255,109,1)'
}, {
name: 'Cost',
type: 'area',
step: 'center',
color: 'red',
opacity: .5,
data: [4,4, 5, 3, 1, 4, 7, 5, 3, 2, 5, 9]
}]
});
Goal: https://imgur.com/a/Vo7ORj7
I would like the step-area series to extend to the edges of the x-axis, rather than end in the middle of the column they overlap. I'm sure this is possible but I do not know how; I have tried using the series.type.area.step option (center, left, right) to no avail.
You can add one more area series with the same data as the current one, but also with the below options:
series: [..., {
name: 'Cost',
type: 'area',
step: 'center',
color: 'red',
lineWidth: 0,
zIndex: -1,
data: [4000, 4000, 5000, 3000, 1000, 4000, 7000, 5000, 3000, 2000, 5000, 9000]
}, {
linkedTo: ':previous',
stacking: false,
type: 'area',
step: 'center',
color: 'red',
fillColor: 'transparent',
data: [4000, 4000, 5000, 3000, 1000, 4000, 7000, 5000, 3000, 2000, 5000, 9000]
}]
Live demo: http://jsfiddle.net/BlackLabel/m6gsrn8o/
API Reference: https://api.highcharts.com/highcharts/series.area
I have an x-range highchart which is used to display an event timeline. I was able to make it work for events which has start and end date. But I have events that are not yet ended and for those I need to extend the data point of the chart without stopping like below. Green event hasn't finished yet.
Following is my existing code:
Highcharts.chart('container', {
chart: {
type: 'xrange',
height: 100
},
title: {
text: ''
},
xAxis: {
visible: true,
tickLength: 0,
lineWidth: 6,
lineColor: '#000',
labels: {
enabled: false
}
},
yAxis: {
visible: false
},
legend: {
enabled: false
},
series: [{
name: '',
borderRadius: 0,
pointPadding: 0,
borderWidth: 6,
groupPadding: 0,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
color: 'transparent',
borderColor: 'rgba(230, 141, 11, 0.5)'
}, {
x: Date.UTC(2014, 10, 26),
x2: Date.UTC(2014, 11, 5),
y: 0,
color: 'transparent',
borderColor: 'rgba(228, 53, 70, 0.5)'
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 10),
y: 0,
color: 'transparent',
borderColor: 'rgba(40, 167, 69, 0.5)'
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 12),
y: 0,
color: 'transparent',
borderColor: 'rgba(40, 147, 164, 0.5)'
}],
dataLabels: {
enabled: false
}
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<div id="container"></div>
I tried putting Date.UTC(0, 0, 0) for the x2 but it didn't work as expected. Is this possible with xrange charts in highcharts. Thanks in advance!
You can set the x2 value to a later date than xAxis.max:
xAxis: {
...,
max: Date.UTC(2014, 11, 5)
},
...,
series: [{
data: [{
x: Date.UTC(2014, 10, 26),
x2: Date.UTC(2014, 11, 15),
...
}],
...
}]
Live demo: http://jsfiddle.net/BlackLabel/9f6Lejbs/
API Reference: https://api.highcharts.com/highcharts/xAxis.max
I want to implement the scrollbar in highcharts, not highstock because it will cost additional money for my company (just for a scrollbar, does not make sense). I have tried this but apparently does not help me:
How to enable highcharts x and y axis scrollbars? .
There are some examples here:
http://jsfiddle.net/fj6d2/3076/
https://www.highcharts.com/blog/news/224-scrollbars-for-any-axis/
but with highstock, I want to do the same thing with Highchart.
From what I have found out Highcharts does not support scrollbars. If I just insert use overflow: scroll on a wrapped div of the chart, that would still make my title center in the middle of a long div and also the y axis will be hidden when I go to the right of that long div.
Is there any way to have ScrollBar with the above things on a highchart (NOT HIGHSTOCK) ?
Here is my option
let options = {
legend: {
itemStyle: {
fontWeight: 'bold',
fontSize: '13px'
},
// width: 780,
itemWidth: 130,
floating: false
},
xAxis: {
position: {align: 'left'},
text: null,
}, // ,
// tickLength: 0
type: 'category',
categories: categories,
min: 0// ,
// max: 10
},
navigator: {
enabled: false
},
scrollbar: {
enabled: true,
showFull: false,
barBackgroundColor: 'rgb(44,89,142)',
barBorderRadius: 0,
barBorderWidth: 0,
buttonBackgroundColor: 'rgb(44,89,142)',
buttonBorderWidth: 0,
buttonArrowColor: 'white'
},
yAxis: {
// minorTickInterval: 'auto',
title: {
/* style: {
textTransform: 'uppercase'
}*/
}, // ,
min: 0,
// max: 20,
},
// General
background: '#FFFFFF',
chart: {
height: 500,
width: 3900,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'column',
backgroundColor: '#FFFFFF',
style: {
fontFamily: 'Lucida Grande, Lucida Sans Unicode, Arial, Helvetica,
sans-serif'
},
borderColor: '#ACB2BC',
borderWidth: 1,
events: { load: function fn() { console.log(this); /* this.width(800);
*/ } } // #container
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
candlestick: {
lineColor: '#404048'
},
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white'
}
},
allowPointSelect: true,
cursor: 'pointer',
data: values,
showInLegend: true
}
},
series: [{
name: 'reports',
data: values
}],
credits: {
enabled: false
}
};
I am using React. I just pass the options to a Highcharts.
this.chart = new Highcharts['Chart'](
this.refs.chart,
this.props.options);
chart.scrollablePlotArea
Since Highcharts v7.1.2, a scrollable plot area can be defined for either horizontal or vertical scrolling, depending on whether the minWidth or minHeight option is set. This does NOT require Highcharts Stock (aka Highstock) to be used.
A demo from the API reference is here and below:
Highcharts.chart('container', {
chart: {
type: 'spline',
scrollablePlotArea: {
minWidth: 700,
scrollPositionX: 1
}
},
title: {
text: 'Scrollable plot area'
},
subtitle: {
text: 'Open on mobile and scroll sideways'
},
xAxis: {
type: 'datetime',
labels: {
overflow: 'justify'
}
},
yAxis: {
tickWidth: 1,
title: {
text: 'Wind speed (m/s)'
},
lineWidth: 1,
opposite: true
},
tooltip: {
valueSuffix: ' m/s',
split: true
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
},
pointInterval: 3600000, // one hour
pointStart: Date.UTC(2015, 4, 31, 0, 0, 0)
}
},
series: [{
name: 'Hestavollane',
data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6,
5.5, 6.2, 5.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1,
5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7,
9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
}, {
name: 'Vik',
data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2,
0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2,
0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2,
0.7, 1.3, 0.4, 0.3]
}]
});
#container {
max-width: 800px;
min-width: 320px;
height: 400px;
width: 400px;
}
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
http://jsfiddle.net/leongaban/gbqvv0y9/
I've tried to edit the dateTimeLabelFormats key to have the chart use the much more readable Standard time, however no results...
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Wind speed during two days'
},
subtitle: {
text: 'May 31 and and June 1, 2015 at two locations in Vik i Sogn, Norway'
},
xAxis:[{
dateTimeLabelFormats: {
hour: '%H:%M'
},
type: 'datetime',
labels: {
overflow: 'justify'
}
}],
yAxis: {
title: {
text: 'Wind speed (m/s)'
},
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{ // Light air
from: 0.3,
to: 1.5,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'Light air',
style: {
color: '#606060'
}
}
}, { // Light breeze
from: 1.5,
to: 3.3,
color: 'rgba(0, 0, 0, 0)',
label: {
text: 'Light breeze',
style: {
color: '#606060'
}
}
}, { // Gentle breeze
from: 3.3,
to: 5.5,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'Gentle breeze',
style: {
color: '#606060'
}
}
}, { // Moderate breeze
from: 5.5,
to: 8,
color: 'rgba(0, 0, 0, 0)',
label: {
text: 'Moderate breeze',
style: {
color: '#606060'
}
}
}, { // Fresh breeze
from: 8,
to: 11,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'Fresh breeze',
style: {
color: '#606060'
}
}
}, { // Strong breeze
from: 11,
to: 14,
color: 'rgba(0, 0, 0, 0)',
label: {
text: 'Strong breeze',
style: {
color: '#606060'
}
}
}, { // High wind
from: 14,
to: 15,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'High wind',
style: {
color: '#606060'
}
}
}]
},
tooltip: {
valueSuffix: ' m/s'
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
},
pointInterval: 3600000, // one hour
pointStart: Date.UTC(2015, 4, 31, 0, 0, 0)
}
},
series: [{
name: 'Hestavollane',
data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
}, {
name: 'Vik',
data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
}],
navigation: {
menuItemStyle: {
fontSize: '10px'
}
}
});
});
Change hour: '%H:%M' to hour: '%I:%M %P'. Here is the updated fiddle.
For more formats refer - http://php.net/manual/en/function.strftime.php
Just figured it out! How to get highcharts dates in the x axis?
dateTimeLabelFormats: {
hour: '%I:%p'
}
Update! This is the new way to swap Military time to Standard time:
dateTimeLabelFormats : {
hour: '%I %p',
minute: '%I:%M %p'
}
I'm wondering if anyone has successfully implemented a responsive design using Highcharts to make their charts look good on both mobile and desktop.
By default, Highcharts do re-scale when you resize the browser screen its just that the X-axis get cluttered by the tick mark text and bar graphs look tall and too skinny (too compressed).
To get a sense of what I mean, you can go to this page and resize the browser.
I think these issues could possibly be addressed by reducing the amount of data points say to 1/3 of the original number though I'm wondering how that would be accomplished programmatically using Highcharts's API. If that doesn't sound like a good idea I'm also interested in other thoughts or solutions people might have come up with to use Highcharts on mobile (or perhaps even different JS charting libraries where a multi-device solution might be easier to implement?).
The solution seems rather simple.
Just don't give the graph's a fixed width, i.e., don't define the width or set width:100% and, unlike the demo I mention, the bar chart width and accompanying bars will shrink as much as the browser width is reduced.
It probably depends on which types of charts that you are displaying. On mobile, if you're displaying a column chart, you might want to rotate the chart so that it becomes a bar chart.
If you're displaying a line chart, you could "scope" the data, so that you're only displaying the least amount of points needed to get the point across. As you zoom in, re-scope the data to fit the current view. This can be done using some events combined with some hand rolled js.
You can set the chart container div width:100% .
Then just remove the highchart width property. I resolved it for a sparkline chart. Now it is mobile responsive.
Highcharts.chart('my-sparkline-chart, {
chart: {
type: 'areaspline',
height: '70',
//width: '189', //comment width property.
spacing: [0, 0, 0, 0],
backgroundColor: "transparent"
}
...
An Example with bootstrap
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Highcharts data from JSON Response</title>
<style>
body{
margin-top: 30px;
margin-left:40px;
}
.col-md-4{
padding-left:5px !important;
padding-right:5px !important;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = ['0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '];
$(document).ready(function () {
Highcharts.chart('container', {
chart: {
type: 'bar'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
}
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},
series: [{
name: 'Male',
data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
-3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
-2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
}, {
name: 'Female',
data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
1.8, 1.2, 0.6, 0.1, 0.0]
}]
});
Highcharts.chart('container2', {
chart: {
type: 'bar'
},
title: {
text: 'Population pyramid for Germany, 2015'
},
subtitle: {
text: 'Source: Population Pyramids of the World from 1950 to 2100'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
}
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},
series: [{
name: 'Male',
data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
-3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
-2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
}, {
name: 'Female',
data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
1.8, 1.2, 0.6, 0.1, 0.0]
}]
});
Highcharts.chart('container3', {
chart: {
type: 'bar'
},
title: {
text: 'Population pyramid for Germany, 2015'
},
subtitle: {
text: 'Source: Population Pyramids of the World from 1950 to 2100'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
}
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},
series: [{
name: 'Male',
data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
-3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
-2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
}, {
name: 'Female',
data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
1.8, 1.2, 0.6, 0.1, 0.0]
}]
});
})
</script>
</head>
<body>
<div class="col-md-12 row">
<div class="col-md-4">
hello
</div>
<div class="col-md-8 row">
<div class="col-md-4"><div id="container" style="height: 400px;border:1px solid;"></div></div> <div class="col-md-4"><div id="container2" style="height: 400px;border:1px solid;"></div></div>
<div class="col-md-4"><div id="container3" style="height: 400px;border:1px solid;"></div></div>
</div>
</div>
</body>
</html>
try add this on the <head></head>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>