Appearance

Graph ​

A JSX email component for displaying graphs in your Email template

TIP

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

Install ​

Install the component from your command line

console
pnpm add jsx-email
pnpm add jsx-email
console
bun add jsx-email
bun add jsx-email
console
npm add jsx-email
npm add jsx-email
console
yarn add jsx-email
yarn add jsx-email

Usage ​

Add the graph component to your email template.

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>
  );
};
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>
  );
};

Component Props ​

tsx
config: ChartConfiguration & Record<string, any>;
config: ChartConfiguration & Record<string, any>;

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

TIP

You can play around with your chart configuration in this playground

tsx
title: string;
title: string;

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

tsx
background?: string;
background?: string;

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

tsx
className?: string;
className?: string;

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

tsx
height?: number;
height?: number;

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

tsx
width?: number;
width?: number;

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