Highcharts : Put data labels legend inside columns - javascript

I would like to move the datalabels inside the columns.
In the example below, I would like to have October just below the "20" text in column.
How can I do that ?
Here is a working fsfiddle : http://jsfiddle.net/cfu6fe5e/
$(function () {
Highcharts.chart('container', {
chart: {
type: 'column',
backgroundColor:'rgba(255, 255, 255, 0.1)'
},
plotOptions: {
series: {
pointPadding: 0.01,
groupPadding: 0,
}
},
title: {
text: ''
},
colors: [
'#ffffff'
],
credits: {
enabled: false
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
min: 0,
labels: {
enabled: false
},
title: {
text: ''
}
},
series: [{
showInLegend: false,
name: 'Ordered subscriptions',
data: [
['October', 20],
['November', 19],
['December', 10]
],
dataLabels: {
inside: true,
enabled: true,
color: '#376fbb',
align: 'center',
verticalAlign:'bottom',
y: 20,
style: {
width:100,
fontSize: '12px',
fontFamily: 'Avenir'
}
}
}]
});
});


Try Formatter and useHTML
dataLabels: {
inside: true,
enabled: true,
color: '#376fbb',
verticalAlign:'bottom',
formatter: function() {
return '<span style="width:20px;padding-left:15px">' + this.y + '</span><br/> <span style="width:20px;">' +this.point.name + '</span>';
},
y: 10,
useHTML:true,
align: 'center',
style: {
fontSize: '15px',
fontFamily: 'Avenir'
}
}
Fiddle : http://jsfiddle.net/4jfbLouq/


Try something like this
xAxis: {
type: 'category',
labels: {
align: 'left',
x: 0,
y: -2
,
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},

Related

Stack column graph stack labels Highcharts

I am trying to implement stacked bar graph using Highcharts . The problem I am facing is : When the series data for a stack is all null , I want to display 0 as stack label ,but nothing is displayed as stack label .
And setting "minPointLength" to some value , the stack labels are getting overlapped with the stack graph . The distance between stack labels and the stack should vary dynamically but its not happening.
Here's my JSfiddle
https://jsfiddle.net/anandabhishe/6fuffmpt/10/
$(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() {
if (this.total < 1000) {
return '$' + this.total;
} else {
return '$' + (this.total / 1000).toFixed(2) + 'K';
};
}
}
},
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
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
series: {
minPointLength: 20,
pointWidth: 30
}
},
series: [{
name: 'FTE-OpEx ',
data: [null, 30, 40, 70],
pointWidth: 30,
}, {
name: 'FTE-CapEx',
data: [null, 20, 30, 20],
pointWidth: 30
}, {
name: 'AWF-OpEx',
data: [null, 40, 40, 20],
pointWidth: 30
}, {
name: 'AWF-CapEx',
data: [null, 40, 40, 20],
pointWidth: 30
}, {
name: 'HW/SW',
data: [null, 40, 40, 20],
pointWidth: 30
}, {
name: 'Other',
data: [null, 40, 40, 20],
pointWidth: 30
}]
});
});

How to get spacing between border and inner background color of a pie chart using highcharts?

By using the below code i got Pie chart as shown in this link: https://i.stack.imgur.com/WdyYA.png
But i need to get Pie Chart as shown in this link: https://i.stack.imgur.com/EscA8.png
Here is my code:
var highchartGraph = {
bindpieChart : function(percentage_c)
{
$('.piechart').highcharts({
chart: {
spacingBottom: -8,
spacingTop: -8,
spacingLeft: -8,
spacingRight: -8,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
type: 'pie',
width: null,
height: null,
backgroundColor: 'rgba(255, 255, 255, 0)',
},
title: {
text: percentage_c+'%',
align: 'center',
verticalAlign: 'middle',
style: {
color: '#FFF',
fontSize: '18px',
fontFamily: 'arial'
},
y: 3,
x: 20
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {
},
},
states: {
hover: {
enabled: false,
brightness: 0
}
}
},
pie: {
borderWidth: 2,
borderColor: "#6821A5"
}
},
series: [{
name: " ",
colorByPoint: true,
data: [{
name: "Unrestricted",
y: percentage_c,
color: '#6821A5',
tooltip: false
}, {
name: "Restricted",
y: 100 - percentage_c,
color: '#FFF',
dataLabels: {
enabled: false
}
}]
}]
});
}
}

You could add another series that will create the border.
Demo: http://jsfiddle.net/rxp0noj5/
var percentage_c = 75;
$('#container').highcharts({
chart: {
spacingBottom: -8,
spacingTop: -8,
spacingLeft: -8,
spacingRight: -8,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
type: 'pie',
width: null,
height: null,
backgroundColor: 'rgba(255, 255, 255, 0)',
},
title: {
text: percentage_c + '%',
align: 'center',
verticalAlign: 'middle',
style: {
color: '#FFF',
fontSize: '18px',
fontFamily: 'arial'
},
y: 3,
x: 20
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {},
},
states: {
hover: {
enabled: false,
brightness: 0
}
}
},
pie: {
borderWidth: 2,
borderColor: "none"
}
},
series: [{ // series for border
innerSize: '100%',
data: [1],
borderColor: 'red'
},{
size: '95%', // decresed size for padding between pie and border
name: " ",
colorByPoint: true,
data: [{
name: "Unrestricted",
y: percentage_c,
color: '#6821A5',
tooltip: false
}, {
name: "Restricted",
y: 100 - percentage_c,
color: 'none',
dataLabels: {
enabled: false
}
}]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

Highcharts Uncaught TypeError: Cannot read property 'chart' of undefined

I am upgrading from Highcharts 3.0.7 to 4.2.5. Several charts that worked fine in 3.0.7 and throwing this error on reflow. Seems the reflow event is providing the wrong context. The context of the window, so the chart is undefined. Is there a way to fix this context?
Here is the chart code from my environment:
var ChartSize = {
SMALL: {
marginTop: 44,
marginLeft: 26,
marginRight: 26,
height: 226,
width: 290,
yAxis: {
height: 116
},
xAxis: {
plotLines: {
x: -30,
y: -26
},
offset: 32,
labels: {
y: 20,
fontSize: '11px'
},
y: 15
}
},
LARGE: {
marginTop: 75,
marginLeft: 28,
marginRight: 28,
height: 375,
yAxis: {
height: 216
},
xAxis: {
plotLines: {
x: -83,
y: -60
},
offset: 40,
labels: {
y: 25,
fontSize: '12px'
},
y: 20
}
}
}
...
{
chart: {
backgroundColor: 'transparent',
type: 'area',
marginTop: ChartSize[args.size].marginTop,
marginLeft: ChartSize[args.size].marginLeft,
marginRight: ChartSize[args.size].marginRight,
height: ChartSize[args.size].height,
width: ChartSize[args.size].width,
reflow: true,
events: {
load: function() {
that.onChartLoaded(this);
},
redraw: function() {
that.onChartLoaded(this);
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
area: {
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
},
symbol: 'circle'
},
lineWidth: 0
},
series: {
fillOpacity: 1
}
},
title: {
text: '',
margin: 0
},
tooltip: {
formatter: function() {
return that.getTitle(this.y) + "<br/>" + TimeUtil.formatTime(that.getSecondsOffset(this.x), that.timeFormat24Hour);
},
shared: true,
useHTML: true
},
xAxis: [{
type: 'datetime',
tickInterval: 3600 * 1000,
title: {
text: null
},
startOnTick: false,
maxPadding: 0,
min: min,
max: max,
labels: {
y: ChartSize[args.size].xAxis.labels.y,
autoRotation: false,
staggerLines: 1,
style: {
color: '#000000',
fontSize: ChartSize[args.size].xAxis.labels.fontSize
},
formatter: function() {
if (this.isFirst) {
return '<span class="first-time-label" ' + that.firstLabelStyle + '>' + TimeUtil.formatTime(that.getSecondsOffset(min), that.timeFormat24Hour) + '</span>';
} else if (this.isLast) {
var style = that.timeFormat24Hour ? 'style="margin-left: 6px"' : '';
return '<span class="last-time-label" style="margin-left: -5px" ' + that.lastLabelStyle + '>' + TimeUtil.formatTime(that.getSecondsOffset(max), that.timeFormat24Hour) + '</span>';
}
return '<a href="javascript:void(0)" style="color:#898989; font-size: 12px" title="'
+ TimeUtil.formatTime(that.getSecondsOffset(this.value), that.timeFormat24Hour) + '">●</a>';
},
useHTML: true
},
tickWidth: 0,
plotLines: [{
color: '#282828',
dashStyle: 'ShortDash',
value: sleepTime.getTime(),
width: 2,
label: {
text: '<div class="sleep-time-placeholder bed-time"></div>',
useHTML: true,
rotation: 0,
textAlign: 'left',
x: ChartSize[args.size].xAxis.plotLines.x,
y: ChartSize[args.size].xAxis.plotLines.y,
style: {
fontFamily: "'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif"
}
},
zIndex: 5,
padding: 0.5
},
{
color: '#282828',
dashStyle: 'ShortDash',
value: wakeTime.getTime(),
width: 2,
label: {
text: '<div class="awake-time-placeholder wake-time"></div>',
useHTML: true,
rotation: 0,
textAlign: 'left',
x: ChartSize[args.size].xAxis.plotLines.x,
y: ChartSize[args.size].xAxis.plotLines.y,
style: {
fontFamily: "'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif"
}
},
zIndex: 5
}]
},
{
type: 'datetime',
title: {
text: null
},
lineColor: '#C5C5C5',
linkedTo: 0,
offset: ChartSize[args.size].xAxis.offset,
startOnTick: true,
min: min,
labels: {
autoRotation: false,
align: 'left',
staggerLines: 1,
useHTML: true,
style: {
color: '#000000',
fontSize: ChartSize[args.size].xAxis.labels.fontSize
},
formatter: function() {
if(this.isLast) {
return '';
}
var date = DateParser.parseEpoch(this.value);
var dateStr = DateFormatter.formatMonthDay(date);
return '<span class="timeline_label">' + dateStr.toUpperCase() + '</span>';
},
y: ChartSize[args.size].xAxis.y
},
tickWidth: 1,
tickPosition: 'inside',
tickPositions: [ min, midnightTime.getTime(), max ]
}],
yAxis: [ {
gridLineColor: '#E6E6E6',
labels: {
enabled: false
},
title: {
text: ''
},
lineWidth: 0,
max: 3,
tickInterval: 1
} ],
legend: {
enabled: false
}
}
}

Creating a 1D chart using Highcharts

How do you create a one dimensional scatter plot like the one used at HBR site:
When I tried to replicate the same after going through the JS files of HBR, I'm getting the following :
I need to eliminate the second grid line on the y axis.
Below is the JS code I'm using :
$(function () {
$('#highchart').highcharts({
credits: {
enabled: !1
},
chart: {
type: "scatter",
height: 140,
width: 580,
renderTo: "chart"
},
title: {
style: {
color: "#000",
fontFamily: "Helvetica, Arial, sans-serif",
fontSize: "12px",
fontWeight: "bold",
textTransform: "uppercase",
whiteSpace: "normal"
},
text: "Test"
},
legend: {
text: null,
useHTML: !0,
x: 20,
align: "center",
itemStyle: {
color: "#000",
fontFamily: "Stationery, Helvetica, Arial, sans-serif",
fontSize: "8px",
fontWeight: "normal",
lineHeight: "10px",
textTransform: "uppercase"
},
borderWidth: 1,
enabled: !0,
itemMarginTop: 0,
itemMarginBottom: 0,
layout: "horizontal",
verticalAlign: "bottom"
},
xAxis: {
title: {
text: null,
},
min: 0,
max: 5,
labels: {
enabled: !1
},
tickLength: 0,
lineWidth: 0
},
yAxis: [{
max: 0,
min : 0,
minRange :0.1,
maxPadding: .01,
lineWidth: 0,
tickWidth: 2,
tickLength: 6,
labels: {
y: 3
},
title: {
text: "Opportunity for<br/>development",
rotation: 0,
align: "middle",
offset: 50,
style: {
color: "#000",
fontFamily: "Stationery, Helvetica, Arial, sans-serif",
fontSize: "10px",
fontWeight: "normal",
lineHeight: "10px",
textTransform: "uppercase"
}
},
labels: {
enabled: !1
},
tickWidth: 0,
tickLength: 0,
maxPadding: 0,
padding: 30,
gridLineWidth: 2
}, {
title: {
text: "Strength",
rotation: 0,
align: "middle",
offset: 50
},
opposite: !0
}],
plotOptions: {
scatter: {
events: {
legendItemClick: function () {
return !1
}
},
marker: {
radius: 8,
states: {
hover: {
enabled: !0
}
},
symbol: "circle"
},
tooltip: {
fontFamily: "Stationery, Helvetica, Arial, sans-serif",
headerFormat: "<b>{series.name}</b><br>",
pointFormat: "{point.x} out of 25"
}
}
},
series: [{
name: "How you scored",
color: "#4cb6e8",
data: [[3, 0]],
}, {
name: "Average",
color: "#b20303",
data: [[4, 0]],
zIndex: 8,
marker: {
symbol: "diamond"
}
}],
});
});

Use tickInterval option for yAxis object with a bigger value than (max-min) value
yAxis: [{
max: 0,
min: 0,
//...
tickInterval: 1, // put any number bigger than (max-min) value
JSFiddle demo

Highcharts separate datalabels per series

I have the following high charts:
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'scatter',
zoomType: 'xy'
},
title: { text: 'Report' },
xAxis: { title: { enabled: true, text: 'Score' },
startOnTick: true, endOnTick: true, showLastLabel: true, min: -10, max: 11 },
yAxis: { title: { text: 'Question', align: 'left' }, min: 0, max: 27, reversed: true, categories: categories, labels: {enabled: true}},
tooltip: { formatter: function() { return '' + this.x +' score'; } },
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 320,
y: 35,
floating: true,
backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF',
borderWidth: 1,
width: 200,
height: 200
},
plotOptions: {
linewidth: 10,
series: {
shadow: true,
dataLabels: {
enabled: true,
align: 'center',
verticalAlign: 'bottom',
rotate: 0,
formatter: function() {
return '<b style="color:gray">' + this.point.x + '</b>';
},
style: {
color: '#000',
font: 'bold 18px "Trebuchet MS", Verdana, sans-serif;'
},
x:-25,
y:7
}
},
scatter: {
marker: {
enable: false,
radius: 15,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
id:'def',
name: 'def',
color: 'rgba(223, 83, 83, .5)',
data: [[10,2],[9,3],[9,4],[5,5],[6,6],[7,7],[9,8],[8,9],[9,11],[7,12],[6,13],[8,14],[7,15],[8,16],[6,18],[8,19],[9,20],[7,22],[6,23],[9,25],[9,26]]
}, {
id:'abc',
name: 'abc',
color: 'rgba(119, 152, 191, .5)',
data: [[6,2],[3.5,3],[7.5,4],[9,5],[3.5,6],[5,7],[9,8],[5,9],[8.5,11],[8.5,12],[8.5,13],[-1,14],[10,15],[8,16],[7.5,18],[7,19],[7,20],[5,22],[8,23],[7,25],[6.5,26]]
}]
});
I want to have different styles for the datalabels, so abc pulls to the left (using x parameter) and def pulls to the right.
Currently it's set globally for both.
If i try:
chart.series[1].options.dataLabels.x=25;
chart.redraw()
Nothing happens, datalabel is the same.
Any ideas on how to do this?

You can format data labels for each series as in this example:
Setting series-level data label options
$(function () {
$('#container').highcharts({
chart: {
marginRight: 50
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, {
dataLabels: {
enabled: true,
align: 'left',
crop: false,
style: {
fontWeight: 'bold'
},
x: 3,
verticalAlign: 'middle'
},
y: 54.4
}]
}]
});
});

I know that its too late for answer but it can help to someone else.
You can do that by defining x value of each series's data label.
Here is the JS Fiddle:-
data: [{
color: Highcharts.getOptions().colors[0],
y: 100,
name:'A',
yAxis: 0,
dataLabels: {
enabled: true,
style: {
fontWeight: 'bold'
},
x: 60,
},
},
{
...
}
]

Categories