Have ideas to improve npm?Join in the discussion! »

    simple-react-d3-guage-chart

    1.0.3 • Public • Published

    simple-react-d3-guage-chart

    simple guage chart for react made using d3

    NPM JavaScript Style Guide

    Install

    npm install --save simple-react-d3-guage-chart

    Usage

    import React, { Component } from 'react'
    
    import SimpleGuageChart from 'simple-react-d3-guage-chart'
    import 'simple-react-d3-guage-chart/dist/index.css'
    
    class Example extends Component {
      render() {
        return <SimpleGuageChart id={"guage-01"} value={40}/>
      }
    }

    Examples

    simple-react-d3-guage-chart

    Properties

    Name PropType Description Default value
    value PropTypes.string.isRequired Used to Display the value below the pointer
    id PropTypes.string.isRequired Unique ID for graph
    size PropTypes.number Size of The chart, Min Value is 200px 300
    minValue PropTypes.number Minimum value on the scale 0
    maxValue PropTypes.number Maximum value on the scale 100
    minAngle PropTypes.number Minimum angle at which the pointer starts. You need to provide both min and max angle. Min angle should always be less than max angle. -120
    maxAngle PropTypes.number Maximum angle at which the pointer ends 120
    majorTicks PropTypes.number Number of Expected Ticks, This will not be same as ticks appearing in graph, This varies based on d3 scale for min and max value. 7
    pointerWidth PropTypes.number Width of pointer. Diameter at the starting of pointer. Should be in between 2 to 10 6
    pointerLength PropTypes.number Pointer length Percentage, Should be in between 0.3 and 1 0.7
    mainRingWidth PropTypes.number Thickness of ring.should be minimum 1 3
    ticksRingWidth PropTypes.number Height of Ticks. Should be in between 0 and 30 15
    tickColors PropTypes.array Color of ticks. Should be an array of length 2. ["#d92121", "#12af5a"]
    pointerColor PropTypes.string Color of Pointer "#ff0500"
    arcColor PropTypes.string Color of Main Arc "#b3b3b3"
    tickFontColor PropTypes.string Color of Text on scale "#666"
    fontColor PropTypes.string Color of Value presented on scale "#666"

    License

    MIT © bhanupradeep7

    Install

    npm i simple-react-d3-guage-chart

    DownloadsWeekly Downloads

    9

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    67.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar