Reputation: 2346
I want to add a watermark to a c3js chart, am not sure where to begin, and would appreciate any pointers in the right direction. Thanks.
Upvotes: 4
Views: 833
Reputation: 2206
Building off mgraham's answer, you can add an text element to the chart's internal svg element.
d3.select(chart.internal.config.bindto).select("svg")
.append("text")
.text(text)
.attr("y","50%")
.attr("x","50%")
.style("fill", "grey")
.style("font-size", "50")
.attr("alignment-baseline", "middle")
.attr("text-anchor", "middle")
Upvotes: 1
Reputation: 6207
You could get the root div of the chart and add a background-image:
d3.select(chart.internal.config.bindto)
.style ("background-image", "url('https://cdn.pixabay.com/photo/2013/07/13/12/42/do-not-copy-160138_960_720.png')")
.style ("background-size", "160px 160px")
.style("background-repeat", "repeat")
;
The trouble is, whatever you do here can be as easily removed as it is added, so if you're using the watermark to stop people copying things then anyone with a modicum of DOM knowledge can get round it. I know I do for all these "we detect you're using an adblocker modals" some sites pop up.
Upvotes: 1