Add Watermark to a chart (React)

Add Watermark to a chart (React)

Posted by: igelfenbeyn on 18 December 2020, 1:05 pm EST

• 

  igelfenbeyn

  • Post Options:
  • Link
    Copy

  Posted 18 December 2020, 1:05 pm EST

  Hello,
  
  is there a way to add watermark to pie and bar charts. Something like “Internal Use Only”.

  Thank you

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 22 December 2020, 6:06 pm EST

  Hi,

  You may use the rendered event to add the watermark. Please refer to the following code snippet and the sample demonstrating the same:

  chart.rendered.addHandler((s, e) => {
        let engine = chart.renderEngine,
          watermarkStr = "Internal Use Only";
        engine.fontSize = "32px";
        engine.textFill = "rgba(255, 0, 0, 0.5)";
        let strSize = engine.measureString(watermarkStr);
        engine.drawString(
          watermarkStr,
          new wjCore.Point(
            s.hostElement.clientWidth / 2 - strSize.width / 2,
            s.hostElement.clientHeight / 2 - strSize.height / 2
          )
        );
      });
  

  https://codesandbox.io/s/wijmo-react-forked-gpq5c?file=/src/App.js

  Regards