Printing chartjs tooltips - chart.js

I have a chartjs doughnut chart which is displaying fine, but when printed as a pdf, the tooltips don't show.
I've tried targeting .tooltip class within an #media print{} block, but this didn't work. I tried some implementation with custom property in the tooltip options but nothing I've tried worked at all.
Does anyone have a solution, where the tooltips will either always persist, or can be persisted when printing the HTML page to a pdf?
Thanks,

I think you might be better off using the data labels plugin, will give your chart a cleaner look instead of having a tooltip active for each element: https://chartjs-plugin-datalabels.netlify.app/samples/charts/doughnut.html

Related

Always Enable Tooltip : Chart JS : V3 : Bubble Chart : react-chartjs-2

I am trying to always enable all the tooltips for Bubble chart using react-charjs-2 plugin
I tried various approaches but none of them work with the latest version of the plugin
Would appreciate some advice, Thank you! :)
I tried the all possible approaches, including the following ones, but was unable to achieve the results
Tried the following:
Chart JS: Always show tooltips in a multi dataset line chart
By default it is not possible to show all the tooltips at once, if you really want it you will need to use the external (html) tooltip.
The easyer way is to use the datalabels plugin: https://chartjs-plugin-datalabels.netlify.app/samples/charts/bubble.html

Google Charts not displaying names on yaxis

I'm having a mare trying to get names to appear alongside data on a google bar chart. It should be simple!! Looking at the examples I should not have to add any options at all, they should appear by default but they dont. Even when I copy/paste the examples from
https://developers.google.com/chart/interactive/docs/gallery/barchart
They render without the names against the rows. Can anyone take a guess as to why that might be?
If I position the vAxis.textposition as 'in' then they DO appear in the bars, but when I put them to 'out' they dont. I've configured the text colour to be black in case they're writing in white, but they still will NOT appear.
Any help or ideas gratefully received
This was because I had a style that was being applied within the generated chart HTML. Even though the rest of the content looked fine, the sizing meant the labels were not generated

Horizontal scrollbar in APEX 4.2.1 Classic report

To enable horizontal scrollbars in a table I need to style the containing DIV with "overflow: auto", highlighted in blue.
I tried it with FireBug and got the desired result. Just can't figure out out how to put the setting into APEX.
Using the theme "Blue Responsive".
I've played with this a bit in Apex 4.2.2, it should work the same in 4.2.1 I think. That particular div doesn't come from any template but you can target it with some CSS.
In the page properties, for CSS Inline, I entered the following and it seemed to work:
#report_2583625959157728_catch {overflow:auto}
(I think I've transcribed the correct id from your screenshot - you may need to check)
Unfortunately this means you'd have to do this for each report in your application individually where you want the scrollbar to appear.
Note: I haven't tested this in IE, however - last time I was mucking around with scrolling areas I found it incredibly frustrating to get it working in IE without breaking other functionality in the region - especially for Interactive reports.
You can add to Region Header:
<div style="overflow:auto;">
and to Region Footer
</div>
You can also add your css line to a report region template, if you want the scrollbar to be added to each report.
Other wise you're better of putting the overflow on a class and add it to your application's stylesheet, eg:
.myClass {overflow:auto}
you get more flexibilty to style your region this way. You can add the class to your report by setting the region attributes to class="myClass".
Note that instead of "auto", you can also try to use the element option "scroll", check the w3schools docs: http://www.w3schools.com/cssref/pr_pos_overflow.asp

Bar chart with values placed on the chart instead of in tooltip

i'm trying to create some charts with google charts api. I need a bar chart with values placed directly on the chart (not on the tooltip which is set by default). I know that it was possible in Image Charts (which are now deprecated). Is there any way to achive a similar result in Google Charts? I will be grateful for any help or advice...
Here are some examples of what i want to achieve:
No, there isn't. See the answer in this question.
Quote follows:
This feature is not currently supported. The only way to implement it is to write some fancy javascript to create it.
I am no pro at working with SVG with javascript, and won't pretend to be. I'll let you know what I found out with Firebug, and share that.
Using this chart I inspected the SVG element that's created. It has 5 different <g> (I'm assuming group) elements.
g[1] contains information on the title.
g[2] contains the legend
g[3] contains the chart information (sub-groups with the chart
area, gridlines, series, axis label values, etc.) -- when a point is
selected, this shows the circle/double-circle for that point too
g[4] contains axis titles
g[5] contains the tooltips in two separate groups, but only on
mouseover
Here is the function in the code that gets triggered when you mouseover a point:
Y.Ov=function(a,b,c){a=new kv(a);var d=this.Mf.pk(Wj);b=b[zc](sd);d[w](this.Mf[sb](b[0]));for(var e=1;e<b[L];++e)d[w](this.Mf.pk(ti)),d[w](this.Mf[sb](b[e]));Qt(d,c);a.t()[w](d);a.Zz(100);a.Yz(100);this.on[y](a);return a};Y.appendChild=function(a,b){if(b){var c;if(b[Bc]==Sv){if(!b.Th())return;c=b.t()}else c=b;a.t()[w](c)}};Y.replaceChild=function(a,b,c){a.t().replaceChild(b,c);Cu(c)};Y.Fg=function(a){a.Th()&&this.xs(a.t())};Y.xs=function(a){this.Mf.Fg(a)};Y.ds=function(a){this.Mf.removeNode(a);Cu(a)};
This probably doesn't help you. I can't find any easy way to create a workaround for this (oh-so-needed) feature. Sorry there's no solution yet!

Google Charts (JS) - is there a way of using a transparent background on a chart?

I'm using the Google Charts API to include various graphs on a webapp I'm working on. I'm using the javascript chart tools (not the image chart tools), and am wondering if it's possible to use a transparent background on a chart (e.g. line graph, pie chart, etc.)?
In the Configuration Options of the chart, specify
backgroundColor: { fill:'transparent' }
This worked for me in Chrome and Firefox.
It took me some time to find out. The doc page says you can only put in HTML color strings and I assumed 'transparent' was not one of them.
Setting a transparent background for Google Charts:
// Set chart options
var options = {'title':'Chart Title',
'width':600,
'height':300,
'backgroundColor': 'transparent',
'is3D':true
};
JSFIDDLE DEMO
backgroundColor: "00000000" worked for me.
If nothing works for you try locating the background rectangle at the end of your drawChart() function and add the fill-opacity attribute.
fill-opacity="0.0"
Example:
$('#mychart').find('svg rect:eq( 1 )').attr('fill-opacity','0.0');
Use the eq:() selector to select the rectangle you want to be transparent.
On the left of the cart there is a dropdown arrow - click that, and go to "cop chart".
When you paste the chart, you can still choose to link it, and it will paste with the background transparent.