We Keep Coding

Add custom buttons in Angular Highcharts Line Chart

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

ChartJS doughnut legend click

I have a problem with custom onClick function on doughnut chart.
The only thing I need is to override default legend onClick function calling the original one + my custom code.
Following their official documentation and this suggestion on github page I wrote this js
var defaultLegendClickHandler = Chart.defaults.doughnut.legend.onClick;
var newLegendClickHandler = function (e, legendItem) {
console.log(legendItem);
defaultLegendClickHandler.call(this, e, legendItem);
};
Then I associate it to the onClick option (JSfiddle here) but it is not working. It seems that the legendItem variable is always an empty array so the default click function does nothing.

Your JSfiddle looks fine except that the newLegendClickHandler is defined at the wrong place inside options. You should define it inside legend as follows.
legend: {
position: 'top',
onClick: newLegendClickHandler
},
Please also check Custom On Click Actions from Chart.js
documentation

The click handler was set to the chart itself and not the legend. Move the new onClick handler inside of the legend options.
var options = {
cutoutPercentage: 20,
responsive: true,
legend: {
position: 'top',
onClick: newLegendClickHandler,
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
}
};

Highcharts: get an event before drilldown?

I have the following JS code...
data: [
{
name: 'Active',
y: 20,
events: {
//onClick:
click: function (event) {
LoadTable(tableData, event);
}
},
drilldown: 'Active'
}
]
But the event does not fire up if the drilldown is there... Is that by design? I need to have the drilldown so I can load the Active data on the chart but I need to also call the LoadTable function first...
I tried to put an alert("test") but not even that worked....
Any idea?
Thanks!

Use the drilldown event.
events: {
drilldown: function (e) {
alert("drillDown Event");
See fiddle here

Rename legend on export in highchart

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." });
}
}
}
}
}

How to display a multi-line title in a Highslide pop-up while using Highcharts?

I'm using Highcharts to display a chart and I'm using Highslide to display additional information in a pop-up when the user clicks on a point in the chart. However, I want to add additional information to the title/heading-text in the pop-up.
I've gotten Highslide to work in displaying basic information using the following code:
$(function () {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
}
credits: {
enabled: false
}
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
this.y +' visits',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: []
}
});
I've read through the API for Highslide and saw that you could use the 'heading' variable with the 'Expander.prototype.onAfterGetHeading' function, which I've displayed below, but I'm not sure how to implement it with Highcharts.
hs.Expander.prototype.onAfterGetHeading = function () {
this.heading.html = 'this.a.title';
}
HERE's a site that displays a pop-up with a multi-line title in a Highslide pop-up, as an example. However, keep in mind that I'm trying to implement this in Highcharts, possibly with dynamic text in the title.
Thanks.

Here’s a solution you can use with Highcharts: http://jsfiddle.net/roadrash/gd3xz/
Please note that this is the correct code to insert the anchor's title text in the heading, as an additional heading text:
hs.Expander.prototype.onAfterGetHeading = function (sender) {
if (sender.heading) {
sender.heading.innerHTML += this.a.title;
}
};
I’m not familiar with Highcharts, but I don’t think you can use this.a.title since a refers to the anchor tag. You can of course insert something else than this.a.title with the above code, as I've done in my demo.