Sometimes the data label is getting shown inside of the bar.
For example in the given jsfiddle for the bar for 'Asia' the data label is showing inside the bar itself.
Is there any way to display the data labels always outside of the bar.
http://jsfiddle.net/n3me6r8k/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Year 2012',
data: [1052, 954, 4250, 740, 38]
}]
});
Yes, it could be done by setting two params more in your dataLabels configuration, namely:
dataLabels: {
enabled: true,
crop: false,
overflow: "none"
}
Normally, Highcharts will move label inside the bar when it could be cropped by frame of div. Configuration above, allows you to set that labels will not be cropped, even they are out of chart container.
JSFiddle: http://jsfiddle.net/daniel_s/8m1b4arv/
API reference: http://api.highcharts.com/highcharts/series%3Cbar%3E.dataLabels.crop
Related
I have a highcharts chart representing some kind of a bar control. It is defined the following way:
chart = new Highcharts.Chart({
credits: {enabled: false},
chart: {
renderTo: container,
type: 'column'
},
legend: { enabled : false },
title: {
text: title
},
xAxis: {
title: {
enabled: false,
},
min: -500,
max: 500
},
yAxis: {
enabled: false,
title: {
enabled: false
},
labels: {
enabled: false
},
gridLineWidth: 0
},
tooltip: {
formatter: function() {
return this.x + ' MW';
},
style: {
fontSize: '8px',
padding: '0px'
},
hideDelay: 200
},
plotOptions: {
scatter: {
marker: {
radius: 4,
lineWidth: 0,
fillColor: color,
}
}
},
series: [{
name: '--',
type: 'scatter',
data: points,
color: graphColor_9
}]
});
and looks approximatively like this:
When a cursor hovers over a marker it becomes bigger, see the one on the picture, actually there is a cursor over it. But if I continue moving a cursor inside a marker it returns to the original size after some timeout. I would like a marker to stay big all the time while a cursor is inside. Is it possible?
I'm generating a series of highcharts and then exporting them to a pdf via jsPDF. They display fine on screen, but when I export an image of the graphs, it duplicates the X axis category labels.
Here is my chart code:
$('#chart').highcharts({
chart: {
type: 'column',
spacingBottom: 0,
spacingTop: 20,
spacingLeft: 0,
spacingRight: 0
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
title: {
text: null
},
legend: {
enabled: false
},
xAxis: {
categories: ['Sales Performance',],
labels: {
style: {
color: '#000'
}
}
},
yAxis: {
title: {
text: null
},
labels: {
format: '{value}%',
overflow: 'justify',
style: {
color: '#000'
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: '% Change',
color: '#c0504d',
data: [4.5]
}]
});
And an example of the issue: http://jsfiddle.net/212qb8qs/
Any ideas???
UPDATE:
The issue was with canvg converting the svg. Solved thanks to this comment: When using canvg to convert Highchart SVG into PNG, all text appears twice - how to solve?
Well, from your jsfiddle, you use canvg along with highcharts to get a canvas and then convert to PDF what you get. The problem comes from canvg wich seems to handle a bit strangely the tspan that are used in the SVG generated by highcharts (mostly for titles).
So I redirect you to my answer in another question here , where you'll find a dirty fix for that.
I have a relatively simple (highcharts) barchart and I'm wondering if it's possible to add a small image at the end of each bar (currently where the number is). It needs to be a different image for each bar.
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Some Chart'
},
xAxis: {
categories: ['Archimedes','Curie','Darwin','Hawking','Newton','Pasteur'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Score',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' percent'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Group Team Performance',
data: [
{name: 'Archimedes', color: '#fe3932', y: 70},
{name: 'Curie', color: '#28d44e', y:66},
{name: 'Darwin', color: '#fce621',y:46},
{name: 'Hawking', color: '#003969', y:66},
{name: 'Newton', color: '#00afd5', y:64},
{name: 'Pasteur', color: '#b14fe0', y:56}
]
}
]
});
});
I've created a quick fiddle - http://jsfiddle.net/vou3uyyf/1/
Any help would be greatly appreciated!
Please see below code for chart.
It is not displaying colors properly as defined in the js.
When I run this js in jsfiddle, it does show me correct colors.
jQuery(document).ready(function () {
var my_chart = {
chart: {
renderTo: 'divTotalOpenPositionsGraph',
type: 'column',
marginLeft: 13, marginBottom: 30,marginTop:5,
fontFamily: 'Arial,Helvetica,sans-serif',
},
credits: {
enabled: false
},
title: {
text: 'Open Position'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
colorByPoint: true,
borderWidth: 0,
animation: {
duration: 5000
},
dataLabels:{
enabled:true,
formatter:function(){
if(this.y > 0)
return this.y;
}
}
}
},
series: [{
name: 'Positions',
data: [6,9]
}],
colors: [
'#f89422',
'#8cc641'
],
xAxis: {
categories: ['Internship','Employment'],
labels: {
enabled: true
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
}
},
};
new Highcharts.Chart(my_chart);
});
Can anyone please correct me on this? I need orange color in first column and green in second column.
Thank you in advanced.
I came across some syntax errors, but as a result I reproduced your example here:
http://jsfiddle.net/WVgDM/
Colors are as you described.
http://jsfiddle.net/gabrielesandoval/efHq7/
Is there a way to fill in the gap between the y-axis and the first point. The first point on my chart should be "25 years" and i would like the area between 0 and 25 to be filled in as well. Even if the tooltip doesn't work for that point, I would just like to visually show that the values between 0 and the first point.
I tried adding a point with a x value of zero but that didnt work. The only area charts I have seen where there is no gap between the two axis and the area are examples where the chart is inverted. Is there a proper way to do this?
Current Code:
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Monthly Comparison'
},
subtitle: {
text: '1 vs 2'
},
xAxis: {
min: 0,
categories: [0, '25 years', '30 years', '35 years', '40 years', '45 years']
},
yAxis: {
labels: {
formatter: function() {
return '$' + this.value;
}
},
min: 0,
title: {
text: 'Cost'
}
},
tooltip: {
shared: true,
valuePrefix: '$'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
area: {
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
type: 'area',
name: 'series1',
data: [['',60],['25 years',60], ['30 years',60], ['35 years',60], ['40 years',60], ['45 years',60]]
}, {
type: 'area',
name: 'series2',
data: [['',90], ['25 years',100], ['30 years',175], ['35 years',300], ['40 years',400], ['45 years',400]]
}]
});
});
You should set minPadding/maxPadding as 0, but these parameters doesn't work with categories. So you need to use numeric xAxis, instead of categories.