Graph

A JSX email component for displaying graphs in your Email template

Tips

This component is wrapper around QuickChart API for generating email compatible charts

pnpm
aube
bun
npm
yarn
pnpm add jsx-email

Usage

Add the graph component to your email template.

import { Body, Graph, Html, Section } 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>
  );
};

Component Props

config: ChartConfiguration & Record<string, any>;

An object that contains the chart configuration settings, combining ChartConfiguration properties.

Tips

You can play around with your chart configuration in this playground

title: string;

This is a required string that provides the title of the graph.

background?: string;

An optional string that sets the background color of the graph.

className?: string;

This is optional string that applies a custom CSS class to the graph component for additional styling.

height?: number;

This is an optional number that specifies the height of the graph in pixels.

width?: number;

This is an optional number that specifies the width of the graph in pixels.