We Keep Coding

How to make highchart span over whole x-axis?

I have code from this post, when I increase the number of years,
xAxis: {
....
min: 0,
max: 3, // This is dynamic
The chart gets limited only to 0,1 years. how can I make the chart spans end to end so that it looks like this
Edit: the problem is that x-axis "years invested" comes from a variable and the no. of years changes e.g. in this problem it is 3, so the chart needs to go expand all the way from 0 to 3 (left to right) on the x-axis as is in the screenshot, I used max to show 3 years on x-axis, and the 3 values I will plot on y-axis will come from variables as well, in this e.g. its '22286,12286,9286' i will have only these 3 values and the graph will start from 0. so I cannot put any other arbitrary value in the series
var chart = 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,
min: 0,
max: 3,
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: []
}, {
data: []
}, {
data: []
}]
});
document.getElementById('chartInit').addEventListener('click', function() {
chart.update({
series: [{
data: [0, 22286]
}, {
data: [0, 12286]
}, {
data: [0, 9286]
}]
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<button id="chartInit">Init chart</button>
<div id="container"></div>

You need to define data in [x, y] format and use yearsInvested variable as a value of the second point.
const yearsInvested = 10;
chart.update({
series: [{
data: [
[0, 0],
[yearsInvested, 22286]
]
}, {
data: [
[0, 0],
[yearsInvested, 12286]
]
}, {
data: [
[0, 0],
[yearsInvested, 9286]
]
}]
});
Live demo: https://jsfiddle.net/BlackLabel/zun7cdge/
API Reference: https://api.highcharts.com/highcharts/series.area.data

Highcharts age pyramid stacked bar (grouping)

I would like to use the highcharts age pyramid for men and women. Men and women can fall into three different categories. For example a, b and c. I would like to have a stacked bar for the three groups for men and women separately per age. Hopefully you can help me with this.
I have created the following age pyramid example, but as you can see, it has not yet been possible to add more than two groups.
JavaScript
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
marginLeft: 10
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
xAxis: {
left: '50%',
categories: ['15-19', '20-21'],
lineWidth: 0,
tickWidth: 0,
labels: {
align: 'left',
x: -18
},
title: {
text: 'Age Group',
align: 'high',
rotation: 0,
x: 40
}
},
yAxis: [{
left: '55%',
width: '45%',
labels: {
enabled: false
},
title: {
x: -160,
text: 'Female'
},
gridLineWidth: 0
}, {
reversed: true,
width: '45%',
offset: 0,
labels: {
enabled: false
},
title: {
x: 170,
text: 'Male'
},
gridLineWidth: 0
}],
series: [{
data: [1, 3],
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, '#3F7EBF'],
[1, '#1F3F5F']
]
},
}, {
data: [2, 5],
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, '#980061'],
[1, '#4C0030']
]
},
yAxis: 1
}]
});
This is what i want to achieve in the end:

This chart type is not supported by Highcharts library out of the box.
However, something similar can be created using two charts next to each other with one axis reversed. Check demo and code posted below.
Code:
Highcharts.chart('container1', {
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
categories: ['15-19', '20-21', '21-25'],
labels: {
enabled: false
}
},
yAxis: {
min: 0,
reversed: true,
title: {
text: 'males',
align: 'high'
}
},
credits: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'A',
data: [5, 3, 4]
}, {
name: 'B',
data: [2, 2, 3]
}, {
name: 'C',
data: [3, 4, 4]
}]
});
Highcharts.chart('container2', {
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
categories: ['15-19', '20-21', '21-25'],
labels: {
align: 'center'
}
},
yAxis: {
min: 0,
title: {
text: 'females',
align: 'low'
}
},
credits: {
enabled: false
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'A',
data: [2, 4, 1]
}, {
name: 'B',
data: [5, 2, 1]
}, {
name: 'C',
data: [4, 1, 2]
}]
});
#container1 {
width: 45%;
float: left;
}
#container2 {
width: 55%;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container1"></div>
<div id="container2"></div>
Demo:
https://jsfiddle.net/BlackLabel/cg5af2dz/

Just a multiple series of data
series: [{
name: 'A (m)',
data: [6, 2],
yAxis: 1
}, {
name: 'B (m)',
data: [2, 2],
yAxis: 1
},
...
]
and stacking: 'normal'
series: {
stacking: 'normal'
}
solves the problem
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
height: 170,
marginLeft: 10
},
title: '',
plotOptions: {
bar: {
dataLabels: {
enabled: false,
}
},
series: {
stacking: 'normal'
}
},
xAxis: {
left: '50%',
categories: ['15-19', '20-21'],
lineWidth: 0,
tickWidth: 0,
offset: 0,
labels: {
enabled: true,
align: 'left',
x: -18
},
stackLabels: {
enabled: true,
align: 'right',
x: 20
},
title: {
text: 'age group',
align: 'high',
rotation: 0,
x: 40
}
},
yAxis: [{
left: '55%',
width: '45%',
offset: 0,
labels: {
enabled: false
},
title: {
x: -210,
text: 'males'
},
gridLineWidth: 0
}, {
reversed: true,
width: '45%',
offset: 0,
labels: {
enabled: false
},
title: {
x: 210,
text: 'females'
},
stackLabels: {
enabled: true,
align: 'left',
x: -20
},
gridLineWidth: 0
}],
series: [{
name: 'A (m)',
data: [6, 2],
color: '#000',
yAxis: 1
}, {
name: 'B (m)',
data: [2, 2],
color: '#02aff1',
yAxis: 1
}, {
name: 'C (m)',
data: [2, 2],
color: '#e0301e',
yAxis: 1
}, {
name: 'A (f)',
data: [2, 2],
color: '#000',
}, {
name: 'B (f)',
data: [2, 2],
color: '#02aff1',
}, {
name: 'C (f)',
data: [6, 2],
color: '#e0301e',
}]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id="container"></div>

decrease x-axis labels area height for grouped categories highcharts

How could I decrease the cells height on x-axis as there are lots of empty spaces. I have used x-axis grouped-categories.js plug in. As you could see in the picture, the grey lines on x-Axis are too long and occupying too much space of my chart-container.
Below is the code which I have used for the chart:
xAxis: {
categories: [{
name: "Year 7",
categories: [1, 2, 3, 4]
}, {
name: "Year 8",
categories: [1, 2, 3, 4]
}, {
name: "Year 9",
categories: [1, 2, 3, 4]
}, {
name: "Year 10",
categories: [1, 2, 3, 4]
}, {
name: "Year 11",
categories: [1, 2, 3, 4]
}],
drawHorizontalBorders: false,
labels: {
rotation: 0,
groupedOptions: [{
y: 4,
style: {
fontSize: '5.5px',
padding: 0
}
}],
y: 7,
style: {
fontSize: '5.5px',
padding: 0
}
},
plotLines: [{
color: '#5DA06E',
width: 2,
value: l
}, {
color: '#5DA06E',
width: 2,
value: m
}],
min: m + 0.5,
max: l - 0.5
},
yAxis: [{
gridLineWidth: 0,
labels: {
enabled: false
},
title: {
text: null
},
min: 0,
max: 1000
},
{
gridLineWidth: 0,
title: {
text: false
},
labels: {
align: 'left',
x: 5,
formatter: function () {
var value = change[this.value];
return value !== 'undefined' ? value : this.value;
},
style: {
font: '8px arial'
}
},
tickPositions: [0, lines[0][1], lines[1][1], lines[2][1], lines[3][1], lines[4][1], lines[5][1], lines[6][1], lines[7][1], lines[8][1]],
gridLineColor: 'transparent',
opposite: true,
min: 0,
max: 1000
}],

High chart area fill

I'm using highstock chart area. What I'm trying to achieve if possible is when the chart is initially drawn the area portion to be one color. When the user selects other options then the lines that are drawn come in another color. I've tried using the the highcharts theme and i've also set the highcharts setOptions. I also tried the plotOptions. When clicked it works as normal adds the additional line as black. But when clicked again it adds another line but as gray. The gray on gray when there are lots of lines some just can be seen.
Attached is what the chart looks like
Here is my code: ` Highcharts.setOptions({
colors: ['#778899','#000000']
});
$(selector).highcharts('StockChart', {
chart: {
height: 600,
borderRadius: 0
},
credits: { 'enabled': false },
legend: {
enabled: true,
borderRadius: 1,
borderWidth: 0,
itemStyle: {
fontSize: '11px'
},
itemHiddenStyle: {
color: '#999999'
}
}
plotOptions: {
series: { lineWidth: 1 },
area:{colors:['#000000']}
}
});`

You defined only 2 colors: #778899','#000000'. So when you add 3rd line it is gray, 4th line would be black, and so on. Example with 4 lines: http://jsfiddle.net/dpb3vcy0/1/
$(function () {
// Create the chart
Highcharts.setOptions({
colors: ['#778899', '#000000']
});
$('#container').highcharts('StockChart', {
rangeSelector: {
inputEnabled: $('#container').width() > 480,
selected: 1
},
series: [{
name: 'nr 1',
data: [5, 1, 1],
type: 'area',
threshold: null,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}, {
name: 'nr 2',
data: [0, 0, 5, 5],
type: 'area',
threshold: null,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}, {
name: 'nr 3',
data: [0, 0, 0, 2, 2, 7],
type: 'area',
threshold: null,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}, {
name: 'nr 4',
data: [0, 0, 0, 0, 0, 1, 1, 4],
type: 'area',
threshold: null,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}]
});
});

How do I pass jquery result to highchart

Absolute novice here at JavaScript so please forgive any bad coding.
I have been working on a project using Highchart and wish to read the value of a file (actually read the file into an array and grab a specific value - I will use other values for other graphs).
With the help of others here I can now display the value of the array into HTML however I cannot pass this into the Highchart.
My prototype page (so you can see the output) can be found at
http://maccas.chickenkiller.com/1.html
The code is
<html debug="false">
<head>
<title>Adam's hacked up demo</title>
<META HTTP-EQUIV="refresh" CONTENT="300">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<script>
jQuery(function($){ // encapsulate jQuery
$.ajax(
{
url:'livedata.txt',
async:false,
success: function(data){
livedata = data.split(',');
}
});
function drawGraph(phvalue) {
var phvalue=livedata[3];
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'live pH'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 8,
max: 9,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
plotBands: [{
from: 8,
to: 8.3,
color: '#55BF3B' // green
}, {
from: 8.3,
to: 8.7,
color: '#DDDF0D' // yellow
}, {
from: 8.7,
to: 9,
color: '#DF5353' // red
}]
},
series: [{
name: 'Current pH',
data: [phvalue],
tooltip: {
valueSuffix: ' pH'
}
}]
});
}
$(document).ready(function () {
drawGraph();
});
});
</script>
<body>
<table>
<tr>
<td><div id="container" style="width:90%; height:400px;"></div></td>
</tr>
</table>
</body>
</html>
Does anyone have an idea how to get the var phvalue to display in Highcharts?
Thanks in advance.

Since ajax is asynchronous, you can draw the graph once the request is complete
jQuery(function($){ // encapsulate jQuery
$.ajax(
{
url:'livedata.txt',
async:false,
success: function(data){
livedata = data.split(',');
highcharts(livedata[3])
}
});
function highcharts (phvalue) {
$('#realtimeph').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'live pH'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 8,
max: 9,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
plotBands: [{
from: 8,
to: 8.3,
color: '#55BF3B' // green
}, {
from: 8.3,
to: 8.7,
color: '#DDDF0D' // yellow
}, {
from: 8.7,
to: 9,
color: '#DF5353' // red
}]
},
series: [{
name: 'Current pH',
data: [phvalue],
tooltip: {
valueSuffix: ' pH'
}
}]
});
}
});

This was surprisingly complicated. You want:
$('#container').highcharts().series[0].points[0].update(x)
where x is the number you want to update with