How to disable the tooltips on a Google Gantt Chart? - javascript

Is there a way to disable the tooltips of a Google Gantt Chart?
The options settings I found as possible solutions don't seem to have an effect with a Gantt Chart
google.charts.load('current', {'packages':['gantt']})
...
chart.draw(data, {
tooltip: { trigger: 'none' },
enableInteractivity: false
});
or the 'workaround' via
chart.draw(data, {
tooltip: { isHtml: true }
});
div.google-visualization-tooltip { display:none }
neither works


Since I don't need any user interaction with the chart I helped myself by simply disabling the pointer events on the chart container div
#chart_div {
pointer-events: none;
}
but there might be a better way via the chart settings..?!

Related

ChartJS - Horizontal Stacked Bar Chart Tooltip being cut off by Bottom of Canvas

I am trying to add multiple lines in the tooltip for my horizontal stacked bar chart but the last couple lines are getting cut off by the end of the chart canvas. Is it possible to make the tooltip extend over the end of the chart canvas?
tooltips: {
mode: 'nearest',
intersect: true,
callbacks: {
footer: function() {
var withBreaks = "Hello World. \n My name is Jennifer. \n What is your name?"
return withBreaks;
},
}
},

Either you can add bottom padding to your canvas
options: {
layout: {
padding: {
bottom: 25 //set that fits the best
}
},
}
Another option is to set the yAlign of tooltip to center, so the tooltip won't occupy the bottom space of the canvas.
options: {
tooltips: {
yAlign: 'center'
}
}

Please have a look at this issue, especially https://github.com/chartjs/Chart.js/issues/622#issuecomment-72480781 comment.
A similar problem was faced here too.

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'
}
}

How to add tooltip background in google chart

To apply the tool-tip background in Google chart,I tried the following CSS code
path
{
fill: #000;
}
But this affected the whole google graph..
How to solve this without using html?

Have you tried to apply for the div.google-visualization-tooltip class ?
And I think you have to also enable the isHtml option on the tooltip
var chart_options = {
title: 'London Olympics Medals',
colors: ['#FFD700', '#C0C0C0', '#8C7853'],
tooltip: { isHtml: true }
};
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#customizing-html-content

NVD3 - removing options for stackedAreaChart

I'm using the stacked area chart in NVD3, but I don't want it to show the three options for Stacked, Stream, and Expanded.
Is there a flag I can pass to remove the UI element to switch between them and pick which one to use?

You can pass .showControls(false) to the model to disable this.

$scope.options = {
chart: {
..
showControls: false,
}
};
Add showControls: false , to your options

Alternatively, if you're using angular-nvd3, you can use CSS.
svg {
.nv-controlsWrap {
display: none;
}
}

(kendoUI chart) Possible to reflow its size with a resizing window?

Here is the settings of the pie chart:
function createChart(chartDataSource) {
$("#chart").kendoChart({
theme:$(document).data("kendoSkin") || "black",
title:{
text:"Efficiency"
},
legend:{
position:"bottom"
},
dataSource:chartDataSource,
series:[
{
type:"pie",
field:"val",
categoryField:"status"
}
],
tooltip:{
visible:true,
template:"${category} - #= kendo.format('{0:P}', percentage)#"
}
});
CSS style:
#chart {
width: 50%;
height: 50%;
}
I know that Highcharts has reflow boolean (reflow example in StackOverflow) did exactly what I want.
I am not sure whether kendoUI chart have the same reflow setting or I should play around with the CSS style. If go for CSS, how to make such setting?
Thanks

Applying my idea in your linked post, just hook the window resize event and redraw the chart:
$(window).resize(function()
{
var chart = $("#chart").data("kendoChart");
chart.refresh();
});
Working fiddle here.

Categories