I have a chart with values that are uneven, ie: First value is 1315 and second value is 1, and so on, and when displaying the chart the labels are being overlapped. I have already searched in multiple forums but no one had the exact same problem. Here's a fiddle to see the problem: http://jsfiddle.net/6LutjLc3/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Issue']
},
yAxis: {
min: 0,
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: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: 'John',
data: [1235]
}, {
name: 'Toto',
data: [2]
}, {
name: 'Matt',
data: [1]
}, {
name: 'Jane',
data: [72]
}, {
name: 'Joe',
data: [3]
}]
});
});
What I need to code is to give the value 1 one box where the label fits in as like any other example in highchart.
Thanks in advance for your help!
If your client demands use of this style of graph you can get better looking results by modifying your dataLabel settings. Setting overflow to false and adding a formatter function that only returns a value if it's let's say at least 7% (or whatever percentage works best for you) of the current total will help. See the following:
dataLabels: {
enabled: true,
overflow: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
},
formatter: function () {
if (this.percentage >= 7) return this.y;
}
}
Fiddle here: http://jsfiddle.net/6LutjLc3/4/
Related
I'm currently working with Highcharts columnrange and I need to add stack label on top of each column/each month in order to show Total Number of Hours our Store is being Opened.. But sadly, I've tried different ways and still no joy.
Here's the current jsfiddle that I have;
http://jsfiddle.net/rds_a/0mLa0yd5/2/
Here's the code;
$(function () {
$('#container').highcharts({
data: {
table: 'summary'
},
chart: {
type: 'columnrange'
},
colors: ['black', 'orange'],
title: {
text: 'Jackstone Store'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Units'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
plotOptions: {
columnrange: {
grouping: false,
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
}
});
});
I have a highstock column chart which doesn't show all of the values - I've tried to simplify it as much as possible for this example. I'm using highstock because I need a horizontal scroll bar on the column.
$('#container').highcharts({
tooltip: {
formatter: function () {
if (this.y === '' && this.y !== 0) {
return this.series.name + '<br/>' + this.x + ': NO DATA';
}
return this.series.name + '<br/>' + this.x + ': ' + this.y;
}
},
chart: {
type: 'column'
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: labels,
title: {
text: null
},
labels: {
style: {
color: '#000',
}
},
lineWidth: 2,
lineColor: '#000',
tickWidth: 2,
tickLength: 12,
tickColor: '#000',
startOnTick: true,
},
yAxis: {
title: {
text: 'test',
align: 'middle',
style: {
color: '#000',
}
},
labels:{enabled: false},
style: {
color: '#000',
},
gridLineColor: 'transparent',
lineWidth: 2,
lineColor: '#000',
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100,
floating: false,
borderWidth: 0,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: series
});
Here is a fiddle: https://jsfiddle.net/ypw4gx1h/
Some data labels are not showing because they would be overlapping nearby data labels. With a column chart dataLabels.allowOverlap is set to false by default. You could change this to true in your code like this (JSFiddle example):
plotOptions: {
series: {
dataLabels: {
enabled: true,
allowOverlap: true
}
}
}
I have a highcharts stacked barchart that has a few values that are extremely low. This causes the two dataLabels to overlap, like this fiddle: http://jsfiddle.net/cerjps88/
What is the best means to ensure that the labels can't overlap?
Here's my highchart code:
function getCostStackedColumnChart(series) {
function costFilterPluck(costCollection, propertyName) {
return _.chain(costCollection)
.filter(function (f){
return Math.abs(f.metric_mean_patient_cost) > 0 && Math.abs(f.metric_mean_patient_cost_rx) > 0
})
.pluck(propertyName)
.take(10)
.value();
}
function shapeCostData(costCollection) {
return [
{
name: 'RxCost Per Prescription',
color: '#1aadce',
data: costFilterPluck(series, 'metric_mean_patient_cost_rx')
},
{
name: 'Retail Price Per Prescription (2014)',
color: '#00FFFF',
data: costFilterPluck(series, 'metric_drug_price_rx')
}
];
}
return {
options: {
chart: {
type: 'column'
},
tooltip: {
formatter: function () {
var format = d3.format(",.2f");
var chart = this.point.series.chart;
var index = chart.xAxis[0].categories.indexOf(this.x);
var series1 = this.point.series;
return '<b>' + this.x + '</b><br/>' +
series1.name + ': $' + format(this.y);
}
},
showInLegend: true,
plotOptions: {
column: {
grouping: true,
stacking: 'normal',
dataLabels: {
enabled: true,
allowOverlap: false,
format: '${y:,.2f}',
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black',
style: {
fontWeight: 'bold',
textShadow: '0 0 3px white'
},
}
}
}
},
xAxis: {
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
},
categories: costFilterPluck(series, 'aedrug_label'),
title: {text: 'Drug'}
},
yAxis: {
min: 0,
title: {
text: 'Total Cost Per Prescription'
}
},
tooltip: {
shared: true
},
title: {
text: drugGroupName + ' RxCost'
},
series: shapeCostData(series)
};
}
The newest version of highcharts automatically hides overlapping labels. After upgrading the new version, the issue was resolved.
I'm making a dashboard using node.js, socket.io and highcharts.
I want my chart to update dynamically on receiving a request from socket.io.
How do I do that?
Here is my client side code,
<script>
var socket=io();
var sales=0;
var e1tcount=0;
var e1scount=0;
var e2tcount=0;
var e2scount=0;
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
events: {
load: function(){
socket.on('response', function(arr){
$('#c1').html(arr[0]);
sales+=arr[2];
$('#sales').html(sales);
if(arr[1]=="CT")
{
e1tcount++;
$('#e1t').html(e1tcount);
e1scount+=arr[2];
$('#e1s').html(e1scount);
//Tried this, doesnt work
var sold=chart.series[0].data[0].y;
chart.series[0].data[0].update(sold+1);
}
if(arr[1]=="AB")
{
e2tcount++;
$('#e2t').html(e2tcount);
e2scount+=arr[2];
$('#e2s').html(e2scount);
}
});
}
}
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Event 1', 'Event 2']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
colors: ['#FFCC99','#3366CC'],
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
series: [{
name: 'Sold',
data: [0, 0]
}, {
name: 'Available',
data: [20, 20]
}]
});
});
</script>
Intially the number of tickets is 20, but as soon as I post data using curl, the number of sold tickets should increase and available tickets should decrease, depending on the event.
How do I go about?
And what error do you have in console? ;) I guess somethng about 'cannot read property of udefined'. You need to create chart variable first, then you can use that variable, right? So:
$('#container').highcharts({
chart: {
type: 'column',
events: {
load: function(){
var chart = this; // create chart variable for future use
socket.on('response', function(arr){
Then that code should work:
//Tried this, doesnt work
var sold=chart.series[0].data[0].y;
chart.series[0].data[0].update(sold+1);
If this won't be enough, then copy&paste errors here.
I'm working with a stacked column chart from jQuery HighCharts like this. (fiddle link)
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
series: [{
name: 'John',
data: [null, null, 4, 7, 2]
}, {
name: 'Jane',
data: [null,null, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
As you can see there's the total number above each column of the total of the number. But I need something else. I want my first bar to be 100%. And then I need to calculate the percentage of the other 2 columns and place those numbers above the column. How can I make them dynamic?
What you can do here is extend the point properties and add in a new field that gets shown in the dataLabels. You would need to preprocess what these percentages would be of course. The following example assumes you have already calculated the percentage values:
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.perc} %'
}
}
}
The point.perc is the point's perc property we made up and it contains the percentage values you calculated already.
In the data array you can have this format:
series: [{
data: [{y: 29.9, perc: 100}, {y:71., perc: 50}, {y:106.4, perc: 30}, {y:129.2, perc: 20}]
}]
Live demo here.