graphics-canvas

React component with graphics diagrams on clear JavaScript

Install

npm install --save graphics-canvas

Usage

PieChart

import React, { Component } from 'react'
 
import { Piechart } from 'graphics-canvas'
import 'graphics-canvas/src/piechart.scss' // optional if you`ll use your css
 
// Data format
const data = [
    {
      data: "Such a big label",
      count: 10000,
    },
    {
      data: "Medium label",
      count: 34000,
    },
    {
      data: "Label",
      count: 28000,
    },
]
 
// You can provide colors or it`ll be by default
const colors = [
    '#00b275ff',
    '#57ffb6ff',
    '#f8ff33ff',
    '#e9b44cff',
    '#e4d6a7ff',
    '#ff5446ff',
    '#ff0aadff',
    '#de0affff',
    '#0052b2ff'
  ]
 
class Example extends Component {
  render() {
    return <Piechart
       smallRadius={55} // Inner circle radius (optional)
       containerClass={"diagramContainer"} // Container class (optional if you use default css)
       infoClass={"statisticDiagram"} // Labels class (optional if you use default css)
       colors={colors} // Colors (optional)
       data={data} // Data (required)
       radius={115} // Outer circle radius (required)
       background={"white"} // Diagramm background color (optional)
     />
  }
}

Export structure

<div class="YourContainerClass">
    <div class="YourContainerClass__tooltip">
        <p className="YourContainerClass__tooltip--text">
            Label Count %...
        </p>
    </div>
    <canvas>
    <div class="YourInfoClass">
        <ul class="YourInfoClass__list">
            <li class="YourInfoClass__item">
                <span class="YourInfoClass__color"></span>
                <p class="YourInfoClass__text">Label</p>
            </li>
            ...
        </ul>
    </div>
</div>

Histogram

import React, { Component } from 'react'
 
import { Histogram } from 'graphics-canvas'
import 'graphics-canvas/src/histogram.scss' // optional if you`ll use your css
 
// Data format
const data = [
    {
      label: 'Label 1',
      values: [
        {
          title: 'Smt 1',
          count: 10000
        },
        {
          title: 'Smt 2',
          count: 20000
        }
      ]
    },
    {
      label: 'Label 2',
      values: [
        {
          title: 'Smt 1',
          count: 40000
        }
      ]
    },
    {
      label: 'Label 3',
      values: [
        {
          title: 'Smt 1',
          count: 75000
        },
        {
          title: 'Smt 2',
          count: 80000
        },
        {
          title: 'Smt 3',
          count: 90000
        }
      ]
    },
    {
      label: 'Label 4',
      values: [
        {
          title: 'Smt 1',
          count: 100000
        },
        {
          title: 'Smt 2',
          count: 110000
        },
        {
          title: 'Smt 3',
          count: 120000
        }
      ]
    },
    {
      label: 'Label 5',
      values: [
        {
          title: 'Smt 1',
          count: 40000
        },
        {
          title: 'Smt 2',
          count: 50000
        },
        {
          title: 'Smt 3',
          count: 30000
        }
      ]
    },
    {
      label: 'Label 6',
      values: [
        {
          title: 'Smt 1',
          count: 40000
        },
        {
          title: 'Smt 2',
          count: 50000
        },
        {
          title: 'Smt 3',
          count: 30000
        }
      ]
    },
    {
      label: 'Label 7',
      values: [
        {
          title: 'Smt 1',
          count: 40000
        },
        {
          title: 'Smt 2',
          count: 50000
        },
        {
          title: 'Smt 3',
          count: 30000
        }
      ]
    }
  ]
 
// You can provide colors or it`ll be by default
const colors = [
    '#00B275',
    '#F8FF33',
    '#FF5446',
    '#0052B2',
    '#AABBFF'
  ]
 
class Example extends Component {
  render() {
    return <Histogram
       containerClass={"histogramContainer"} // Histogram container class (optional)
       colors={colors} // Provide you colors (optional)
       background={'white'} // Background color (optional)
       data={data} // Data (required)
       range={2} // Bodred-radius of columns (optional)
       columnWidth={20} // Column width (optional)
       columnMargin={5} // Column margin (optional)
       fontFamily={'Arial'} // Font family (you need link font in your css)
       fontSize={14} // Text font size
     />
  }
}

Export structure

<div class="histogramContainer">
    <div class="histogramContainer__tooltip">
        <p class="histogramContainer__tooltip--text">Smt 3... 120000</p>
    </div>
    <canvas width="865" height="250"></canvas>
</div>

License

MIT © fateseekers