How to display data on hover inside doughnut chart in Angular Chart? - javascript

Hi how to display data on hover inside doughnut chart using Angular Chart
Something like this:

Extend the answer of Alesana from this:
How to add text inside the doughnut chart using Chart.js?
and register an additional plugin service:
Chart.pluginService.register({
beforeTooltipDraw: function(chart) {
if (chart.config.options.elements.center) {
if (chart.tooltip._active && chart.tooltip._active.length > 0) {
chart.config.options.elements.center.text =
chart.tooltip._active[0]._view.label + ':' + chart.tooltip._data.datasets[0].data[chart.tooltip._active[0]._index];
}
}
}
});
For the chart, you may also want to put:
options: {
tooltips: { enabled: false }
}
I know that it may not be a good idea to use _view, _data, etc. Please correct this to a better way to access the label and dataset values.

Related

Highcharts: add custom text bottom left, like credits?

Highcharts can have a customized credits section; and that also has an alignment.
I would like to have both a url on the bottom-right, and a custom text (i.e. the current date/time) on the bottom-left.
What would be the best way to add that, keeping the same look-and-feel as the credits?
Use the SVGRenderer tool to render a custom text.
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
Check the included demo.
EDIT:
Here is a simple example how you can achieve it: https://jsfiddle.net/BlackLabel/x3om10L8/
chart: {
events: {
render() {
let chart = this,
credits = chart.credits,
creditsBB = credits.getBBox();
if (chart.customLabel) {
// keep label responsive
chart.customLabel.destroy();
}
chart.customLabel = chart.renderer.label('my custom text', 0, creditsBB.y - 5).css(credits.styles).add();
}
}
},
API: https://api.highcharts.com/highcharts/chart.events.render

How can I remove the legend symbol for a SINGLE legend in Highcharts?

I'm trying to change a single legend in Highcharts. Since Plot Lines and Bands can't have a legend, I've added an empty series so that when I select/de-select that legend, it would show/hide the plot lines. Since my plot lines are vertical, I used this (code below) as my working around:
legend: {
useHTML: true,
labelFormatter: function() {
if (this.name == "Empty Series") {
return '<div class="my-plot-line-symbol" style="padding-
left: 5px"> '+ this.name + '</div>';
} else {
return this.name;
}
}
},
...with the class being just a left border.
However, I cannot seem to remove the legend assigned to the empty series that I have. Basically it appears like this:
<> | My Plot Lines
(diamond as the default legend, "|" as the "class" I added)
How can I remove the default legend for that single empty series?
Set marker.radius for the empty series to 0:
series: [..., {
name: 'Collar',
type: 'scatter',
marker: {
radius: 0
}
}]
Live demo: http://jsfiddle.net/BlackLabel/uhcnr8mf/
API Reference: https://api.highcharts.com/highcharts/series.scatter.marker.radius
Why are you returning HTML/JSX within the string? You could just simply do this..
return <div>
...
...
...
</div>
Is it not a valid syntax in vue.js? I'm actually working with React JS so maybe I'm wrong but atleast give this thing a try!

How to hide Fields and Strike-through Legends when the data is empty or Zero in Pie/Polar/Doughnut Chart?

Following is my resultant chart
Here the value of legends Happy and Very Happy is 0, hence it is overlapping each other and unable to read. So, How can I hide these values and strike through the legends while loading itself like in the below image? And yes, it is a dynamically loaded chart.
Link - Reference Pie Chart
Thanks in advance.
I am posting this answer hoping that, it will be helpful for someone later. You can also post a better solution if found.
After some deep diving into the library the files, I realised that is there are no direct answers to my question. But we can achieve that by emptying the label text in case of 0 data values.
For that, we must edit the chart options as follows,
public pieChartOptions: ChartOptions = {
responsive: true,
legend: {
position: 'top',
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
const label = ctx.chart.data.labels[ctx.dataIndex];
if (ctx.dataset.data[ctx.dataIndex] > 0)
return label + " : " + ctx.dataset.data[ctx.dataIndex];
else
return "" // retun empty if the data for label is empty
},
}
},
showLines: true,
spanGaps: true,
cutoutPercentage: 1,
rotation: 15, // rotate the chart
};
Here in the function returns empty value in case the data for the corresponding label is 0. Also I rotate the chart 15deg to make the labels horizontal align in most cases.
Reference - Chart.js documentation
Hence I achieved a better view to the user and the overlapping issues are resolved. Thanks.

Add custom parameter to info.contentsFunction

I need to be able to add some custom info to the pie.info.contentsFunction in Zoomcharts. I have multiple charts on the page, each one created like so...
var pc = new PieChart({
pie: {
innerRadius: 0.5,
},
container: chartContainer1,
area: { height: 500 },
data:chartData,
toolbar: {
"fullscreen": true,
"enabled": true
},
info: {
contentsFunction: boomChartTT
}
});
In the "boomChartTT" function I need to know what chart is being hovered upon. I'd like to be able to do something like this...
info: {
contentsFunction: boomChartTT(i)
}
...where 'i' is the index of the chart.
The reason I need to know the chart index is because I have some other data saved in an indexed array for each chart. The index of the chart matches the index of the data.
EXAMPLE: if user hovers on a slice in chart2 I'd want to pass '2' to the boomChartTT function so I can access the totals data for that chart (say, totalsData[2]).
I've done this in the past with other chart libraries by simply adding a data attribute to the chart container to give me the index like so...
<div id="chartContainer1" data-index="1"></div>
...and then I'm able to access the chartContainer from the hover function (contentsFunction) and then get that index.
I don't want to add the totals data to the actual chart data because I'd have to add it to each slice which is redundant.
Is there a way to do this?
Please let me know if my post is unclear.
EDITED TO ADD:
I don't think it matters but here is the boomChartTT function:
function boomChartTT(data,slice){
var tt="<div class=\"charttooltip\">";
if(data.name==="Others" || data.name==="Previous"){return tt+=data.name+"</div>";}
//var thisData=dataSearch(totalsData[i],"REFERRINGSITE",data.id);
tt+="<h5 class=\"strong\">"+data.id+"</h5>"+oHoverTable.render(thisData)+"</div>";
return tt;
}
The commented line is where I would need the index (i) to to get the correct totalsData.
SOLVED. I simply added "chartIndex" to the data like so...
for(var i=0;i<r.length;i++){
var thisDataObj ={
id:r[i].REFERRINGSITE,
value:r[i].PCTOFSALES,
name:r[i].REFERRINGSITE,
chartIndex: arguments[1],//<----- arguments[1] is the chart index
style: { expandable: false, fillColor: dataSearch(dataRSList,"REFERRINGSITE",r[i].REFERRINGSITE)[0].COLOR }
};
chartData.preloaded.subvalues.push(thisDataObj);
}
Then in the boomChartTT function...
function boomChartTT(data,slice){
var tt="<div class=\"charttooltip\">";
if(data.name==="Others" || data.name==="Previous"){return tt+=data.name+"</div>";}
var thisData=dataSearch(totalsData[data.chartIndex-1],"REFERRINGSITE",data.id);
tt+="<h5 class=\"strong\">"+data.id+"</h5>"+oHoverTable.render(thisData)+"</div>";
return tt;
}
I feared that adding custom fields to the chart data would break the chart (which I believe I've experienced with other libraries). So, there you go.

Chart.js bar chart: show tooltip on label hover

I'm using Chart.js library to draw a bar chart and I want to show tooltip not only on bar hover, but also on x-axis label hover for that bar. I found onHover method for configuration, but it only lets me access the array of currently hovered bars, which isn't useful.
So, how can I access mouse event and maybe take position from there to compare it against bar labels positions? Or there is another way to do it?
My current configuration:
const countryChartOptions = {
hover: {
onHover: this.onChartHover,
},
};
const onHover = (activeElements) => {
console.log(activeElements);
};
It only prints out hovered bars data, but I'm stuck to figure out how to extend it for behavior I need.
What about :
options: {
tooltips: {
// Add this..
intersect: false
}
}
It works for me
options: {
tooltips:{
intersect : false,
mode:'index'
}
}

Categories