Develop Reference

Highcharts plotbands different per category

I am attempting to create the following chart:
However I can't seem to get the plotbands to work in this way; right now, they fill the entire axis:
I am not sure if I should use annotations instead, but so far I haven't gotten it to work. What can I try next?
Highcharts.chart('container',{
credits: {
enabled: false
},
title: {
text: "hello world",
style: {
visibility: 'hidden'
}
},
chart: {
type: 'line',
width: 400,
},
legend: {
enabled: false
},
exporting: {
enabled: true,
allowHTML:true,
chartOptions: {
chart: {
marginLeft: 175,
marginRight: 175
},
plotOptions: {
line: {
dataLabels: {
style: {
fontSize: 14
},
verticalAlign: "top",
useHTML: true
}
}
}
}
},
yAxis: {
startOnTick: false,
endOnTick: false,
gridLineWidth: 2,
tickWidth: 2,
tickLength: 20,
plotBands: [{
color: 'rgba(231, 23, 60, 0.5)', // Color value
from: 5, // Start of the plot band
to: 6.2 // End of the plot band
},
{
color: 'rgba(53, 101, 237, 0.5)', // Color value
from: 1, // Start of the plot band
to: 3 // End of the plot band
}
],
title: {
align: 'high',
offset: -40,
text: 'mmol/L',
style: {
fontWeight: "bold",
fontSize: 15
},
rotation: 0,
y: -20
},
min: 0,
max: 7,
labels: {
x: -10,
y: -3,
formatter: function () {
if (this.value != 0) {
if (this.value < 8) {
return this.value;
}
}
},
style: {
fontWeight: "400",
lineHight: "20",
padding: "0",
fontSize: "13"
}
}
},
annotations: [{
shapes: [{
point: '0',
type: 'circle',
r: 10
}, {
point: '3',
type: 'rect',
width: 20,
height: 20,
x: -10,
y: -25
}, {
fill: 'none',
stroke: 'red',
strokeWidth: 3,
type: 'path',
points: ['0', '1', {
x: 6,
y: 195,
xAxis: 0,
yAxis: 0
}],
markerEnd: 'arrow'
}],
labels: [{
point: {
x: 6,
y: 195,
xAxis: 0,
yAxis: 0
}
}]
}],
xAxis: {
gridLineColor: 'transparent',
accessibility: {
rangeDescription: 'Range: 2010 to 2020'
},
categories: [2018, 2019]
},
plotOptions: {
line: {
dataLabels: {
style: {
fontSize: 14
},
verticalAlign: "top",
useHTML: true,
format: '<div style="max-width: 10ch; text-align: center;">{y}<br/>mmol/L</div>'
}
}
},
series: [{
name: '',
color: "black",
data: [5.4, 3],
showInLegend: false,
dataLabels: {
enabled: true,
useHTML: true,
}
}],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>

This kind of plotBand shape is not possible from the API level, but you can simulate it in several ways. Example configurations:
SVG Renderer:
chart: {
events: {
render() {
const chart = this;
if (chart.rects) {
chart.rects = chart.rects.destroy();
}
chart.rects = chart.renderer.g('rects').attr({
zIndex: 1
}).add();
let x = chart.xAxis[0].toPixels(1),
y = chart.yAxis[0].toPixels(4),
width = chart.xAxis[0].toPixels(2) - chart.xAxis[0].toPixels(1),
height = chart.yAxis[0].toPixels(2) - chart.yAxis[0].toPixels(4);
chart.rect = chart.renderer.rect(x, y, width, height)
.attr({
fill: 'grey'
}).add(chart.rects)
chart.rect = chart.renderer.rect(chart.xAxis[0].toPixels(3), y, width, height)
.attr({
fill: 'grey'
}).add(chart.rects)
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/wst607ub/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Annotations:
annotations: [{
draggable: false,
shapes: [{
points: [{
x: 1,
y: 2,
xAxis: 0, // xAxis reference used, use xAxis value
yAxis: 0 // yAxis reference used, use xAxis value
}, {
x: 2,
y: 2,
xAxis: 0,
yAxis: 0
}, {
x: 2,
y: 4,
xAxis: 0,
yAxis: 0
}, {
x: 1,
y: 4,
xAxis: 0,
yAxis: 0
}],
type: 'path'
}]
}]
Demo:
https://jsfiddle.net/BlackLabel/uvxzp6o7/
API Reference:
https://api.highcharts.com/highcharts/annotations
Polygon series:
series: [{
name: 'Polygons',
type: 'polygon',
color: 'grey',
showInLegend: false,
enableMouseTracking: false,
states: {
inactive: {
opacity: 1,
},
},
data: [
[1, 2],
[2, 2],
[2, 4],
[1, 4],
null, // allows multiple polygons
[3, 2],
[4, 2],
[4, 4],
[3, 4],
]
}]
Demo:
https://jsfiddle.net/BlackLabel/4n7ep3k2/
API Reference:
https://api.highcharts.com/highcharts/series.polygon
Take note that annotations and polygon series require the module to be included.

How to show an empty chart in beginning and populate values on button click

I have code from this post. I want to populate the chart on click of a button instead of initializing it and provide only 3 values e.g.22286,12286,9286 ( these values would be dynamic) and plot the chart with the same appearance (i.e. 3 colors chart) as of the snippet
Highcharts.chart('container', {
colors: ['#762232', '#EFCA32', '#007788'],
title: {
text: '',
},
chart: {
type: 'area',
backgroundColor: null,
// spacingRight: 5,
spacingTop: 5,
spacingBottom: 5,
style: {
fontFamily: 'Arial, sans-serif',
},
plotBorderWidth: 1,
plotBorderColor: '#ccc',
},
xAxis: {
gridZIndex: 4,
gridLineWidth: 1,
tickInterval: 1,
tickWidth: 0,
alignTicks: true,
gridLineColor: '#762232',
minPadding: 0,
maxPadding: 0,
title: {
text: 'Years Invested',
},
labels: {
enabled: true,
},
},
yAxis: {
gridLineWidth: 0,
opposite: true,
title: {
text: 'Hypothetical Value',
},
showFirstLabel: false,
showLastLabel: false,
tickPositioner: function() {
var prevTickPos = this.tickPositions,
tickPositions = [prevTickPos[0], prevTickPos[prevTickPos.length - 1]],
series = this.chart.series;
series.forEach(function(s) {
tickPositions.push(s.processedYData[s.processedYData.length - 1]);
});
tickPositions.sort(function(a, b) {
return a - b;
});
return tickPositions;
},
labels: {
enabled: true,
align: "right",
reserveSpace: true,
},
},
tooltip: {
enabled: !1,
},
plotOptions: {
area: {
pointStart: 0,
stacking: false,
lineColor: '#762232',
lineWidth: 1,
fillOpacity: 1,
dataLabels: {
crop: !1,
color: '#762232',
align: 'right',
y: 5,
},
marker: {
enabled: !1,
symbol: 'circle',
radius: 1,
states: {
hover: {
enabled: !1,
},
},
},
},
},
series: [{
data: [4457, 13371, 22286]
}, {
data: [2457, 9371, 12286]
}, {
data: [1457, 5371, 9286]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<button>Populate Chart</button>

All you need to do is to create series with empty data array and use chart.update method to add data. Example:
var chart = Highcharts.chart('container', {
...,
series: [{
data: []
}, {
data: []
}, {
data: []
}]
});
document.getElementById('chartInit').addEventListener('click', function(){
chart.update({
series: [{
data: [4457, 13371, 22286]
}, {
data: [2457, 9371, 12286]
}, {
data: [1457, 5371, 9286]
}]
});
});
Live demo: https://jsfiddle.net/BlackLabel/8pL6hr3w/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#update

Highstock double yAxis - can the legend be split?

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

how to show Y axis (not it label) in jquery?

I am using highchart with jquery .I am able to show X-axis with label (Apple,pears)..But I want to show Y-axis without lable .In other words I want to show a straight line on Y-axis.
here is my code
http://jsfiddle.net/3sembmfo/118/
$(function () {
// Configure the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Highcharts axis visibility'
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Peaches']
},
yAxis: {
allowDecimals: false,
title: {
text: 'Fruit'
},
visible: false
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
data: [1, 3, 2, 4],
name: 'Ola'
}, {
data: [5, 4, 5, 2],
name: 'Kari'
}]
});
var yVis = false,
xVis = true;
});

This can, and should, be resolved by options:
yAxis.lineWidth - to enable the line
yAxis.title.text - to hide the title
yAxis.gridLineWidth - to disable horizontal lines,
yAxis.labels.enabled - to disable labels
Working demo: http://jsfiddle.net/BlackLabel/3sembmfo/122/
Snippet:
yAxis: {
allowDecimals: false,
title: {
text: null
},
labels: {
enabled: false
},
gridLineWidth: 0,
lineWidth: 1,
visible: true
},

Replace your y Axis code with this. http://jsfiddle.net/3sembmfo/119/. If you have any query let me know.
yAxis: {
allowDecimals: false,
labels:{
style: {
fontSize:'0px'
}
},
title: {
text: 'Fruit',
style: {
fontSize:'0px'
}
},
visible: true
},

You have to use Highcharts.SVGRenderer and add line using load event.
chart: {
type: 'column',
events: {
load: function() {
var ren = this.renderer;
ren.path(['M', 10, 10, 'L', 10, this.chartHeight * .8])
.attr({
'stroke-width': 1,
stroke: '#000'
})
.add();
}
}
},
Fiddle demo
$(function() {
// Configure the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
load: function() {
var ren = this.renderer;
ren.path(['M', 10, 10, 'L', 10, this.chartHeight * .8])
.attr({
'stroke-width': 1,
stroke: '#000'
})
.add();
}
}
},
title: {
text: 'Highcharts axis visibility'
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Peaches'],
},
yAxis: {
allowDecimals: false,
title: {
text: ''
},
labels: {
enabled: false
},
gridLineWidth: 0,
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
data: [1, 3, 2, 4],
name: 'Ola'
}, {
data: [5, 4, 5, 2],
name: 'Kari'
}]
});
var yVis = false,
xVis = true;
});
#container {
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/4.1.9/highcharts.js"></script>
<div id="container"></div>

How to do a data overlap independently column in Highcharts

I would like to have something similar to the image below, but the columns representing the classes all stack together now. How do I separate them and allow them to load dynamically as well?
Also I need a legend that says green is band 1, yellow is band 2, orange is band 3 and red is band 4, how do i do that as well? My code is in the JS Fiddle page. I am not allowed to use jQuery, need to use pure JavaScript.
var options = {
chart: {
renderTo : 'container',
type: 'column'
},
title: {
text: 'Topic & Subtopic Mastery'
},
subtitle: {
text: 'Average Level-Stream Mastery vs Average Class Mastery'
},
xAxis: {
categories: topics
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Mastery'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
shared: true,
valueSuffix: ' %'
},
plotOptions: {
column: {
grouping: false,
shadow: false
}
},
series: resultsData
};
http://jsfiddle.net/kscwx139/2/

I came up with a solution you are looking for with specifying x and y axis data for level and giving appropriate width to the point.
$(function() {
var chart;
$(document).ready(function() {
var i = 0;
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
if (i == 0) {
i++;
return Highcharts.Color(color)
.setOpacity(1)
.get('rgba');
} else {
i++;
return Highcharts.Color(color)
.setOpacity(0.5)
.get('rgba');
}
});
var colors = Highcharts.getOptions().colors;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
borderColor: null
},
title: {
text: 'Mailboxes over Quota'
},
subtitle: {
text: 'Mailbox Size in MB'
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
categories: ["Overall Topic", "Topic 1", "Topic 2"],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Total',
align: 'high'
},
allowDecimals: false,
},
tooltip: {
formatter: function() {
return '' +
this.series.name + ': ' + Highcharts.numberFormat(this.y, 0, '.', ',');
}
},
legend: {
enabled: true
},
credits: {
enabled: false
},
series: [{
name: 'Level',
color: colors[0],
data: [{
y: 86,
x: 0.25
}, {
y: 80,
x: 1.25
}, {
y: 95,
x: 2.25
}],
pointWidth: 80
}, {
name: '4A',
data: [90, 88, 97]
}, {
name: '4B',
data: [95, 78, 92]
}, {
name: '4C',
data: [80, 69, 84]
}]
});
});
});
To show in label inside your column you can use below code.
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function() {
return this.series.name;
},
y: 25,
}
}
}
You can see it in action at this JSFIddle