Request - Add custom watermark to charts

[ReHWolution]

Hi J! I hope you're doing well! I was wondering if there'd be a chance to have a watermark option for charts made with charts.js. I noticed the library actually provides an option through a plug-in. https://github.com/AlbinoDrought/chartjs-plugin-watermark

Do you think it'd be possible to integrate such function for 1.9 or maybe v2.0? :D

[methnen]

Hey @ReHWolution given that plugin's age I suspect it's not gonna work with the current branch of Chart.js.

That said, adding watermarks to a chart should be something that could be worked out with some relatively basic code. If you were to send me a logo you wanted to use and describe where and how you want it positioned I could probably work out something that you could throw in your functions.php file that would do what you want.

[ReHWolution]

That would be fantastic! I'd like something like WCCFTECH does in their charts: https://wccftech.com/review/kfa2-geforce-rtx-3080-ti-exg-12-gb-graphics-card-review-designed-for-gamers-first/6/

A semi-transparent watermark in the background of every chart. This would be the logo: https://drive.google.com/file/d/1vHDXWXaMM-97DOvnkh9XPlWRJzmDOqvy/view?usp=sharing

I was also giving a try to the 1.9 branch of your plugin, the added labels are veeeery useful, any ETA on its release in the main branch? Thanks for always being so supportive!

[methnen]

Logo will need to be in SVG ideally. But I might be able to get it to work properly with a transparent PNG.

Yes, 1.9 will have a variety of good additions more then is currently listed in the 1.9 read me. Chart.js and my understanding of it has improved rapidly which is good. I might find time to push it to a release state in December we'll see. My real work has been pretty crazy lately.

[ReHWolution]

Oh don't mention it, I was just curious 'cause I love your plugin, if I can do anything to speed up your part just lmk. With that said, I can quickly make a .svg version of it if needed. The one I linked is a transparent PNG though :)

[methnen]

So this isn't fancy or anything, but it turns out the easiest way to do this is to simply style the div that contains the canvas object.

You could add something like this to your CSS:

.m-chart-container {
    position: relative;
}

.m-chart-container::after {
    content: '';
    background-image: url(http://localhost/RHW_COL_840.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50%;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

The important magic all happens in the ::after bit.

The url you'll need to point at whatever you want to use for the logo.

The opacity controls how "see through" the image is.

And the background-size handles the size fo the logo.

Note that z-index is important. If it's not set to -1 it'll go overtop of the chart and prevent you from interacting with it. But that does mean it's not actually in front of the chart. It won't prevent someone super determined the steal the chart without attribution but it provides chart branding and if they just take screenshots they'll end up with your logo always in the charts.

There's better ways of doing this I'm sure like inserting the logo into the canvas object (that's what the watermark plugin you noted is supposed to do but I confirmed it no longer works as it hasn't been updated in years).

But this gets the job done.

[ReHWolution]

I just added this snippet to my additional CSS section in my theme (I already have some code for making videos responsive) but unfortunately it doesn't work :(

[methnen]

Give me a URL where I can take a look?

[ReHWolution]

Here there's charts you can look at: https://www.rehwolution.it/reviews/ram/adata-xpg-spectrix-d45g-16-gb-ddr4-3600/7/

[methnen]

Does your m-chart theme apply some background style by any chance?

[ReHWolution]

This is my theme:

<?php

/**
 * Theme Name: ReHWoCharts
 */

return array(
    'colors' => array(
        '#cc1111',
        '#999999',
        '#af0000',
        '#3a3a3a',
        '#000000',
    ),
);

Does it apply a standard background?

[methnen]

Well that was frustrating as heck to figure out. Your content area has a weird z-index value.

Try changing his:

.m-chart-container {
    position: relative;
}

To this:

.m-chart-container {
    position: relative;
    z-index: 0;
}

[ReHWolution]

Yesssss it works! You can see it in action! That is so cool :D

[methnen]

👍