Full source code is at: Demo Page

    <Paper {...paperProps}>
      <XAxis />
      <YAxis left={50} />
      <Annotation type={'y'} label={'vertical line'} y={100} />
      <Annotation
        type={AnnotationCalloutCircle}
        note={{ label: 'breakpoint', title: 'additionl information' }}
        score={10}
        subject={{ radius: 10 }}
        x={100}
        y={100}
      />
      <Line {...lineProps} />
      <Contour {...contourProps} />
    </Paper>

• Components are freely composed within a Frame. Each component may have its dedicated data.
• All charts are translated into a render pipeline which contains only graphic primitives: areas, points and lines.
• Render Pipeline are visualized in layers, in format of canvas render queue or SVG/HTML elements.

Other thoughts:

• when render pipeline is rendered in canvas, when can improve performance with reqAnimationFrame. This is beyond the scope of react rendering
• when render pipeline is rendered in SVG/HTML, it is under react's control

1. Download/Clone code
2. Run commands

npm install         // install dependencies
npm run dev         // view demos in web browser at localhost:8080

run command: npm install react-occult --save

code is at: demo usage

Heavily inspired by semiotic

This project is licensed under the MIT License - see the LICENSE file for details