CODEWITHSUNDEEP
c3.js
Vishal
Vishal

Reputation: 2346

Adding a watermark to a c3.js chart

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

Answers (2)

SyntaxRules
SyntaxRules

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

mgraham
mgraham

Reputation: 6207

You could get the root div of the chart and add a background-image:

http://jsfiddle.net/z47qk7u1/

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

Related Questions