I took a sample jsfiddle and modified it here just to show a sample of what I experienced:
http://jsfiddle.net/pMwuv/
Here is what my actual datalabel code looks like:
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
color: 'black'
},
formatter: function () {
if (this.x == 19) {
return this.y + '<br>units left';
};
}
}
What I am having on my area chart is that the last data label is cut off. Is there a way to increase the width of the container or add some type of padding so that the full label shows?
Just changing the x and y position of the label will not work for my area chart. I have my chart customized so that only the last point of the chart has a data label and i want it aligned to the right of the last point and not within the chart.
But if we can get the above sample fiddle to work then the same solution should work for me.
You can add marginRight to chart like this:
chart: {
renderTo: container,
width: 550,
marginRight: 35
}
jsFiddle.
This is not a direct solution, but I suggest you to put the label at the yAxis:
yAxis: {
title: {
text: 'Units left'
}
},
And remove the other attributes, leaving just enabled: true:
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
},
See the fiddle
You can set spacingRight and add correct value.
Related
I want to create charts with fixed height, depending on user interaction, some chart can be empty, so there are no legend.
My problem is I want all of them with the same height, and then, if there is legend it's above the chart, this height should be increased by the legend.
I can't get it, it's my try.
options = {
chart: {
zoomType: 'x',
height: 300
},
legend: {
enabled: 'true',
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal',
maxHeight: 50
}
};
As result, what I have is, if there is legend, a 250px chart and if it's not a 300px chart. What I want is always a 300px chart, and if legend, 50px more to contain it.
how can I solve it?
In the chart load event you can use the chart.setSize method to increase the height of the chart by the height of the legend.
function addLegendHeight(chart) {
var legendSpace = chart.legend.legendHeight -
chart.legend.padding;
if (legendSpace) {
chart.setSize(null, chart.chartHeight + legendSpace);
}
}
Highcharts.chart('container', {
chart: {
...,
events: {
load: function() {
addLegendHeight(this);
}
}
},
...
});
Live demo: http://jsfiddle.net/BlackLabel/seqah1by/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#setSize
How can I show labels for each bar in Highcharts as shown in the image below?
I think the solution you are looking is some thing like this.
This canbe achieved using the datalabels and placing them properly at the position you have desired to.
plotOptions: {
column: {
dataLabels: {
enabled: true,
y: 0,
verticalAlign: 'bottom',
inside: true,
color: 'white',
formatter: function(e) {
return this.series.name
}
}
}
},
You can set overflow to 'none' and crop to false to be able to display data labels out of the area plot.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.crop
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.overflow
Example:
http://jsfiddle.net/5m0kkbhf/
Thanks for your help. I have having a heck of a time trying to get something to work which is throwing me for a loop..
As seen in this jsfiddle (code copied below) i have a bar chart with a really long label which is wrapping.
What i am hoping to do i max out the label portion of the chart so that the label doesn't wrap while reducing the size of the actual data chart.
As an example; in the jsfiddle the label is maybe 30% of the total width and the bar data is 70%. Knowing my data, the labels would take up 80% of the width and the data would be in the last 20%.
Thoughts? Thanks, Steven.
$(function () {
$('#container').highcharts({
chart: { type: 'bar' },
xAxis: {
labels: {
style: {
"textOverflow": "none",
}
} ,
categories: ['Jan is the first month of the year and if you have a problem with that', 'Feb is the second']
},
series: [{ data: [29.9, 71.5] }]
});
});
Okay, looks like I got what i was looking for. Hope this helps someone else.
The key for me was setting the maringLeft attribute on the chart:
chart: {
type: 'bar',
marginLeft: 460
},
That, along with modifying the width, 'min-width' and useHTML on the label and lable style for the xAxis (Bar chart)
xAxis: {
categories: ['Short Name', 'Much Longer Location Name and if it is true then cool and if you want'],
labels: {
style: {
width: '400px',
'min-width': '350px'
},
useHTML : true
}
},
Thanks, Steven.
This should be easy, I don't know why its not!
Trying to add a single label to for each of the series in the middle of the area.
So instead of a data label on each point, I just want one in the middle.
http://jsfiddle.net/CgAj2/
dataLabels: {
enabled: true,
align: 'center',
verticalAlign: 'bottom',
formatter: function() {return this.series.name; },
}
Any anyone help with this? I am sure its possible by manually adding as positioning labels, but this seems like a work around.
Thanks!
Not only for the entire series, you can have labels enabled for individual points also,
plotOptions:{
arearspline:{
datalabels: {
enabled: false
}
}
}
in series data:
data: [37707.0, 37031.0, {
y: 37037.0,
dataLabels: {
enabled: true,
formatter: function () {
return this.series.name;
}
}
},
37748.0,
39672.0,
41747.0],
updated your fiddle here: http://jsfiddle.net/CgAj2/1/
hope this will help you
I want to make some tooltips visible in my d3 map. The tooltips are column charts generated by Highcharts regarding the chosen city. The trick is that everything is displaying correctly (axis, labels ...) except that the columns are not visible!
Here my d3 code (only the relevant parts):
var tooltip = d3.select("body")
.append("div")
.attr("id","tooltip")
.style("position", "absolute")
.style("visibility", "hidden");
cities.on("mouseover", function(d, i) {
d3.select(this).style('fill', '#95a5a6');
tooltip.html(zoomCityComm(d))
return tooltip.style("visibility", "visible")})
.on("mousemove", function(d, i){
return tooltip.style("top", (d3.event.pageY - 130) + "px").style("left",(d3.event.pageX - 120) + "px");
})
}
The function zoomCityComm is HighCharts (example of data: [5,10]):
function zoomCityComm(d) {
chart = new Highcharts.Chart({
chart : {
renderTo: 'tooltip',
type: 'column',
width:200,
height:200,
plotBackgroundColor: '#FCFFC5',
zoomType: 'xy'
},
title: {
text: "TOTO"
},
legend: {
enabled: false
},
xAxis: {
categories: ['In','Out']
},
yAxis: {
title: {
text: 'Sum',
style: {
color: '#4572A7'
}
},
labels: {
style: {
color: '#4572A7'
}
},
},
series:[{color: '#4572A7',data: res}]
});
return document.getElementById("tooltip").innerHTML;
}
When the graph is displayed in a "normal" div within the document, it appears correctly.
Sorry if my explanations are not clear but ask me for some details if needed.
Thanks
Cyril
You're setting the HTML content of the div twice, as highcharts renders it itself. In your mouseover handler function, it is enough to do
zoomCityComm(d);
instead of
tooltip.html(zoomCityComm(d));
For the interested, here's what's happening. Setting the HTML of the tooltip div from the return value of the function captures the first animation frame that highchart uses to grow the bars. As it is the first frame, the height of the bars is still 0 -- that is, the bars are there, but not visible because they have essentially no height. Replacing the HTML of the div means that the animation won't work anymore, as the elements that would be animated have been replaced.