It is currently Fri Nov 28, 2014 12:57 pm Advanced search

Label display in the middle of stacked bar

Technical support, bug reports and more.

Label display in the middle of stacked bar

Postby lla » Thu Feb 23, 2012 5:27 pm

Please help... is there a way to put the label in the center of the stacked bar? my code is below


var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar'
},
title: {
text: 'DSN Network Activity'
},
xAxis: {
//categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
categories: [<?php echo $this->categories; ?>]
},
yAxis: {
//min: Date.UTC(2012, 0, 1),
type: 'datetime',
dateTimeLabelFormats: { //force all formats to be hour:minute:second
second: '%H:%M:%S',
minute: '%H:%M:%S',
hour: '%H:%M:%S',
day: '%H:%M:%S',
week: '%H:%M:%S',
month: '%H:%M:%S',
year: '%H:%M:%S'
}
//min: Date.UTC(2012, 0, 1)
//min: Date.UTC(<?php echo $this->startTime; ?>)
},
tooltip: {
formatter: function() {
console.log(this.point);
var point = this.point;
return '<b>'+ point.category + '</b><br/>'+
'Mission:' + this.series.name + '<br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', point.low) + ' - ' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', point.y);
}
},
legend: {
backgroundColor: Highcharts.theme.legendBackgroundColorSolid || '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter:function() {
return this.series.name ;
}
},
stacking: 'normal',
}
},
series:
[
{name: 'DSS', data: [ {low: Date.UTC(2012,01,21,18,00,00 ), y: Date.UTC(2012, 01, 21, 18,30,00)}]},

{name: 'LRO', data: [ {},
{low: Date.UTC(2012,02-1,21,17,03, 00), y: Date.UTC(2012, 02-1, 21, 19, 02, 00)}]},
{name: 'DSS', data: [ {},
{low: Date.UTC(2012,02-1,21,18,00,00), y: Date.UTC(2012, 02-1, 21, 18, 30, 00)}]},
{name: 'DSS', data: [ {},
{low: Date.UTC(2012, 0, 10, 00,01,59), y: Date.UTC(2012, 4, 28, 00,01,59)}]},
{name: 'LRO', data: [ {},
{low: Date.UTC(2012, 0, 10, 00,01,59), y: Date.UTC(2012, 4, 28, 00,01,59)}]},
{name: 'LRO', data: [ {},
{low: Date.UTC(2012, 0, 10, 00,01,59), y: Date.UTC(2012, 4, 28, 00,01,59)}]},
{name: 'DSS', data: [ {},
{low: Date.UTC(2012, 0, 10, 00,01,59), y: Date.UTC(2012, 4, 28, 00,01,59)}]},

{name: 'DSS', data: [ {},
{},
{low: Date.UTC(2012, 02-1, 21, 18, 00, 00), y: Date.UTC(2012, 02-1, 21, 18, 30, 00)}]},
{name: 'STB', data: [ {},
{},
{low: Date.UTC(2012, 0, 10, 00,01,59), y: Date.UTC(2012, 4, 28, 00,01,59)}]},
{name: 'DSS', data: [ {},
{},
{low: Date.UTC(2012, 0, 10, 00,01,59), y: Date.UTC(2012, 4, 28, 00,01,59)}]},
{name: 'Mo10', data: [ {},
{},
{low: Date.UTC(2012, 0, 10, 00,01,59), y: Date.UTC(2012, 4, 28, 00,01,59)}]},
{name: 'GSSR', data: [ {},
{},
{low: Date.UTC(2012, 0, 10, 00,01,59), y: Date.UTC(2012, 4, 28, 00,01,59)}]
}]
}); //chart = new Highcharts.Chart({
}) //$(document).ready(function() {;
lla
 
Posts: 27
Joined: Wed Feb 22, 2012 5:59 pm

Re: Label display in the middle of stacked bar

Postby Fusher » Thu Feb 23, 2012 5:44 pm

Check this: http://www.highcharts.com/ref/#yAxis-stackLabels and there is 'verticalAlign' with example.
Paweł Fus
Highcharts support team
Fusher
 
Posts: 7520
Joined: Mon Jan 30, 2012 12:16 pm


Return to Highcharts Usage

Who is online

Users browsing this forum: arul_css and 15 guests