How can I export jqxChart to PNG with a custom watermark and current timestamp i

[sandeParticipant]

Hi everyone, I am working on an internal admin dashboard with Chart.

I am currently trying to solve this: How can I export jqxChart to PNG with a custom watermark and current timestamp in an Angular dashboard?

So far, I can reproduce it consistently in a small demo, but some edge cases break expected behavior.

Any practical example I can follow?

[adminKeymaster]

Hi sande,

Please, look at the approach below:

<jqxChart #chartRef [source]="data" [seriesGroups]="seriesGroups"></jqxChart>

<button (click)="exportChart()">Export PNG</button>

import { ViewChild, ElementRef } from '@angular/core';

export class ChartComponent {
  @ViewChild('chartRef', { static: false }) chart: any;

  exportChart(): void {
    // jqxChart instance
    const chartInstance = this.chart?.getInstance?.();

    if (!chartInstance) return;

    // Small delay ensures full render (fixes edge-case blank exports)
    setTimeout(() => {
      chartInstance.saveAsPNG('chart.png', () => {
        // callback runs AFTER export trigger
      });

      // Alternative (more controllable):
      this.exportWithWatermark(chartInstance);
    }, 200);
  }

  private exportWithWatermark(chartInstance: any): void {
    chartInstance.getImage({}, (base64Img: string) => {
      const img = new Image();

      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d')!;

        canvas.width = img.width;
        canvas.height = img.height;

        // 1. Draw chart image
        ctx.drawImage(img, 0, 0);

        // 2. Watermark styling
        const timestamp = new Date().toISOString();
        const watermarkText = <code>Internal Dashboard • ${timestamp}</code>;

        ctx.font = '14px Arial';
        ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
        ctx.textAlign = 'right';

        // bottom-right watermark
        ctx.fillText(
          watermarkText,
          canvas.width - 20,
          canvas.height - 20
        );

        // optional center watermark
        ctx.textAlign = 'center';
        ctx.fillStyle = 'rgba(255, 255, 255, 0.15)';
        ctx.font = '28px Arial';
        ctx.fillText(
          'CONFIDENTIAL',
          canvas.width / 2,
          canvas.height / 2
        );

        // 3. Trigger download
        const link = document.createElement('a');
        link.href = canvas.toDataURL('image/png');
        link.download = <code>chart-${Date.now()}.png</code>;
        link.click();
      };

      img.src = base64Img;
    });
  }
}

This pattern handles:

chart not fully rendered yet → setTimeout(200)
empty export → ensures image callback completes
DPI scaling issues → uses actual rendered image
Angular change detection delays

Regards,
Peter

[Author]

Posts