cron-expression-chart

React component library to plot cron expressions on a weekday vs hour scatter chart.

Install

npm install cron-expression-chart react react-dom apexcharts react-apexcharts cron-parser

Basic usage

import { CronChart } from 'cron-expression-chart'

export function Example() {
  return (
    <CronChart
      expressions={[
        { label: 'Daily 01:00', expression: '0 1 * * *' },
        { label: 'Every 6 hours', expression: '0 */6 * * *' }
      ]}
      timezone="America/Sao_Paulo"
      hideAllSeriesInitially
    />
  )
}

When startDate and endDate are omitted, the chart automatically uses a closed 7-day window with the current day positioned in the middle. When hideAllSeriesInitially is enabled, all legend groups start hidden and can be enabled progressively by the user.

Local development

npm install
npm run dev

This starts the playground web server using Vite.

Package build

npm run build

For library mode with Vite:

vite build --mode lib

Publish flow

npm login
npm run build
npm publish --access public