Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
How to change the background color of a tooltip for a pie chart?
I tried editing the theme json file. I was able to edit the caption font colour and the background colour of the caption but not the main background colour behind behind share, region etc.
Any help greatly appreciated.
got this working by below
.qv-object-piechart .qv-viz-disclaimer {
color: #6908ac;
}
.qv-object-piechart .qv-viz-center-disclaimer {
color: #6908ac;
}
Hello Karthik,
as a last resort you could try to add an "empty" extension that only injects css into the page (will atleast use up one tile). Something like:
define( ["qlik", "jquery" ],function ( qlik, $ ) {
return {
paint: function (element, layout) {
var color = 'red'; // maybe put this into setting?
var tooltipFix =
'<style id="tooltipFix">' +
'.qvt-chart-tooltip {background-color: ' + color + ' !important; }' +
'.qv-chart-tooltip-content table {background: ' + color + ' !important; }' +
'.qvt-chart-tooltip .immidiate-contextual-arrow { border-color: ' + color + ' !important; }' +
'</style>';
if($('#tooltipFix').length == 0)
$('head').append(tooltipFix);
$(element).html('loaded');
}
};
} );
Or maybe just add the css-properties to your theme.css if you're able to modify it?
Mathias
is this typo correct .qv-chart-tooltip-content table ?
I don't think there's a typo, this extension should work as is.
Although I just realized you should switch
'.qvt-chart-tooltip .immidiate-contextual-arrow { border-color: ' + color + ' !important; }' +
with
'.qvt-chart-tooltip .immidiate-contextual-arrow { border-bottom: 10px solid ' + color +' !important; }' +
if you want a real down-arrow.
Mathias
Thanks Mathias. I need to be able to edit the current tooltip code rather than creating an extension. I will continue my search?
One more question: Is it possible to change the formatting of 'Condition Unfulfilled' message for a pie chart?
You stated that you modified your theme.json. If you're able to do that try adding the following to your theme.css:
.qvt-chart-tooltip {background-color: red !important; }
.qv-chart-tooltip-content table {background: red !important; }
.qvt-chart-tooltip .immidiate-contextual-arrow { border-bottom: 10px solid red !important; }
Yes this is also possible via CSS:
.qv-object-piechart .object-error-message { background: red; }
Mathias
Applied your code. Thanks. Red colour is not getting picked up for share background. Blue colour is eventually the one I want the entire tooltip to be.
Hmm, maybe you're not on September 2017 yet and thats why its different.
Try adding div#qs-chart-tooltip * { background: red !important; }
If that does not work you should use the Chrome Developer Tools to manually modify the css and see what kind of styles to apply.
Mathias
That worked. Thanks a lot. One more question if you don't mind:
Can we change the font colour and style of the error message returned(screenshot above) for a pie chart?
Try:
.qv-object-piechart .qv-viz-center-disclaimer { background: red !important; }
Mathias