react-chartist-plugin-accessibility v0.0.18

react-chartist-plugin-accessibility

Accessibility plugin for react-chartist.

Installation

$ npm i react-chartist-plugin-accessibility --save

Usage

import React, { Component } from 'react'
import ChartistGraph from 'react-chartist'
import ChartistAccessibility from 'react-chartist-plugin-accessibility'

export default class example extends Component {
  render () {
    const data = {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      series: [
        [29, 38, 69, 28, 18, 49, 33, 28, 28, 23, 93, 27, 34],
        [48, 39, 47, 19, 43, 50, 85, 94, 29, 93, 46, 67, 60]
      ]
    }
    return (
      <ChartistGraph
        data={data}
        type={'Line'}
        options={{
          axisX: {
            labelInterpolationFnc: (value, index) => `${value}.`
          }
        }}
        responsiveOptions={[
          ['screen and (max-width: 768px)', {
            width: '100%',
            axisX: {
              labelInterpolationFnc: (value, index) => index % 2 === 0 ? value : ''
            }
          }]
        ]}>
        <ChartistAccessibility
          caption={'caption'}
          summary={'summary'}
          seriesHeader={'header'}
        />
      </ChartistGraph>
    )
  }
}

Check out chartist-plugin-accessibility for more details.