We Keep Coding

How to disable the tooltips on a Google Gantt Chart?

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..?!

Contrast chart.js datalabels colors with the background

Using Chart.js qnd Angular.chart, I have a stacked chart in which I'm using different colors, I want to put the number of each value inside the cart, so I'm making use of the Plugin Datalabels.
The problem is that my chart looks like this:
Where I have the dark blue I'd like the numbers to be white. But don't know how to achieve this.
This is my code:
$scope.Options = {
...
plugins: {
datalabels: {
color: '#171d28',
anchor: 'center',
align: 'center',
clamp: true
}
}
};
I tried putting the colors in an array, like this:
$scope.Options = {
...
plugins: {
datalabels: {
//The first 2 colors as dark and the third one as white
color: ['#171d28', '#171d28', '#fff'],
anchor: 'center',
align: 'center',
clamp: true
}
}
};
But this way it apply the changes by bar! not by the color section.
It says in the datalabels page that you can add functions, but not very sure how: Link to datalabels page about color
Any help is welcome, Thanks in advance!

I've found the answer!based in the code from the link I put in the question.
You need the names of the values given in the Series. This is my Series array right now:
$scope.Series = ['Low Blue', 'Blue', 'Strong Blue'];
We need to add a function to the datalabels.color, and in the function we'll indicate how to color the labels of the ones corresponding to "Strong Blue":
plugins: {
datalabels: {
color: function(context) {
var index = context.dataIndex;
var value = context.dataset.data[index];
//Inside the "dataset" we look for the "labels" we are using
//and store them in a variable
var valueWhite = context.dataset.label;
//We make the condition: if a value of the label is "Strong blue"
//then we color this label 'white'
if(valueWhite === 'Strong Blue') {
return value = 'white';
} else {
//If it's any other label, we color it 'black'
return value = '#000';
}
}
}
This way all the sections with a Strong blue as background will have color white, and the rest will be black.

Change border/background in Google Charts AnnotationChart?

I am trying to change the border/background of an AnnotationChart from Google's Chart library. If I use the standard backgroundColor options, the chart fails to render. Per this discussion, it seems that the backgroundColor options available on other chart types aren't directly accessible on the AnnotationChart, but are available through undocumented options. When I try this, though, the chart is unchanged. Below is the code and resulting chart; any ideas?
Without chart option
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
thickness: 1.5,
displayAnnotations: true,
colors: dataColors,
displayZoomButtons: false,
displayExactValues: false,
displayDateBarSeparator: true,
};
chart.draw(data, options);
With:
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
thickness: 1.5,
displayAnnotations: true,
colors: dataColors,
displayZoomButtons: false,
displayExactValues: false,
displayDateBarSeparator: true,
chart: {
backgroundColor: {
fill:'black',
stroke: 'white',
strokeSize: 1
},
chartArea: {
backgroundColor: {
fill: 'blue',
stroke: 'red',
strokeSize: 1
}
}
}
};
chart.draw(data, options);
Either way, graph looks like this:

The background color can be set using it like this. Read the documentation here
Edit your code like this
var options = {
displayAnnotations: true,
displayZoomButtons: false,
displayExactValues: false,
displayDateBarSeparator: true,
chart: {
backgroundColor: 'blue',
chartArea: {
backgroundColor: '#FFF000',
},
},
fill: 50,
};
I tried using strokeWidth and stroke but I think it is not being supported yet or I am using it incorrectly.
Working JSFIDDLE

I've had my own issues with the lack of customization options for Google Charts and one workaround is to use Javascript to modify the SVG after it is generated in order to produce the look you want.
I've put together a quick fiddle based on the template Annotation Chart in the Google Charts Reference, but the applicable lines of code are below. It's not pretty (especially if you're using interactive charts, because this requires a MutationObserver to monitor the SVG for changes) but it works and you might be able to clean it up a lot more.
Note: I've noticed interactions with Google Charts (e.g. zooming and panning) tend to bog down a lot in JSFiddle and Codepen etc for some reason, but they're much smoother when used in the wild!
Annotation Chart Fiddle
My Related SO Question
/* One time recoloring of background after SVG creation - for static charts */
var rects = container.getElementsByTagName("rect")
for(var i=0; i<rects.length; ++i) {
if (rects[i].getAttribute('fill') === '#ffffff') {
rects[i].setAttribute('fill', '#99f');
}
}
/* MutationObserver to monitor any changes to SVG and recolor background - for interactive charts */
var observer = new MutationObserver(function(mutations) {
var rects = container.getElementsByTagName("rect")
for(var i=0; i<rects.length; ++i) {
if (rects[i].getAttribute('fill') === '#ffffff') {
rects[i].setAttribute('fill', '#99f');
}
}
});

Background color to highcharts

I have a requirement and I can't seem to figure out how to do it.
I need to have a background color to my chart but not labels in highcharts.
Is it possible, can anybody help me with this.
Sample link here for chart with a background color.
chart: {
backgroundColor: '#FCFFC5',
type: 'line'
},
jsFiddle
But what I need is:
In this image the area which is covered in red section need to have no background color.

You can set the chart background color and the plot area background color separately:
chart: {
backgroundColor: '#fff',
plotBackgroundColor: '#fcffc5'
}
Updated fiddle:
http://jsfiddle.net/jlbriggs/cfrfjuvz/1/

.highcharts-plot-background is what you are looking for. Add this to your CSS:
.highcharts-plot-background {
fill: #FCFFC5;
}
.highcharts-plot-border {
stroke-width: 2px;
stroke: #7cb5ec;
}
Live example: jsFiddle.

how to change bar hover color of highchart dynamically?

I set bar hover color using below code:
plotOptions: {column: {states: {hover: {color: '#000000'}}}}
But how can I change the bar hover color dynamically?

Simply use point.update(options), where in options you will set new hover color:
chart.series[0].data[0].update({
states: {
hover: {
color: "red"
}
}
});
Demo: http://jsfiddle.net/xoje27rt/

Defined set of colors, when you load charts every time you will experience a different color of hover effect from the given set
var colors= ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'];
var x = Math.floor((Math.random() * 10) );
plotOptions: {
column: {
states: {
hover: {
color: colors[x]
}
}
}
},
And a fiddle link for details
For future continual work, make a button to trigger chart reload

create a chart after some event of a drop down from where you want to get color. something like<select id="idd" onChange="getColor()">
<option value="red">R</option>
<option value="green">G</option>
</select>
I have done a little bit here. will improve it soon.