react-liquidchart v0.3.0

React-liquidchart

A Nice looking liquid chart done with d3 and react, based off http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

There is also another really nice version here

Install from NPM

npm install react-liquidchart

Example

For now, this will have to do.

Usage

import React, { Component } from 'react';
import { render } from 'react-dom';
import LiquidChart from 'react-liquidchart';

const stops = [
  <stop key={1} stopColor="someColor1" offset="5%" />
  <stop key={2} stopColor="someColor2" offset="50%" />,
  <stop key={3} stopColor="someColor3" offset="85%" />,
];

class ChartLiquid extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <div
        style={{
          width: '100%',
          height: '500px',
        }}
      >
        <LiquidChart
            responsive
            legend="Percentage of Completed Tasks"
            value={Math.random() * 100}
            showDecimal
            amplitude={4}
            frequency={2}
            animationTime={2000}
            animationWavesTime={2250}
            gradient={{
              type: 1,
              x1: 0,
              x2: 0,
              y1: 100,
              y2: 0,
              stops,
            }}
            postfix="%"
            legendFontSize={0.1}
          />
      </div>
    );
  }
}
render(<ChartLiquid />, document.getElementById('app'));

LiquidChart PropTypes

Animation

There are two kinds of animation, the value animation and the back and forth animation. To set the animation you only need to set either the animationTime or the animationEase for value transitions. To set the back and forth animation you need to set the animationWavesTime prop.

fontSizes

Sets the fontsize of the tspans. The values are fractions of the radius.

const fontSize = {
  value: 0.6,
  decimal: 0.3,
  postfix: 0.1,
  legend: 0.1,
};

CSS

You can add your own css to the component by targeting the classes that are set.

For an example if I would like to change the font type and the positioning I could do something like this

  .liquid-text {
    transform: translate(0, 40px);
    font-family: Roboto;
  }

Licence

This software was available initially under the BSD-2-Clause. The changes are also available under the BSD-2-Clause.