How to make highchart span over whole x-axis? - javascript

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

Related

How to sort the yaxis in descending order if tickpositions in highcharts are used?

Below is a piece of code that I have, which gives me an output like in the image.
I want the yaxis values to be sorted in the reverse order ie, the top of the Y axis should start from 9 and then 3,0. I tried reversed:true. But it doesn't seems to be working when tickPositions are used. But I need to use them as I have to show the bar at specific points. Is there any way to show the yaxis values in descending order along with tickPositions? Any help would be much appreciated. Thanks in advance.
Highcharts.chart('container', {
chart: {
type: 'bar',
//marginLeft: 150
},
xAxis: {
type: 'category',
title: {
text: null
},
max: 25,
min: 0,
reversed:true,
tickPositions : [9,3,0]
//tickLength: 1
},
yAxis: {
// min: 0,
// max: 10,
title: {
text: 'Votes',
align: 'high'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Votes',
data: [
[0, 10],
[3, 10],
[9, 10],
],
dataLabels: {
//enabled: true,
color: '#333',
//inside: true
}
}]
});
So, you just want it to show as normal with 0 at the coordiante root? No reversed needed?
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'bar',
//marginLeft: 150
},
xAxis: {
type: 'category',
title: {
text: null
},
max: 25,
//min: 0,
reversed:false,
tickPositions : [9,3,0]
//tickLength: 1
},
yAxis: {
reversed: false,
min: 0,
max: 10,
title: {
text: 'Votes',
align: 'high'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Votes',
data: [
[0, 10],
[3, 10],
[9, 10],
],
dataLabels: {
//enabled: true,
color: '#333',
//inside: true
}
}]
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

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>

Bar Chart Gauge Highcharts

How do I achieve a bar gauge chart?
I need a chart like this:
I followed the steps from here, but I am not able to define the stops properly.
https://www.safaribooksonline.com/library/view/learning-highcharts/9781849519083/ch04s04.html
These are my stops:
stops: [
[0, '#ffffff'],
[1, '#ff0000'],
[2, '#f3f03c'],
[3, '#FFA500'],
[4, '#02c102']
]
Please advice.
var value = "3.0";
Highcharts.chart('barGauge', {
chart: {
type: 'bar',
plotBorderWidth: 2,
plotBackgroundColor: '#D6D6EB',
plotBorderColor: '#D8D8D8',
plotShadow: true,
spacingBottom: 43,
width: 350,
height: 120
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
tickLength: 0
},
yAxis: {
title: {
text: null
},
labels: {
y: 1
},
min: 0,
max: 4,
tickInterval: 1,
minorTickInterval: 1,
tickWidth: 1,
tickLength: 8,
minorTickLength: 5,
minorTickWidth: 1,
minorGridLineWidth: 0
},
legend: {
enabled: false
},
series: [{
borderColor: '#7070B8',
borderRadius: 3,
borderWidth: 1,
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 0
},
stops: [
[0, '#ffffff'],
[1, '#ff0000'],
[2, '#f3f03c'],
[3, '#FFA500'],
[4, '#02c102']
]
},
pointWidth: 50,
data: [parseInt(value)]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="barGauge"></div>
So if the value is 1, the bar should progress from 0 to 1 and be red.
So if the value is 2, the bar should progress from 0 to 2 and be yellow.
So if the value is 3, the bar should progress from 0 to 3 and be orange.
So if the value is 4, the bar should progress from 0 to 4 and be green.
You can create an array of zones and apply a specific color to each value range.
An array defining zones within a series. Zones can be applied to the X axis, Y axis or Z axis for bubbles, according to the zoneAxis option. The zone definitions have to be in ascending order regarding to the value.
const gaugeValue = 4;
Highcharts.chart('barGauge', {
chart: {
type: 'bar',
height: 120
},
title: {
text: ''
},
yAxis: {
min: 0,
max: 4,
tickInterval: 1,
title: {
text: null
},
},
legend: {
enabled: false
},
series: [{
data: [parseInt(gaugeValue)],
zones: [{
value: 1,
color: '#ffffff'
}, {
value: 2,
color: '#ff0000'
},
{
value: 3,
color: '#f3f03c'
},
{
value: 4,
color: '#FFA500'
},
{
value: 5,
color: '#02c102'
}
]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="barGauge"></div>
jsfiddle

Highcharts small size div not showing minorTickInterval

I'm trying to add Highcharts to my page, but the problem is my DIV tag size is quite small (233px,98px) and I want to show minorTickInterval in it, but highcharts truncate them because of small DIV size.
http://jsfiddle.net/a62nhs7f/
Is there anyway to show the inner lines of the interval in the small size?
var options = {
title: {
text: ''
},
labels: {
enabled: false
},
title: {
text: '',
align: 'high',
enabled: false
},
subtitle: {
text: '',
align: 'high',
enabled: false
},
/*
xAxis: {
tickInterval: 1,
breaks: [{
from: 5,
to: 10,
breakSize: 1
}]
},
*/
legend: {
enabled: false
},
yAxis: {
gridLineWidth:1,
lineWidth: 1,
min: 0,
//tickWidth: 1,
minTickInterval:5,
minorGridLineWidth:1,
minorTickInterval: 0.1,
minorTickLength: 2,
//type: 'logarithmic',
minorTickInterval: 5,
//minorTickInterval: 'auto',
//minorTickLength: 0,
title: {
text: '',
//align: 'high',
enabled: false
},
labels: {
//enabled: false,
style: {"font-size":'8px'},
formatter: function() {
return this.value;
}
}
},
xAxis: {
min: 0,
tickmarkPlacement: 'on',
title: {
enabled: false
},
labels: {
enabled: false
},
/*gridLineColor: '#c9d5ba',
gridLineWidth: '1',
lineColor: '#222222',
lineWidth: 0,*/
categories: [1.2, 2, 3.1, 4.3, 5.1, 5.9, 6.7, 7.5, 8.3, 9.1, 9.8, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
labels: {
formatter: function () {
return '<a style="color:green" data-value="' +[this.value] + '">' +
this.value + '</a>';
},
style: {"font-size":'8px'}
}
},
series: [{
data: [5.7, 11.1, 22.2, 38.1, 51, 66.6, 83.3, 101.1, 118.6, 135.7, 150.9, 161.4, 169.2, 172.8, 176.8, 178.5, 179.7, 179.9, 180, 179.9, 179.1]//,
//pointInterval: 500
}]
};
Thanks
You can disable the line markers. I think It is better solution for you.
plotOptions: {
line: {
marker: {
enabled: false
}
}
},
Chek my demo.

Highchart bar scaling

I'd like to show data between 0 and 100%. The bar chart have 160px of width and I'd like to see just bar without any titles/legends.
I got the data in range bitween 0 and x (for example from 0 till 700), and max value can be changed.
When max value less then 160 the bar looks correctly. But when max value more than 160 a chars scales current bar value incorectly.
Desirable result
http://jsfiddle.net/dvasuta/H6SJE/2/
What I have now
http://jsfiddle.net/dvasuta/sXAeh/2/
$(function () {
$('#container').highcharts({
credits: {
enabled: false,
},
chart: {
renderTo: 'container',
type: 'bar',
marginBottom: 1,
marginTop: 1,
marginLeft: 1,
marginRight: 1,
borderRadius: 0,
borderWidth: 1,
borderColor: '#c5c6c7',
backgroundColor: 0,
height: 22,
width:160
},
title: {
text: null
},
xAxis: {
tickWidth: 0,
lineWidth: 0,
gridLineWidth: 0,
categories: 0,
labels: {
enabled: false
}
},
yAxis: {
tickWidth: 0,
lineWidth: 0,
gridLineWidth: 0,
min: 0,
max: 2500,
title: {
text: null
},
labels: {
enabled: false
}
},
tooltip: {
enabled: false,
formatter: function () {
return '';
}
},
legend: {
enabled: false
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter: function () {
return '';
},
y: 0,
x: 0,
color: '#ff0',
style: {
fontSize: '18px',
fontFamily: 'bold Helvetica,Arial,sans-serif'
}
}
},
series: {
allowPointSelect: false,
enableMouseTracking: false,
groupPadding: 0,
pointPadding: 0,
borderWidth: 0,
borderRadius: 0
}
},
series: [{
shadow: true,
data: [2482],
color: {
linearGradient: [20, 20, 0, 20],
stops: [
[0, '#B6D22D'],
[1, '#5C9135']
]
}
}]
});
});
It seems the issue in chart.width parameter. But how can I set a chart width?
I think the parameter you need to try is 'endOnTick' on the y-axis:
endOnTick:false,
http://jsfiddle.net/46nMs/
http://api.highcharts.com/highcharts#yAxis.endOnTick
Also, you may want to turn of exporting (this is just a visual tweak, and doesn't affect the scaling of the bar).
try this LINK ChaRT LINK
1. Disabled exporting
2. borderWidth = 0

Categories