I know highcharts makes it possible to update a legend by using the following function:
chart.legend.allItems[0].update({name:'aaa'});
Also the possibility to hide or show the legends on export are working.
exporting:{
chartOptions:{
legend:{
enabled:true
}
}
}
But now, I like to rename a specific legend during export. Is there any way to bind the update code to the export-function in Highcharts?
Update series in the chart.events.load event, for example:
exporting: {
chartOptions: {
chart: {
events: {
load: function (e) {
this.series[0].update({ name: "New name." });
}
}
}
}
}
Related
I'm trying to add 2 custom buttons in Angular Highcharts Line chart in the exporting property
exporting: {
enabled: true,
buttons: {
customButton: {
text: 'Custom Button',
click: () => {
alert('You pressed the button!');
},
},
anotherButton: {
text: 'Another Button',
click: () => {
alert('You pressed another button!');
},
},
},
}
But these 2 buttons not displaying. What could be the missing logic here?
Stackblitz
Hi think the below snippet will help you:
chart: {
type: "line",
renderTo: "chart",
events: {
render(events) {
let chart = this;
if (chart.customButton) {
chart.customButton.destroy();
}
chart.customButton = chart.renderer
.button("custom button", 100, 40, () => {
console.log("clicked.....");
chart.exportChart({
type: "application/pdf",
filename: "line-chart"
});
})
.add();
}
}
}
Here on click the button, you can implement the export. The example here exports PDF.
Demo:
https://stackblitz.com/edit/highcharts-angular-functionality?file=src%2Fapp%2Fstackoverflow%2Fhigh-chart-question%2Fhigh-chart-question.component.ts
https://highcharts-angular-functionality.stackblitz.io/exportcolor
Hope this helps.
The exporting.buttons is an option to edit the buttons in the exporting menu only: https://api.highcharts.com/highcharts/exporting.buttons
To render the custom buttons use the SVGRenderer feature: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button
You can add those buttons in the render callback - calls after initial load and after each redraw: https://api.highcharts.com/highcharts/chart.events.render
how can I hide a specific pie from a states when I'm clicking on this states ?
For example on this map :
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/map-pies/
series: [{
mapData: Highcharts.maps['countries/us/us-all'],
data: data,
name: 'States',
....
events: {
click: function (e) {
e.point.zoomTo();
chart.update({
-- hide the state's pie
-- display data from serie on this specific state
})
}
}
I would like to hide California's Pie and zoom on this states to display an other serie of data instead (point for example)...
Thanks a lot for your help !
You need to find the right series and use setVisible metohd:
events: {
click: function(e) {
e.point.zoomTo();
Highcharts.find(chart.series, function(item) {
return item.name === e.point.id;
}).setVisible(false, false);
}
}
Live demo: https://jsfiddle.net/BlackLabel/czav0kL3/
API: https://api.highcharts.com/class-reference/Highcharts.Series#setVisible
I try to draw some lines (paths) into a Highcharts-Chart. When exporting the chart, the lines should be a little different. Therefore I created a Highcharts-Function, which I call on »load« and »redraw«. I just need to pass one little argument when calling the function, but this doesn´t work. How can I pass the argument?
Here´s the relevant code detail:
Highcharts.linien = function (r) { //generating the lines with my r-argument }
...
chart: {
events: {
load: Highcharts.linien(0)
}
exporting: {
chartOptions: {
chart: {
events: {
load: Highcharts.linien(15)
}
}
}
And here´s a working jsFiddle without using the argument.
Besides: If anyone has a clue, how to destroy my svg-group (linienGruppe) on »redraw«, I would also be very grateful!
There should be:
chart: {
events: {
load: function(){
Highcharts.linien.call(this, 0);
}
}
}
exporting: {
chartOptions: {
chart: {
events: {
load: function(){
Highcharts.linien.call(this, 15);
}
}
}
}
}
So, using call() you can pass on this object to your function.
And regarding destroying group, first store somewhere your group, so later you can destroy that object, like this:
if(this.linienGruppe) {
this.linienGruppe.destroy();
}
this.linienGruppe = linienGruppe;
And working demo: http://jsfiddle.net/t3ywb3gq/4/
Highcharts.linien(0) & Highcharts.linien(15) are both function executions/invocations and not handlers. A handler is a function itself. Since you want to pass a parameter, I suggest you create an inline anonymous function with one line that calls your created method with appropriate arguments like below;
chart: {
events: {
load: function(){
Highcharts.linien(0);
}
}
exporting: {
chartOptions: {
chart: {
events: {
load: function(){
Highcharts.linien(15);
}
}
}
}
updated jsFiddle
actually I work with highcharts and I would like to ask if I can add some tooltip to the custom buttons of highcharts.
Therefore I added to my chart the following code:
exporting: {
buttons: {
customButton: {
x: -62,
onclick: function () {
$("[data-toggle='tooltip']").tooltip();
},
symbol: 'circle'
}
}
},
But unfortunately the onclick function doesn't trigger a tooltip.
I would be very happy, if you can help me.
Thank you in advance.
Greets
$("button").click(function(){
$("selector").attr("alt","tooltipvalue");
});
I have an highchart and I create an export generated picture with the export function.
How can I make is so that the legend of the hidden series are not shown at all (I donøt want them greyed out) in the export?
I've tried this but it hides only the text, the symbol is still there.
exporting: { //the export button
type: 'image/jpeg',
chartOptions: {
legend: {
enabled: true,
itemHiddenStyle: {
display: 'none',
}
}
}
},...
I have also seen this answer: Filtering legend of a Highcharts by only visible series
but I need it done ONLY in export. That will remove it from the screen too.
In your case you will have empty item, better is using load event and destroy series which are not visible.
exporting: { //the export button
type: 'image/jpeg',
chartOptions: {
chart: {
events: {
load: function () {
var chart = this;
$.each(chart.series,function(i,serie) {
if(!serie.visible) {
serie.update({
showInLegend:false
});
}
});
}
}
}
}
},
See the example: http://jsfiddle.net/DMJf5/3/