Swat Chart

A simple chart to be used in your projects.

Links

• npm package
• demo

Install

npm install @assistantapps/swat-chart

Usage

import { generateSwatChart } from '@assistantapps/swat-chart';

const svgContent = generateSwatChart({
  chart: {
    width: 800,
    height: 400,
    borderRadius: 20,
    lineWidth: 3,
    padding: { x: 20, y: 20 },
  },
  colour: {
    backgroundFill: '#DFFFDF',
    // ...
  },
  // etc ...
});

React

<div dangerouslySetInnerHTML={{ __html: svgContent }} />

SolidJS

<div class="display" innerHTML={svgContent} />

Angular

// component.ts
import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `<div [innerHTML]="safeSvg"></div>`
})
export class AppComponent {
  svgContent: string = generateSwatChart({ /* config */ });
  safeSvg: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    this.safeSvg = this.sanitizer.bypassSecurityTrustHtml(this.svgContent);
  }
}