I'd like to change the placement of the "exporting" buttons. In the moment they are positioned at the top right, and thus hiding pieces of a longer title. I'd like to change that, but don't see in the references a parameter for that.
Thanks for any hints!
There are many options to style buttons, you just have to take a look the reference.
Using exporting, you can directly style the button, like:
exporting: {
buttons: {
exportButton: {
align: 'left',
x: 40
}
}
}
demo
Using navigation you can style all buttons:
navigation: {
buttonOptions: {
align: 'center'
}
}
demo
Reference:
http://api.highcharts.com/highstock#exporting.buttons.exportButton
Ricardo's answer is almost correct. I believe the syntax has changed since he answered.
exporting button documentation
exporting: {
buttons: {
contextButton: {
align: 'left',
x: 0,
y: 380,
verticalAlign: 'top'
}
}
},
This works for me:
exporting: {
buttons: {
contextButton: {
align: 'center',
x: 50
}
}
},
You can use x/y or align parameter: ExportButton Align
Related
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/
I am trying to use HighCharts in Angular2 using typescripts.
I am trying to format my legend text, with image to show up next to it. HighChart legend has labelFormatter property to provide callback function.
http://api.highcharts.com/highcharts#legend.labelFormatter
Callback function to format each of the series' labels. The this
keyword refers to the series object, or the point object in case of
pie charts. By default the series or point name is printed.
But I dont know how to pass callback function in typescripts to labelFormatter property.
updateChart(): void {
let newOptions = {
legend: {
useHTML: true,
itemMarginBottom: 10,
enabled: true,
floating: true,
align: 'center',
verticalAlign: 'top',
labelFormatter: (s) => this.getLegendLabel(s),
y: 35
}
}
}
getLegendLabel(seriesDetails) {
console.log(seriesDetails);
}
But I am getting undefined for seriesDetails object.
and if I used this keyword anywhere it refers to that component rather than series information.
According to the documentation:
Callback function to format each of the series' labels. The this
keyword refers to the series object, or the point object in case of
pie charts. By default the series or point name is printed.
I guess you've got wrong "this" in the fat arrow function. IMHO the simpliest way just follow documentation syntax (jsfiddle):
labelFormatter: function () {
return this.name + ' (click to hide)';
}
You should write your code like this:
updateChart(): void {
let newOptions = {
legend: {
useHTML: true,
itemMarginBottom: 10,
enabled: true,
floating: true,
align: 'center',
verticalAlign: 'top',
labelFormatter: this.getLegendLabel,
y: 35
}
}
}
getLegendLabel() {
console.log(this);
}
It will produce the following JS code and will work as you expect (Test is my classname):
Test.prototype.updateChart = function () {
var newOptions = {
legend: {
useHTML: true,
itemMarginBottom: 10,
enabled: true,
floating: true,
align: 'center',
verticalAlign: 'top',
labelFormatter: this.getLegendLabel,
y: 35
}
};
};
Test.prototype.getLegendLabel = function () {
console.log(this);
};
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'm doing some highcharts and I use 40×40 images as the legend labels. However, the legend symbols are vertically top-aligned. (fiddle)
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical',
labelFormatter: function () {
return $('<div>').append($('<img>').attr('src', 'http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png').css({
height: 40,
width: 40
})).html();
},
useHTML: true
}
Is there some easy way to vertically center-align the legend symbols?
You can wrap positionItem function, to post-translate items to be in the middle: http://jsfiddle.net/6fgMp/3/
(function(H){
H.wrap(H.Legend.prototype, 'positionItem', function(proceed, item){
proceed.call(this, item);
if(item.legendSymbol) {
item.legendSymbol.translate(0, 10);
}
if(item.legendLine){
item.legendLine.translate(0, 10);
}
});
})(Highcharts);
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.