Charts-css-react NPM

Charts.css for React

React components for chartscss.

Version

Install

Npm

npm i charts-css-react

Yarn

yarn add charts-css-react

Motivation

accessibility

Usage

For details on using the css utility framework please see the Charts.css website

Chart

The base component for charts. It's possible to create any of the supported charts.

Charts.css is a modern CSS framework. It uses CSS utility classes to style HTML elements as charts.

The Chart component raises those utility classes to a component and relies on naive logic to apply them. The intent is to surface the underlying framework to build higher level components for simple convenience if needed. Experimental

import { CSSProperties } from 'react';
import { Chart } from 'hollanddd/chart-css-react';

<Chart hideData showDataOnHover>
  <tr>
    <th scope="row">Example</th>
    <td style={{"--size": "calc(90/100)"} as CSSProperties }>$90K</td>
  </tr>
  <tr>
    <th scope="row">Example</th>
    <td>$100K</td>
  </tr>
</Chart>

Higher Order Chart Component

Bar, column, area, and line chart higher order components are available for building charts from a data object.

<BarChart data={[40, 60, 75, 80, 100]} />

Providing a matrix automatically applies the multiple utility class.

<AreaChart data={[[40, 60], [75, 80]]} />

Data Component

The Data component is a wrapper around td and performs some functions such as converting size to the CSSProperties type required by style.

size is a string of css calc() function or float "0.0" to "1.0".
toolTip optional message to display on hover

import { Chart, Data } from 'hollanddd/chart-css-react';

<Chart>
  <tr>
    <th scope="row">One</th>
    <Data size="calc(90/100)">$90k</Data>
  </tr>
  <tr>
    <th scope="row">Two</th>
    <Data toolTip="this is a tooltip">$100k</Data>
  </tr>
</Chart>

The AreaChart and LineChart components abstract away the need to write table row and data cell elements.

import { AreaChart } from 'hollanddd/chart-css-react';

<AreaChart data={[2, 4, 8, 6, 1, 3]} />

Same example but using the base Chart component

import { Chart, Data } from 'hollanddd/chart-css-react';

<Chart type="area">
  <tr>
    <Data start="0.2" size="0.4" />
  </tr>
  <tr>
    <Data start="0.4" size="0.8" />
  </tr>
  <tr>
    <Data start="0.8" size="0.6" />
  </tr>
  <tr>
    <Data start="0.6" size="1.0" />
  </tr>
  <tr>
    <Data start="1.0" size="0.3" />
  </tr>
</Chart>