Easy, responsive JavaScript library for creating hand-drawn looking charts in the browser.

Star

Components:



To see the full list of options for each chart, visit the GitHub repo.

Why? roughViz was built to provide an easy way to create interactive, "sketchy" plots in the browser. Use these charts where the communication goal is to show intent or generality, and not absolute precision. Or just because they're fun and look weird!

Live, editable examples: available on observable.
Documentation & API: available on GitHub.

Getting Started Is Simple

1. Import roughViz.js: First, import the library via a script tag or via npm: 

        
    // Install with cdn:
    <script src="https://unpkg.com/rough-viz@2.0.5"></script>

    # Install with npm:
    $ npm install rough-viz

2. Create container: Simply create a container div and assign some dimensions (e.g. width and height). By default, the roughViz chart will be sized and responsive according to these dimensions. 

        
   <div id="viz0" style="width: 500px; height: 500px;" ></div>

3. Call chart: Use roughViz to create the desired chart, and feed in the required arguments. 

        
  // create Donut chart using defined data & customize plot options
  new roughViz.Donut(
    {
      element: '#viz0',
      data: {
        labels: ['North', 'South', 'East', 'West'],
        values: [10, 5, 8, 3]
      },
      title: "Regions",
      roughness: 8,
      colors: ['red', 'orange', 'blue', 'skyblue'],
      stroke: 'black',
      strokeWidth: 3,
      fillStyle: 'cross-hatch',
      fillWeight: 3.5,
    }
  );

If you're using npm, simply import the module and use the roughViz namespace: 

      
      # Install with npm:
      $ npm install rough-viz 
    
      import { Bar, ... } from 'rough-viz';


Made by Jared Wilber