Skip to content
JSX email

Graph

A JSX email component for displaying graphs in your Email template

Install

Install the component from your command line

Terminal window
pnpm add jsx-email

Usage

GraphExample.jsx
import { Html, Body, Section, Graph } from 'jsx-email';


const Email = () => {
  return (
    <Html lang="en">
      <Body>
        <Section>
          <Graph
            width={100}
            height={100}
            title="Graph with jsx-email"
            config={{
              type: 'bar',
              data: {
                labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                datasets: [
                  {
                    data: [10, 6.5, 3, 6, 4, 0.1, 0.5]
                  }
                ]
              }
            }}
          />
        </Section>
      </Body>
    </Html>
  );
};

Props

Required Props

config

config: ChartConfiguration & Record<string, any>;

Chart configuration object following Chart.js v2.9.4 format.

title

title: string;

Graph title.

Optional Props

background

background?: string;

Graph background color.

className

className?: string;

Custom CSS class for additional styling.

height

height?: number;

Graph height in pixels.

width

width?: number;

Graph width in pixels.