I tried to create a column chart in highcharts to display monthly data on a datetime axis. The problem is that the spacing between the bars is different. For example after the month february there is only a small spacing whereas after other months the spacing is bigger. Maybe this is happening because the month feburary only has 28 days.
Anyway here is my code:
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: [{
type: 'datetime'
}, {
type: 'datetime',
visible: false
}],
plotOptions: {
column: {
grouping: false,
groupPadding: 0,
pointPadding: 0,
pointPlacement: 'between'
}
},
series: [{
name: 'Year',
xAxis: 1,
data: [25],
zIndex: 4,
color: '#222',
pointStart: Date.UTC(2017, 0, 1),
pointInterval: 1,
pointIntervalUnit: 'year'
}, {
name: 'Month',
data: [50, 100, 130, 160, 170, 200, 170, 165, 250, 200, 230, 160],
pointStart: Date.UTC(2017, 0, 1),
pointInterval: 1,
pointIntervalUnit: 'month',
zIndex: 2,
color: 'red',
}],
});
http://jsfiddle.net/bosngxk1/2/
I also added another bar for the whole year. You notice the already mentioned problem with the spacing and that the year area is a bit too wide. Do you have any ideas how to fix this?
If you do not mind, you can use Highstock. There is an axis option called ordinal. With that set to true (by default), all points are equally spaced. Take a look at the example posted below.
API Reference:
https://api.highcharts.com/highstock/xAxis.ordinal
Example:
http://jsfiddle.net/k0k2n83p/
Well, I guess there is no other option than using categorical x axis. I don't like this solution since I somehow have to hardcode datetime values instead of using datetime formatters and so on.
Anyway by defining the xAxis as follows I get the desired chart layout.
xAxis: [{
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
tickmarkPlacement: 'on'
},
{
categories: [
'2017'
],
visible: false
}]
Fiddle: http://jsfiddle.net/hho4zrso/
Related
I need to show highcharts api series name in one line but not able to get it correctly.
When viewport width is larger then it's not an issue but on narrow width the third legend item drops to new line. Due to SVG rendering, I am not able to apply CSS into group element.
In any case active users just wraps to second line and I am not able to set width of parent group element. So far I have tried all legend default options but it didn't work.
So any help would be great.
https://jsfiddle.net/h28jv3zL/
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
legend: {
align: "left",
x: 0,
y: 0,
itemWidth: 100,
// symbolWidth: 0,
// symbolHeight: 0,
// symbolRadius: 0,
verticalAlign: "top",
layout: "horizontal",
floating: false,
backgroundColor: "white",
shadow: false,
itemStyle: {
"fontWeight": "normal",
"color": "#101010",
"textOverflow": "normal",
"width": "auto",
"white-space": "nowrap",
'padding-right': "10px"
}
},
plotOptions: {
series: {
fillOpacity: 0.1
}
},
series: [{
name: "Inactive Users",
data: [10,11,12],
color: "#D8D8D8",
//showInLegend: false
},
{
name: "New Users",
data: [10,11,12],
color: "#696969",
//showInLegend: false
},
{
name: "Active Users",
data: [10,11,12],
color: "#202020",
//showInLegend: false
},]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
You can add some logic to check the chart.plotWidth and base on that substract series name or hide it inside the labelFormatter callback.
Demo: https://jsfiddle.net/BlackLabel/souphrg9/
I am trying to plot multiple column graphs on the same chart, stacked on each other. This is an example of desired output.
Each colored column segment represents percent of team to have reached a given level by the end of the given month. So it's like 4 separate column charts stacked. I think this is different than grouped and stacked, but may be mistaken.
Thanks for any feedback.
This can be done with a combination of stacked and column range. There are a few caveats with this in that you have to have a category for your yAxis which causes some funkiness with how you set your series' data values. I opted for one method and I am sure there are others. What I did was first set the chart type to 'columnrange':
chart: {
type: 'columnrange'
},
Then I set up the yAxis properties to use categories:
yAxis: {
categories: ['Level 0', 'Level 1', 'Level 2', 'Level 3'],
Since the offset of the category is in-between the tick marks of the axis I removed them and set the start position to not be on the tick:
startOnTick: false,
min: .5,
gridLineWidth: 0,
Up next I have to set the format of the labels (essentially just hiding the first label):
labels: {
formatter: function() {
var label = this.axis.defaultLabelFormatter.call(this);
if (!this.isFirst) {
return label;
}
}
},
Now I create plotLines to mimic the gridlines with the last one a different color to denote the "Target":
plotLines: [{
color: '#e6e6e6',
width: 1,
value: 1
}, {
color: '#e6e6e6',
width: 1,
value: 2
}, {
color: 'red',
width: 2,
value: 3,
label: {
text: 'Target'
}
}]
Now I setup the plotOptions for this chart. Note that the stacking parameter is not listed in the API as being part of the columnrange type but it still functions (as of this answer using v5.0):
plotOptions: {
columnrange: {
stacking: true
}
},
Okay, almost there. I then set up the series data:
series: [{
name: 's1',
data: [
[0, .64],
[0, .9],
[0, 1]
]
}, {
name: 's2',
data: [
[null, null],
[1, 1.1],
[1.0, 1.5]
]
}, {
name: 's3',
data: [
[null, null],
[null, null],
[2.0, 2.5]
]
}]
The important part of the data values is that each "level" is a whole integer such that Level 1 is from 0 to 1 and Level 2 is from 1 to 2 and Level 3 is from 2 to 3. This works out good as you try to determine your percentage in each level for each month as they are still in uniform increments.
I did not modify the tooltip as you gave no specs on that.
Sample jsFiddle and full code:
$(function() {
Highcharts.chart('container', {
chart: {
type: 'columnrange'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
categories: ['Level 0', 'Level 1', 'Level 2', 'Level 3'],
startOnTick: false,
min: .5,
gridLineWidth: 0,
title: {
text: null
},
labels: {
formatter: function() {
var label = this.axis.defaultLabelFormatter.call(this);
if (!this.isFirst) {
return label;
}
}
},
plotLines: [{
color: '#e6e6e6',
width: 1,
value: 1
}, {
color: '#e6e6e6',
width: 1,
value: 2
}, {
color: 'red',
width: 2,
value: 3,
label: {
text: 'Target'
}
}]
},
plotOptions: {
columnrange: {
stacking: true
}
},
legend: {
enabled: true
},
series: [{
name: 's1',
data: [
[0, .64],
[0, .9],
[0, 1]
]
}, {
name: 's2',
data: [
[null, null],
[1, 1.1],
[1.0, 1.5]
]
}, {
name: 's3',
data: [
[null, null],
[null, null],
[2.0, 2.5]
]
}]
});
});
I have a line chart like this:
http://jsfiddle.net/vbLdsodu/
How do i remove or hide the line after july? I want the date axis to continue but don't show the line where the values is 0.
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 0, 0, 0, 0, 0]
}]
});
});
You can replace 0 with null in the data which will then keep the axis listing the months, but stop the line from drawing.
It's also possible to do this part way through the graph and the line will draw from the next data point.
I'm new to Highcharts and I need help creating a graph that looks like the one displayed in the picture below.
Really would appreciate the help on this.
Use gridLineWidth to set the width of the grid: gridLineWidth: 2,
Be sure to set the gridZIndex to a higher number to get it over the series: gridZIndex: 4.
To reduce the columns' space use poitPadding and groupPaddingenter code here under plotOptions.
pointPadding: 0,
groupPadding:0,
Check the example (jsfiddle)
$('#container').highcharts({
chart: {
type: 'column',
backgroundColor: '#000000',
plotBackgroundColor: '#808080'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
],
gridLineWidth: 2,
gridZIndex: 4,
gridLineColor:'#000000'
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
gridLineWidth: 2,
gridZIndex: 4,
gridLineColor:'#000000'
},
plotOptions: {
series: {
pointPadding: 0,
groupPadding:0,
borderColor:'#808080',
}
},
series: [{
name: 'Tokyo',
color:'#D2691E',
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]
}]
});
});
I have a graph with a labelled Y-Axis with points 1 through 100. In addition to the regularly spaced labels (0, 10, 20, etc), I want to add a label for an arbitrary point, say 47. Is this possible with highcharts?
You can add a specific line to the yAxis with the plotLines option.
yAxis: {
plotLines: [{
value: 47,
color: 'rgb(216, 216, 216)',
width: 1,
}]
},
http://jsfiddle.net/nicholasduffy/wa6ukyyp/1/
EDIT:
This seems a bit of a hack, but you could fake the label.
yAxis: {
plotLines: [{
value: 47,
color: 'rgb(216, 216, 216)',
width: 1,
label : {
text: '47',
x: -30,
y: 2
}
}]
},
http://jsfiddle.net/nicholasduffy/wa6ukyyp/2/
Based on your comment, you can add a custom tick with tickPositioner function, with a code like this
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
tickInterval: 20, //sets the interval ticks
tickPositioner: function(){
var ticks = this.tickPositions; // gets the tick positions
ticks.push(47); // adds the custom tick
ticks.sort(function(a, b) {
return a - b; // sorts numerically the ticks
});
return ticks; // returns the new ticks
}
},
series: [{
data: [29.9, 71.5, 86.4, 29.2, 44.0, 76.0, 93.5, 98.5, 16.4, 94.1, 95.6, 54.4]
}]
});
});
JSFiddle demo
I think the solution I found that comes closest is to create a line of zero thickness and label the line:
plotLines: [{
value: cutoff,
color: 'rgb(216, 216, 216)',
width: 0,
label: {
text: 'label_name',
style: {
color: 'grey',
fontweight: 'bold'
}
}
}],
The label_name goes pretty close to the Y-Axis, and it gets the point across without putting a tooltip onto the graph