@muil/charts NPM

Muil Charts

Easily add charts to your emails.

Visit Muil Docs.

Installation

npm install @muil/charts

yarn add @muil/charts

Usages

Bar Chart

Single Value

Bar Chart

import {BarChart} from '@muil/charts'

<BarChart
  height={200}
  legend={false}
  categories={[{ color: '#17a2b8' }]}
  series={[
    {
      label: '2017',
      value: 53,
    },
    {
      label: '2018',
      value: 13,
    },
    {
      label: '2019',
      value: 26,
    },
    {
      label: '2020',
      value: 43,
    },
  ]}
/>

Multiple Values

Multiple Bar Chart

import {BarChart} from '@muil/charts'

<BarChart
  height={300}
  legend
  categories={[
    { label: 'One Week', color: '#17a2b8' },
    { label: '2 Weeks', color: '#d5d5d4' },
    { label: 'One Month', color: '#90ED7D' }
  ]}
  series={[
    {
      label: 'Rick & Morty',
      data: [53, 31, 25],
    },
    {
      label: 'BoJack Horseman',
      data: [13, 25, 94],
    },
    {
      label: '100 Humans',
      data: [26, 56, 37],
    },
  ]}
/>

Property	Type	Description
height	Number	height of chart
className	String	class name
series	Array of Objects {label: String, value: Number, data: Array(Number)}	label under bar, value - for single percentage, data - for multiple percentages
categories	Array of Objects {label: String, color: String}	label for legend, color of bar
legend	Boolean	show or hide legend

Horizontal Bar Chart

Single Value

Bar Chart

import {HorizontalBarChart} from '@muil/charts'

<HorizontalBarChart
  maxWidth={400}
  legend={false}
  categories={[{ color: '#17a2b8' }]}
  series={[
    {
      label: '2017',
      value: 50,
    },
    {
      label: '2018',
      value: 30,
    },
    {
      label: '2019',
      value: 20,
    },
    {
      label: '2020',
      value: 2,
    },
  ]}
/>

Multiple Values

Multiple Bar Chart

import {HorizontalBarChart} from '@muil/charts'

<HorizontalBarChart
  maxWidth={400}
  legend
  categories={[
    { label: 'One Week', color: '#17a2b8' },
    { label: '2 Weeks', color: '#d5d5d4' },
    { label: 'One Month', color: '#90ED7D' }
  ]}
  series={[
    {
      label: 'Rick & Morty',
      data: [53, 31, 25],
    },
    {
      label: 'BoJack Horseman',
      data: [13, 25, 94],
    },
    {
      label: '100 Humans',
      data: [26, 56, 37],
    },
  ]}
/>

Property	Type	Description
maxWidth	Number	max width of chart
className	String	class name
series	Array of Objects {label: String, value: Number, data: Array(Number)}	label under bar, value - for single percentage, data - for multiple percentages
categories	Array of Objects {label: String, color: String}	label for legend, color of bar
legend	Boolean	show or hide legend

Calendar

Basic

import {Calendar} from '@muil/charts'

<Calendar showNumbers />

Heat map

import {Calendar} from '@muil/charts'

<Calendar
  monthsBefore={1}
  monthsAfter={1}
  dayClassName={({ day }) => `score${day % 4}`}
/>

Property	Type	Description
className	String	class name
monthsBefore	Number	number of months before current month
monthsAfter	Number	number of months after current month
showNumbers	Boolean	show or hide day numbers
dayClassName	Function ({day: Number, date: Date})	return class name for each day

Line Bar

Heat map

import {LineBar} from '@muil/charts'

<LineBar
  percents={[
    { value: 10, color: '#17a2b8' },
    { value: 20, color: '#d5d5d4' },
    { value: 70, color: '#90ED7D' },
  ]}
/>