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
}
};
Related
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 want to change the direction of my tab's tooltip.
I want to make it align to the top.
My code is like this :
var toolTip = 'test';
var panelExpertCharts = Ext.create('ContainerListChartExpert', {
chartList: chartList,
layout: standardLayout,
idIndicator: idIndicator,
idOrganisation: organisationObj.id,
title: chartList[0].titleExpert,
closable: true,
tabConfig: {
tooltip: toolTip
}
});
Thanks for reply.
Hamza.
Hi you can change a tooltip alignment in the following way
listeners: {
render: function(c) {
new Ext.ToolTip({
target: 'trackCallout',
anchor: 'right',
html: 'Test Tooltip'
});
}
}
You can check a very good example here from sencha .
I have enabled my pie chart to have multiple sections selected. (Not yet got it working as I want it though). Open SO questions here
But once I get this done, I would like to return the list of selected sections everytime a change in made in any selection.
Can someone please suggest. !!
My COde:
series: [{
name: 'Departments',
// allowPointSelect : true,
slicedOffset: 0,
states: {
select: {
color: 'red'
}
},
point: {
events: {
click: function(event){
//this.slice(null);
this.select(null, true);
filterCharts(cloneDonutData.Departments, dChart.series[0].name,this.name);
//console.log(this.series[0].chart.getSelectedPoints());
}
}
} ,
data: ....
]
USe: http://api.highcharts.com/highcharts#Chart.getSelectedPoints
getSelectedPoints () Since 1.2.0
Returns an array of all currently selected points in the chart. Points can be selected either programmatically by the point.select() method or by clicking.
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/
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.