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);
}
}
}
Related
Below is the highchart application iam working.In mounted i will call axios post that will fetch x axis lables as array.But the x axis categories of highchart is not updating with the given array
Below is the code
<template>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="container" style="min-width: 100%; max-width:100%; height: 600px; margin: 0 auto"></div>
</div>
</div>
</div>
</template>
<script>
var $ = require('../../node_modules/jquery/dist/jquery.js')
var Highcharts = require('highcharts')
// Load module after Highcharts is loaded
require('highcharts/modules/exporting')(Highcharts)
// Create the chart
$(function () {
Highcharts.chart('container', {
chart: {
marginTop: 120,
marginBottom: 100,
type: 'bar'
},
credits: {enabled: false},
exporting: {enabled: false},
legend: {
enabled: true,
layout: 'vertical',
backgroundColor: '#FFFFFF',
floating: true,
align: 'right',
verticalAlign: 'bottom',
margin: 50,
reversed: true
},
title: {text: null},
tooltip: {},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'viewers',
color: '#006666',
pointWidth: 40,
data: [8, 16]
}, {
name: 'calls',
color: '#00FF00',
pointWidth: 40,
data: [7, 14]
}, {
name: 'chats',
color: '#FF8C00',
pointWidth: 40,
data: [8, 16]
}],
xAxis: {
categories: [],
labels: {
overflow: 'right',
display: 'block',
align: 'left',
x: 5,
style: {
fontSize: '1em',
color: '#000',
width: '500px'
}
}
},
yAxis: {
min: 0,
allowDecimals: false,
title: {
text: ''
}
}
})
})
export default {
data () {
return {
}
},
mounted () {
//will fetch labels from db
var arr = ['computers', 'games']
this.catList = arr
}
}
</script>
<style scoped>
.container{
margin: 0 auto;
}
#container{
margin: 0 auto;
min-width: 100%;
padding: 0;
max-width:100%;
height: 400px;
margin: 0 auto;
}
</style>
Please give solution to above problem.
To make categories reactive, you should put Highchart code inside component
Note that in xAxis config, we need to put categories: this.categories
new Vue({
el: '#app',
data() {
return {
chart: null,
categories: []
}
},
mounted() {
this.drawChart()
// example after pull data
var arr = ['computers', 'games']
const vm = this;
setTimeout(function() {
vm.categories = arr
vm.drawChart()
}, 2000)
},
methods: {
drawChart() {
if (this.chart) {
this.chart.destroy();
}
this.chart = Highcharts.chart('container', {
chart: {
marginTop: 120,
marginBottom: 100,
type: 'bar'
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
legend: {
enabled: true,
layout: 'vertical',
backgroundColor: '#FFFFFF',
floating: true,
align: 'right',
verticalAlign: 'bottom',
margin: 50,
reversed: true
},
title: {
text: null
},
tooltip: {},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'viewers',
color: '#006666',
pointWidth: 40,
data: [8, 16]
}, {
name: 'calls',
color: '#00FF00',
pointWidth: 40,
data: [7, 14]
}, {
name: 'chats',
color: '#FF8C00',
pointWidth: 40,
data: [8, 16]
}],
xAxis: {
categories: this.categories,
labels: {
overflow: 'right',
display: 'block',
align: 'left',
x: 5,
style: {
fontSize: '1em',
color: '#000',
width: '500px'
}
}
},
yAxis: {
min: 0,
allowDecimals: false,
title: {
text: ''
}
}
})
}
}
})
Working example: https://jsfiddle.net/a9eqd8th/
Following code generate the heatmaps side by side.
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<script>
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container1',
type: 'heatmap',
zoomType:'x',
plotWidth:400,
plotHeight:400
},
title: {
text: 'HeatMap1'
},
xAxis: {
categories: ['11230', '11231', '11232', '11233', '11234', '11235']
},
yAxis: {
categories: ['11230', '11231', '11232', '11233', '11234', '11235'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
plotOptions:{
series:{
turboThreshold: 0
}
},
series: [{}]
};
$.getJSON('sample1.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container2',
type: 'heatmap',
zoomType:'x',
plotWidth:400,
plotHeight:400
},
title: {
text: 'HeatMap2'
},
xAxis: {
categories: ['11230', '11231', '11232', '11233', '11234', '11235']
},
yAxis: {
categories: ['11230', '11231', '11232', '11233', '11234', '11235'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
plotOptions:{
series:{
turboThreshold: 0
}
},
series: [{}]
};
$.getJSON('sample2.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<table>
<tr>
<td><div id="container1" style="width: 300px; height: 300px; margin: 0 auto"></div></td>
<td><div id="container2" style="width: 300px; height: 300px; margin: 0 auto"></div></td>
</tr>
</table>
</body>
</html>
But how can i merge two heat map into one plot sharing same x-axis.
Try doing multiple y axis in same pane like this
yAxis: [
{
opposite : false,
title: {
text: 'HeatMap1'
},
top: 0
},{
opposite : false,
title: {
text: 'HeatMap2'
},
top: 30
}]
Hi I am facing problem of making navigator on Highstock charts to work as they freeze when I use jQuery ui slider tabs with it. I am not able to debug it as I can't find any error. Any help on debugging or error that might be causing it would be greatly appreciated.My code looks like this:
"<link rel="stylesheet" href="/sites/all/libraries/InterestHighcharts/jquery_slider/styles/jquery.sliderTabs.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js'></script>
<?php
print '<div id="mySliderTabs">
<ul>';
for ($i=1;$i<=5;$i++)
{ $j=$i-1;
$tab_title=$tab_titles_arr[$j];
$tab_title_len=strlen($tab_title);
if($tab_title_len > 7)
{
print'<li style="font-size:11px; font-family:Arial,Helvetica,sans-serif; font-weight:bold;">'.substr($tab_title,0,6).'</li>';
}
else
{
print'<li style="font-size:11px; font-family:Arial,Helvetica,sans-serif; font-weight:bold;">'.$tab_title.'</li>';
}
}
print '</ul>';
for($i=1;$i<=5;$i++)
{
print '<div id="container'.$i.'" style="height:375px !important; width:540px !important; margin-left:-10px !important;">Problem reading the charts</div>';
}
print '</div>';
?>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript">
(function($) {
for (i=1;i<=tabs_count;i++)
{ var j=i-1;
var flag_test=flagAr[i];
$('#container'+i).highcharts('StockChart', {
chart: {
borderColor: '#000000',
height:390,
width:550,
marginLeft:-3,
marginTop:13,
events: {
load: function() {
this.renderer.image('http://www.interest.co.nz/sites/all/libraries/InterestHighcharts/images/Interest_logo.gif', 170, 75, 200, 100).add(); // add image(url, x, y, w, h)
},
}
},
credits: {
enabled: true,
itemStyle: {
cursor: 'pointer',
color: '#000000',
fontSize: '11px',
fontWeight:'bold'
},
position: {
align: 'right',
x:-60,
verticalAlign: 'bottom',
y:-100
},
text: 'Source:'+source_arr[j],
href: source_hyperlink_arr[j]
},
rangeSelector : {
selected : 1,
inputEnabled : false,
buttonTheme: {
display: 'none',
},
labelStyle: {
color: 'transparent',
},
buttons: [{
type: 'day',
count: 12,
text: '1d'
}, {
type: 'week',
count: 3,
text: '3w'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}]
},
title : {
text : chart_title_arr[j],
x:-220,
style: {
fontFamily:'Arial,Helvetica,sans-serif',
fontWeight:'bold'
}
},
subtitle : {
text : chart_subtitles_arr[j],
floating:true,
x:-120,
y:15,
style: {
fontFamily:'Arial,Helvetica,sans-serif'
}
},
tooltip : {
valueDecimals : 2,
headerFormat:'<span style="font-size: 10px; margin-left:20px;">{point.key}</span><br/>',
pointFormat: '<span style="color:#FF0000; font-weight:bold">{point.y}</span><br/>'
},
xAxis: {
type: 'datetime',
lineWidth: 20,
gridLineColor:'#FAFFFF',
gridLineDashStyle:'Dot',
dateTimeLabelFormats: {
day: '%e-%b',
week: '%e-%b',
month: '%b-%y',
year: '%Y'
},
events: {
setExtremes: function(e) {
if (e.trigger === "navigator") {
var max=e.max+padding_value;
var x=this;
setTimeout(function(){
x.setExtremes(e.min,max);
}, 4);
}
}
},
max:xpad[i],
labels: {
style: {
color: 'black',
fontSize: '10px',
fontWeight:'bold',
fontFamily:'Arial,Helvetica,sans-serif',
},
y:3, //to pull x-axis label down
},
//showLastLabel:false,
},
yAxis: {
opposite: true,
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value,setdecimalpoints(this.value));
},
style: {
color: 'black',
fontSize: '10px',
fontWeight:'normal'
},
y:-12,
}
},
series : [{
data : finalAr[i],
id: 'dataseries',
lineWidth:3,
zIndex:9999,
shadow:{
width:3,
color:'#000000',
opacity:.7
},
lineColor:'#FF0000',
type : 'area',
dataGrouping:{
dateTimeLabelFormats: {
day: ['%b-%e,%Y'],
week: ['%e-%b'],
month:['%b-%y'],
year: ['%Y']
}
},
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[8]],
[1, 'rgba(255,255,255,0)']
]
}
},
{
type: 'flags',
useHTML: true,
name: 'Flags on series',
data: JSON.parse("["+flag_test+"]"),
onSeries: 'dataseries',
shape: "url(http://www.interest.co.nz/sites/all/libraries/InterestHighcharts/images/balloon.jpg)",
width : 5,
y: -33
}],
navigator : {
adaptToUpdatedData: true,
enabled:true,
xAxis: {
labels:
{
enabled: false,
}
},
height: 50,
margin:-2,
series: {
lineColor:'#FF0000',
type : 'area',
fillColor : '#FFFFFF'
}
},
scrollbar: {
liveRedraw: false,
},
});
}
})(jQuery);
</script>
<script src="/sites/all/libraries/InterestHighcharts/jquery_slider/jquery.sliderTabs.min.js"></script>
<script type="text/javascript">
jQuery("#mySliderTabs").sliderTabs();
//jQuery("div#mySliderTabs").sliderTabs();
</script>
</div>"
I am trying to generate multi axes graph uding highchart as below.
But its not working, array generation and all are quite fine.
If i hardcode totalNoOfLabels and totalLabelsSize then its working. Please suggest:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
$(function () {
var result=[{"date":"2013-05-01","propertiesList": {"labelsCount":"14","totalSize":"62.62"}},{"date":"2013-05-04","propertiesList":{"labelsCount":"4","totalSize":"22.43"}},{"date":"2013-05-03","propertiesList":{"labelsCount":"7","totalSize":"34.09"}},{"date":"2013-05-02","propertiesList":{"labelsCount":"13","totalSize":"67.51"}},{"date":"2013-05-05","propertiesList":{"labelsCount":"3","totalSize":"11.65"}}];
var totalNoOfLabels=[];
var totalLabelsSize=[];
var dates=[];
dailyStatList = JSON.stringify(result);
var statsObj = $.parseJSON(dailyStatList);
$.each(statsObj, function() {
dates.push(this.date);
totalNoOfLabels.push(this.propertiesList.labelsCount);
totalLabelsSize.push(this.propertiesList.totalSize);
});
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Info'
},
xAxis: [{
categories: dates
}],
yAxis: [{ // Primary yAxis
labels: {
style: {
color: '#89A54E'
}
},
title: {
text: 'No of labels',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Size ',
style: {
color: '#4572A7'
}
},
labels: {
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Labels',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: totalNoOfLabels
}, {
name: 'Size',
color: '#89A54E',
type: 'spline',
data: totalLabelsSize
}]
});
});
labelsCount and totalSize should be numbers, not strings. Parse that values, or put in JSON as numbers and will work properly.
I am new to this forum and have two questions.
I just want know if we can remove the gap behind the axis in High Charts. I haven't found any option in the API.
How to get the series label in single line.
I am not able to post the image as I am a new user.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: ''
},
xAxis: {
gridLineWidth: 0,
categories: ['Deutsche-FR Bank', 'Barelays-LDN', 'HSBC-SG', 'Citi-NY'],
minorTickLength: 0,
tickLength: 0,
labels: {
align: 'left',
x: 2,
y: 7,
color: '#2257D6',
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
text: null
}
},
yAxis: {
min: 0,
gridLineWidth: 0,
title: {
text: '',
align: 'high',
color: '#333'
},
labels: {
enabled: false,
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +'';
}
},
plotOptions: {
bar: {
borderWidth: 0.0,
pointWidth: 22,
dataLabels: {
enabled: false
}
},
series: {
shadow: false
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: false,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true,
visible : false,
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Count',
data: [82,323,245,350],
color: '#2AAA00',
borderWidth: 0,
plotShadow: false,
plotBorderWidth: 0
}]
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width:220px;height:145px;overflow:auto"></div>
</body>
How to get the series label in single line
For this, you need to use the property Rotation as
rotation: 90
Check the API.
Setting this property also answers your question 1.
Here you find the Demo