Related
I want to format my values on the y-axis using HighCharts. Suppose I pass 14000, it should print "14K" on the y-axis. How can I do that? I've benn trying using numeral.js, but to no avail.
<!DOCTYPE html>
<html>
<head>
<title>Charts demo </title>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.src.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script >
$(function () {
$('#container').highcharts({
colors: ['#8dafb7', '#f19962', '#e97381', '#f8c465', '#6cd299', '#87cfe2'],
chart: {
type: 'column',
marginBottom : 50,
marginTop : 150,
height : 700
},
title: {
text: ''
},
xAxis: {
categories: ['Q2,16', 'Q3,16', 'Q4,16', 'Q1,17'],
width: 700,
tickmarkPlacement: 'on',
labels: {
y : 40,
style: {
color: '#333333',
fontSize:'25',
fontFamily: 'ProximaNova-Light',
opacity : '.6'
},
}
},
yAxis: {
gridLineWidth: 0,
min: 0,
tickInterval: 20,
title: {
text: ''
},
labels: {
style: {
color: '#333333',
fontSize:'25',
fontFamily: 'ProximaNova-Light',
opacity : '.5'
},
formatter: function() {
return "$"+ this.value ;
}
},
stackLabels: {
style: {
color: '#555555',
fontSize:'25',
fontFamily: 'ProximaNova-Regular'
},
enabled: true,
formatter: function() {
return "$"+ this.total ;
}
}
},
legend:{
enabled:false,
width: 600,
floating: false,
x:50,
align: 'left',
style: {
color: '#555555',
fontSize:'25',
fontFamily: 'ProximaNova-Regular',
opacity : '.8'
},
borderWidth: 0
},
tooltip: {
enabled: false
},
credits : {
enabled : false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'FTE-OpEx ',
data: [5000, 30000, 40000, 700000],
pointWidth: 30,
}, {
name: 'FTE-CapEx',
data: [20000, 20000, 30000, 20000],
pointWidth: 30
}, {
name: 'AWF-OpEx',
data: [30000, 40000, 4000, 2000],
pointWidth: 30
}, {
name: 'AWF-CapEx',
data: [3000, 4000, 4000, 2000],
pointWidth: 30
}, {
name: 'HW/SW',
data: [3000, 4000, 4000, 20000],
pointWidth: 30
}, {
name: 'Other',
data: [3000, 4000, 4000, 2000],
pointWidth: 30
}]
});
});
</script>
</head>
<body id="body">
<div id="container" style="height: 100%; width: 100%; position: center; margin-left: 5%; "></div>
</body>
</html>
}
It's problem with your formatter which returns default value, see API. If you want to keep numeric symbols, call defaultLabelFormatter.
Demo: http://jsfiddle.net/BlackLabel/uL2jx0t9/1/
yAxis: {
labels: {
formatter: function() {
return '$' + this.axis.defaultLabelFormatter.call(this);
}
}
}
I have a column chart as in the picture below. How do I draw a responsive horizontal line (and label) outside the chart area?
I know we could achieve something similar using plotLines and plotBands but the value has to be the one within the value range in the series, and the line won't be drawn outside the chart either.
In my case, I want to draw the line outside the chart area, specifically under the xAxis (see the line in red color).
Is there a way to do that?
$(function() {
Highcharts.chart('sd-median-annual-earnings-chart', {
credits: {
enabled: false
},
chart: {
type: 'column',
backgroundColor: null,
style: {
fontSize: 'inherit',
overflow: 'visible',
width: '100%'
}
},
title: {
text: 'Median Annual Earnings',
style: {
color: '#000',
fontFamily: 'inherit',
fontSize: '1.2em',
fontWeight: 700
}
},
xAxis: {
categories: [
'A',
'B',
'C',
'D'
],
labels: {
overflow: 'justify',
style: {
color: '#000'
}
},
tickWidth: 0
},
yAxis: {
min: 0,
max: 40000,
gridLineColor: '#d6d6d6',
title: {
text: 'Percent',
style: {
color: '#FFFFFF',
fontFamily: 'inherit',
fontSize: 'inherit'
}
},
labels: {
overflow: 'justify',
style: {
color: '#000'
}
},
tickPositioner: function(min, max) {
var each = Highcharts.each,
ticks = [];
for (var i = min; i <= max; i++) {
if (i % 5000 === 0)
ticks.push(i);
}
return ticks;
}
},
tooltip: {
enabled: false
},
legend: {
symbolRadius: 0,
itemStyle: {
color: '#000'
},
itemHoverStyle: {
color: '#86BC25'
},
itemMarginBottom: 5
},
plotOptions: {
column: {
pointPadding: 0,
borderColor: null,
dataLabels: {
enabled: true,
color: '#000',
format: "{y}",
style: {
textOutline: false
}
},
events: {
legendItemClick: function() {
return false;
}
}
},
series: {
groupPadding: 0.1
}
},
series: [{
name: 'A',
color: '#000',
data: [10000, 34000, 25000, 6000]
}, {
name: 'B',
color: 'blue',
data: [5000, 4000, 10000, 20000]
}, {
name: 'C',
color: '#046A38',
data: [6000, 15000, 5000, 1500]
}, {
name: 'D',
color: 'green',
data: [8700, 12000, 7000, 15000]
}]
});
});
html,
body {
padding: 0;
margin: 0px;
font-family: Helvetica, sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #fff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sd-median-annual-earnings-chart" style="height:450px;width:100%;"></div>
Here is my fiddle: https://jsfiddle.net/Brianing/wtoy7L15/
Use SVGRenderer to add line and text inside charts
chart: {
type: 'column',
backgroundColor: null,
style: {
fontSize: 'inherit',
overflow: 'visible',
width: '100%'
},
events: {
load: function() {
var ren = this.renderer,
stline = ['M', 100, 0, 'L', 340, 0];
ren.label('Label', this.chartWidth - 155, this.chartHeight - 50)
.css({
fontSize: '10px',
color: '#FF0000'
})
.add();
ren.path(stline)
.attr({
'stroke-width': 2,
stroke: '#FF0000'
})
.translate(this.chartWidth - 360, this.chartHeight - 50)
.add();
}
}
},
Note works best on fixed sized containers
$(function() {
Highcharts.chart('sd-median-annual-earnings-chart', {
credits: {
enabled: false
},
chart: {
type: 'column',
backgroundColor: null,
style: {
fontSize: 'inherit',
overflow: 'visible',
width: '100%'
},
events: {
load: function() {
var ren = this.renderer,
stline = ['M', 100, 0, 'L', 340, 0];
ren.label('Label', this.chartWidth - 155, this.chartHeight - 50)
.css({
fontSize: '10px',
color: '#FF0000'
})
.add();
ren.path(stline)
.attr({
'stroke-width': 2,
stroke: '#FF0000'
})
.translate(this.chartWidth - 360, this.chartHeight - 50)
.add();
}
}
},
title: {
text: 'Median Annual Earnings',
style: {
color: '#000',
fontFamily: 'inherit',
fontSize: '1.2em',
fontWeight: 700
}
},
xAxis: {
categories: [
'A',
'B',
'C',
'D'
],
labels: {
overflow: 'justify',
style: {
color: '#000'
}
},
tickWidth: 0
},
yAxis: {
min: 0,
max: 40000,
gridLineColor: '#d6d6d6',
title: {
text: 'Percent',
style: {
color: '#FFFFFF',
fontFamily: 'inherit',
fontSize: 'inherit'
}
},
labels: {
overflow: 'justify',
style: {
color: '#000'
}
},
tickPositioner: function(min, max) {
var each = Highcharts.each,
ticks = [];
for (var i = min; i <= max; i++) {
if (i % 5000 === 0)
ticks.push(i);
}
return ticks;
}
},
tooltip: {
enabled: false
},
legend: {
symbolRadius: 0,
itemStyle: {
color: '#000'
},
itemHoverStyle: {
color: '#86BC25'
},
itemMarginBottom: 5
},
plotOptions: {
column: {
pointPadding: 0,
borderColor: null,
dataLabels: {
enabled: true,
color: '#000',
format: "{y}",
style: {
textOutline: false
}
},
events: {
legendItemClick: function() {
return false;
}
}
},
series: {
groupPadding: 0.1
}
},
series: [{
name: 'A',
color: '#000',
data: [10000, 34000, 25000, 6000]
}, {
name: 'B',
color: 'blue',
data: [5000, 4000, 10000, 20000]
}, {
name: 'C',
color: '#046A38',
data: [6000, 15000, 5000, 1500]
}, {
name: 'D',
color: 'green',
data: [8700, 12000, 7000, 15000]
}]
});
});
html,
body {
padding: 0;
margin: 0px;
font-family: Helvetica, sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #fff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sd-median-annual-earnings-chart" style="width: 600px; height: 250px; margin: 0 auto"></div>
I have an issue displaying the column categories on the xaxis. I can get them to display in the "legend" and the "tooltips".
I have searched for a solution with no result. Can anyone see where I am going wrong.
My code:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Detractors','Passives','Promoters','Not used']
},
yAxis: {
endOnTick: false,
max:101,
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 30,
gridLineColor:'#ddd',
title: {
text: 'Percentage %',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '8px'
}
},
},
tooltip: {
formatter: function() {
return 'Guest responses:<br/> '+ this.y +'%<br/>'+ this.series.name +'<br/>';
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
colors: ['#FF0000','#FF6600','#009900','#333333'],
plotOptions: {
column: {
colorByPoint: false
},
series: {
cursor: 'pointer',
pointWidth: 20,
point: {
events: {
//click: function() {
}
},
legendIndex:0,
dataLabels: {
enabled: true,
color: '#000000',
align: 'center',
cursor: 'pointer',
//borderRadius: 5,
//backgroundColor: 'rgba(252, 255, 255, 255)',
//borderWidth: 1,
//borderColor: '#AAA',
y: -6,
format: '{y:.1f} %', // one decimal
y: -20, // 10 pixels down from the top
style: {
textShadow: false,
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
},
formatter: function() {
return '<b>Guest responses: '+ this.y +'<br/>'+ this.series.name +'%</b>';
}
}
}
},
credits: {
enabled: false
},
lang: {
noData: "No data"
},
noData: {
style: {
fontWeight: 'normal',
fontSize: '12px',
color: '#303030'
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
series: []
}
$.getJSON("../charts/1-2-4-reports_chart.php?TAG=<?php echo $_SESSION['SectionVar'];?>&From=<?php echo $_SESSION['StartDate'];?>&To=<?php echo $_SESSION['EndDate'];?>", function(json) {
options.xAxis.categories = json[0];
options.series[0] = json[0];
options.series[1] = json[1];
options.series[2] = json[2];
options.series[3] = json[3];
chart = new Highcharts.Chart(options);
});
});
Many thanks in advance for your time.
With highcharts, I am seeing an overlapping strange behaviour with stacked columns and "percent". You can see it here http://jsfiddle.net/nqjpkc05/, the code is below.
How could I fix it without changing the data structure?
the html
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
And the js
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
type: 'category',
},
yAxis: {
// min: 0,
//minRange:1,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
grouping: true,
stacking: 'percent',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [{info:'P1',name:0,x:0,y:27},{info:'P2',name:0,x:0,y:8},{info:'P3',name:0,x:0,y:3}]
}, {
name: 'Jane',
data: [{info:'P1',name:1,x:1,y:35},{info:'P2',name:1,x:1,y:6},{info:'P3',name:1,x:1,y:0}]
}, {
name: 'Joe',
data: [{info:'P1',name:2,x:2,y:12},{info:'P2',name:2,x:2,y:5},{info:'P3',name:2,x:2,y:18}]
}]
});
You can move the stack labels on top of the column on load/redraw event - the position can be obtain from point.shapeArgs property.
function positionStackLabels() {
const stacks = this.yAxis[0].stacks.column;
Object.keys(stacks).forEach(s => {
const series = this.series[s];
const topPoint = series.data[0];
stacks[s].label.attr({
y: topPoint.shapeArgs.y - 5
});
});
}
Set events:
chart: {
type: 'column',
events: {
load: positionStackLabels,
redraw: positionStackLabels
}
},
Live example and output
http://jsfiddle.net/mkfn5w15/
I'm styling up a Highchart to match an existing design. I'm however left with a gap between the yAxis and the start of the data. See the example: http://jsfiddle.net/MDGkd/
How can I get the xAxis to start on the yAxis?
var colors = ['#77217b', '#9c50b1', '#e1d0e6', '#f5f0f7', '#f1e9f4'];
$(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'area',
marginLeft: 80,
marginBottom: 80
},
colors: colors,
legend: {
borderRadius: 0,
borderWidth: 0,
itemStyle: {
fontFamily: 'Helvetica',
color: '#000000',
fontSize: '16px'
}
},
title: {
text: 'Historic and Estimated Worldwide Population Distribution by Region',
style: {
fontFamily: 'Helvetica',
color: '#000000',
fontWeight: 'bold',
fontSize: '20px'
},
margin: 45
},
subtitle: {
text: 'Source: Wikipedia.org',
style: {
fontFamily: 'Helvetica',
color: '#000000',
fontSize: '16px'
},
y: 40
},
xAxis: {
startOnTick: true,
min: 0,
max: 6,
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
lineColor: '#000000',
tickmarkPlacement: 'on',
tickLength: 14,
tickWidth: 1,
tickColor: '#000000',
title: {
enabled: false
},
labels: {
style: {
fontFamily: 'Helvetica',
color: '#000000',
fontSize: '12px'
},
align: 'left',
x: -3,
y: 26
}
},
yAxis: {
lineColor: '#000000',
lineWidth: 1,
tickLength: 24,
tickWidth: 1,
tickColor: '#000000',
gridLineWidth: 1,
gridLineColor: '#e8d4ec',
title: {
text: 'Percent',
style: {
fontFamily: 'Helvetica',
color: '#000000'
},
x: -40
},
labels: {
style: {
fontFamily: 'Helvetica',
color: '#000000',
fontSize: '12px'
},
align: 'left',
x: -24,
y: 16
}
},
tooltip: {
backgroundColor: '#000000',
borderRadius: 0,
borderWidth: 0,
shadow: false,
style: {
fontFamily: 'Helvetica',
color: '#ffffff',
fontSize: '11px'
},
//pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
formatter: function () {
var s = '<b>' + this.x + '</b>';
$.each(this.points, function (i, point) {
s += '<br/>' + point.series.name + ': <b>' + Highcharts.numberFormat(point.percentage, 1) + '%</b> (' + point.y + 'millions)';
});
return s;
},
shared: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#8f3ba7',
lineWidth: 2,
marker: {
lineWidth: 0,
lineColor: null,
fillColor: '#000000',
symbol: 'circle'
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}]
});
$.each(chart.series, function (i, val) {
console.log(i, colors[i]);
this.legendSymbol.attr('rx', 0);
this.legendSymbol.attr('ry', 0);
this.legendSymbol.attr('width', 16);
this.legendSymbol.attr('height', 16);
this.legendSymbol.attr('y', 5);
this.legendSymbol.attr('fill', colors[i]);
});
console.log(chart);
});
You want it to look like this?
I achieved this by adjusting the startOnTick and min values.
xAxis: {
startOnTick: false,
min: 0.5,
Fiddle here.