I'm trying to figure out a way to plot boolean values in Highcharts using the max yAxis range. I'd like the false value is aligned with the bottom of the chart and the true values is aligned with the top. Highcharts seems to be auto padding the ticks at ~30% and ~70% of the yAxis and I can't seem to find a way to adjust these to 0 and 100%.
Here's a simplified code example I've been experimenting with:
Highcharts.chart("container", {
xAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
},
yAxis: [
{
title: {
text: "Valve Position",
},
categories: ["on", "off"],
},
],
series: [
{
data: [0, 1, 0, 1, 0, 1],
},
],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
Use the linear axis type (default) insted of category:
yAxis: [{
...,
tickPositions: [0, 1],
labels: {
formatter: function() {
return this.isFirst ? 'on' : 'off';
}
}
}],
series: [{
data: [0, 1, 0, 1, 0, 1]
}]
Live demo: http://jsfiddle.net/BlackLabel/7v04d3r5/
API Reference: https://api.highcharts.com/highcharts/yAxis
Related
How i can increase legend symbol size, I have tried these properties
symbolHeight: 12
symbolWidth: 12
symbolRadius: 6 but these are not working for line chart.
code:https://jsfiddle.net/juvcfkmh/4/
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Round legend symbols'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr']
},
legend: {
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6
},
series: [{
data: [1, 3, 2, 4]
}, {
data: [6, 4, 5, 3]
}, {
data: [2, 7, 6, 5]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
The legend appearance is based on a series marker, so you can for example create another series without data, define marker options and link the real series.
series: [{
...,
id: 'firstSeries',
marker: {
radius: 15
},
data: []
}, {
...,
linkedTo: 'firstSeries',
data: [...]
}]
Live demo: http://jsfiddle.net/BlackLabel/4yrk5dq1/
Good evening,
I'm using highcharts and this is my actual situation
`
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: "One might think points get grouped by name"
},
"series": [{
"data": [{
x: 1,
"name": "May",
"y": 1
}],
"name": "Alpha"
}, {
"data": [{
x: 0,
"name": "Apr",
"y": 1
}, {
x: 1,
"name": "May",
"y": 2
}, {
x: 2,
"name": "Jun",
"y": 3
}],
"name": "Beta"
}],
xAxis: {
type: 'category',
//categories : ["Jun", "Apr", "May"]
},
yAxis: {
type: 'category',
categories : ["First", "Second", "Third", "fourth","fifth"]
}
});
});
` .As you can see from the fiddle, the y axis is detached from the x axis but if I comment rows from 37 to 41 I get what I want. Is there any way to get x and y axis starting from the same point and keep using categories ?
You don't have to categorize yAxis - you can display proper yAxis labels using yAxis.labels.formatter function:
var yAxisCategories = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh', 'eighth', 'ninth']
yAxis: {
labels: {
formatter() {
return yAxisCategories[this.pos]
}
}
},
jsFiddle with formatter
If you'd like to stick with categorized yAxis, you can manually move xAxis closer to they yAxis 0 value using xAxis.offset property together with yAxis.tickmarkPlacement 'on' property. In this example, I have put -34px rigidly, but you can calculate the proper value in chart.load event and then update calculated offset.
xAxis: {
type: 'category',
offset: -34
},
yAxis: {
type: 'category',
categories: ["First", "Second", "Third", "fourth", "fifth"],
tickmarkPlacement: 'on'
},
jsFiddle with offset
If you want to try a different approach, let me know - I will edit my answer.
API References:
https://api.highcharts.com/highcharts/yAxis.labels.formatter
https://api.highcharts.com/highcharts/yAxis.tickmarkPlacement
https://api.highcharts.com/highcharts/xAxis.offset
Observe the series one in the below example having a constant value and for that series points connecting lines are not plotted, but when we give a solid colour then the line will be plotted.
Highchart's line chart with constant series not plotting the line b/w points when we use line gradient colour, but if you change that to solid colour then line will be plotting.
highcharts.series[].data = [2, 2, 2, ...];
highcharts.color[0] = {
linearGradient: {...},
stop: {...}
};
Check this example:
https://jsfiddle.net/4vk7cdmz/
This is because of the attribute gradientUnits in linearGradient which the default value is objectBoundingBox.
Keyword objectBoundingBox should not be used when the geometry of the
applicable element has no width or no height, such as the case of a
horizontal or vertical line, even when the line has actual thickness
when viewed due to having a non-zero stroke width since stroke width
is ignored for bounding box calculations. When the geometry of the
applicable element has no width or height and objectBoundingBox is
specified, then the given effect (e.g., a gradient or a filter) will
be ignored.
W3C Recommendation
You need to use gradientUnits="userSpaceOnUse".
Highcharts.js has fixed this issue in version 2.2.
Instead of using linearGradient as an object
"linearGradient": {
"x1": 0,
"y1": 0,
"x2": 1,
"y2": 0
}
, using it as an array
"linearGradient": [x1, y1, x2, y2],
will set gradientUnits to userSpaceOnUse in highcharts.js
(This requires knowledge of the line width.)
Here's a demo:
var Chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'a constant series line is not plotting when using linear gradient colour.'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
colors: [{
"linearGradient": [0, 0, 500, 0],
"stops": [
[0, "rgb(35,190,250)"],
[1, "rgb(51,223,188)"]
]
}, {
"linearGradient": [0, 0, 500, 0],
"stops": [
[0, "rgb(250,79,168)"],
[1, "rgb(156,120,229)"]
]
}],
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'John',
data: [2, 2, 2, 2, 2, 2, 2]
},
{
name: 'Jane',
data: [1, 1, 1, 1, 1, 1, 2]
}
]
});
#container {
width: 100%;
height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/highcharts.src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/css/highcharts.css" />
<div id="container"></div>
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 created fiddle to show my current graph:
http://jsfiddle.net/LLExL/4445/
The code is
$('#container').highcharts({
chart: {
backgroundColor: 'none',
spacingRight: 20,
zoomType: 'x'
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
legend: {
borderWidth: 0,
enabled: true,
verticalAlign: 'top',
y: 25
},
plotOptions: {
series: {
animation: false,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
}
},
},
title: {
text: 'Points'
},
tooltip: {
shared: true
},
xAxis: {
labels: {
format: '{value: %d/%m}'
},
type: 'datetime'
},
yAxis: {
title: {
text: null
},
showFirstLabel: true
},
series: [{
type: 'column',
name: 'Reached',
data: [
[1427328000000, 198],
[1427414400000, 127],
[1427673600000, 104],
[1427760000000, 107],
[1427846400000, 102],
[1427932800000, 1],
[1428278400000, 1],
[1428364800000, 55],
[1428451200000, 83],
[1428537600000, 77],
[1428624000000, 107],
[1428883200000, 99],
[1428969600000, 140],
[1429056000000, 134],
[1429142400000, 108],
[1429228800000, 104],
[1429488000000, 113],
[1429574400000, 115],
[1429660800000, 115],
[1429747200000, 97],
]
}, {
type: 'line',
name: 'Target',
color: 'red',
lineWidth: 2,
data: [
[1427328000000, 123],
[1427414400000, 123],
[1427673600000, 123],
[1427760000000, 123],
[1427846400000, 143],
[1427932800000, 0],
[1428278400000, 0],
[1428364800000, 143],
[1428451200000, 143],
[1428537600000, 143],
[1428624000000, 114],
[1428883200000, 143],
[1428969600000, 143],
[1429056000000, 143],
[1429142400000, 143],
[1429228800000, 114],
[1429488000000, 143],
[1429574400000, 143],
[1429660800000, 143],
[1429747200000, 143],
]
} ]
});
I want to remove inactive dates from the X-axis, ex. the dates BETWEEN 02/04 and 06/04 (but not these 2, since they have a value).
The only solution I have found working is to declare the dates myself via Categories and then going away from the datetime type axis. This is not the right solution for me tho, since the axis then won't fit correctly on smaller screens.
Is this anyhow possible to remove no-value-dates?
In Highcharts there is no ordinal option for axis, but it can be set if you are using Highstock. This options hides values from x axis that do not have points.
You could use Highstock to create Highcharts chart with axis that have ordinal x axis.
Load Highstock JS file instead of Highcharts:
<script src="http://code.highcharts.com/stock/highstock.js"></script>
In axis options set ordinal to true:
xAxis: {
ordinal: true,
jsFiddle: http://jsfiddle.net/LLExL/4451/