Chart.js plugin to create charts with a hand-drawn, sketchy, appearance

Related tags

Data Visualization plugin sketch chartjs hand-drawn roughjs
Overview

chartjs-plugin-rough

npm Bower Travis Code Climate Awesome

Chart.js plugin to create charts with a hand-drawn, sketchy, appearance

Version 0.2 requires Chart.js 2.7.0 or later, and Rough.js 2.0.1 or later.

Installation

You can download the latest version of chartjs-plugin-rough from the GitHub releases.

To install via npm:

npm install chartjs-plugin-rough --save

To install via bower:

bower install chartjs-plugin-rough --save

To use CDN:

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-rough@latest/dist/chartjs-plugin-rough.min.js"></script>
<script src="https://unpkg.com/chartjs-plugin-rough@latest/dist/chartjs-plugin-rough.min.js"></script>

Usage

chartjs-plugin-rough can be used with ES6 modules, plain JavaScript and module loaders.

chartjs-plugin-rough requires Chart.js and Rough.js. Include Chart.js, Rough.js and chartjs-plugin-rough.js to your page to render sketchy charts. Note that chartjs-plugin-rough must be loaded after the Chart.js and Rough.js libraries. Once imported, the plugin is available under the global property ChartRough.

Then, you need to register the plugin to enable it for all charts in the page.

Chart.plugins.register(ChartRough);

Or, you can enable the plugin only for specific charts.

var chart = new Chart(ctx, {
    plugins: [ChartRough],
    options: {
        // ...
    }
});

Usage in ES6 as module

Import the module as ChartRough, and register it in the same way as described above.

import ChartRough from 'chartjs-plugin-rough';

Tutorial and Samples

You can find a tutorial and samples at nagix.github.io/chartjs-plugin-rough.

Configuration

The plugin options can be changed at 3 different levels and are evaluated with the following priority:

  • per dataset: dataset.rough.*
  • per chart: options.plugins.rough.*
  • globally: Chart.defaults.global.plugins.rough.*

All available options are listed below. This example shows how each option affects the appearance of a chart.

Name Type Default Description
roughness number 1 Numerical value indicating how rough the drawing is. See Rough.js.
bowing number 1 Numerical value indicating how curvy the lines are when drawing a sketch. See Rough.js.
fillStyle string 'hachure' String value representing the fill style. See Rough.js.
fillWeight number 0.5 Numeric value representing the width of the hachure lines. See Rough.js.
hachureAngle number -41 Numerical value (in degrees) that defines the angle of the hachure lines. See Rough.js.
hachureGap number 4 Numerical value that defines the average gap, in pixels, between two hachure lines. See Rough.js.
curveStepCount number 9 When drawing circles and arcs, the plugin approximates curveStepCount number of points to estimate the shape. See Rough.js.
simplification number 0 When drawing lines, simplification can be set to simplify the shape by the specified factor. The value can be between 0 and 1. See Rough.js.

For example:

{
    type: 'bar',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [{
            data: [45, 20, 64, 32, 76, 51],
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            borderWidth: 3,
            rough: {
                roughness: 1,
                bowing: 1,
                fillStyle: 'hachure',
                fillWeight: 0.5,
                hachureAngle: -41,
                hachureGap: 4,
                curveStepCount: 9,
                simplification: 0
            }
        }]
    }
}

Note that the following line style options are ignored.

  • borderCapStyle
  • borderDash
  • borderDashOffset
  • borderJoinStyle
  • borderAlign

Building

You first need to install node dependencies (requires Node.js):

npm install

The following commands will then be available from the repository root:

gulp build            # build dist files
gulp build --watch    # build and watch for changes
gulp lint             # perform code linting
gulp package          # create an archive with dist files and samples

License

chartjs-plugin-rough is available under the MIT license.

Comments
  • FillStyle does not work with Chart.js 2.8.0

    FillStyle does not work with Chart.js 2.8.0

    I'm testing Rough plugin with CHART.JS 2.8.0 and I see that fillStyle does not work.

    The legend is changing correctly but the fill of dataset not.

    I'm using your sample https://nagix.github.io/chartjs-plugin-rough/samples/interactions.html and changing only CHART.JS, you can see that it does not work.

    <head>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.bundle.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/rough.js/3.0.0/rough.js"></script>
	<script src="https://github.com/nagix/chartjs-plugin-rough/releases/download/v0.1.0/chartjs-plugin-rough.min.js"></script>
</head>
    opened by stockiNail 16
  • Bar: keep shape

    Bar: keep shape

    Hello @nagix, thanks for this great plugin. Is it possible to keep the shape of the bar on hover? Currently, it changes / reinitializes on every mousemove. Can we prevent that somehow?

    question 
    opened by Doidel 2
  • Bar chart broken when using Chart.js 2.9.0+ and using tooltip

    Bar chart broken when using Chart.js 2.9.0+ and using tooltip

    Steps to repeat:

    • Using bar chart example at https://nagix.github.io/chartjs-plugin-rough/samples/bar.html as base. (It references Chart.js 2.8.0.)
    • Working configuration with Chart.js 2.8.0: https://jsfiddle.net/f1ropz3e/
    • Not working configuration with Chart.js 2.9.0: https://jsfiddle.net/v3wrjh8g/
    • Scenario: -- hover over bar: Properly rendered tooltip shown -- leave bar: tooltip disappears

    When using Chart.js 2.9.0 (or the latest 2.9.4) a JavaScript error is thrown when hovering over a bar and the chart remains in a white-ish color.

    I did some digging:

    • In chartjs-plugin-rough.js, RoughTooltip>drawBody>ctx.fillRect and ctx.StrokeRect 'options.fillOptions' and 'options.strokeOptions' are accessed. This is where the error occurs.
    • Variable 'options' is updated in the customized 'helpers.each'. The logic expects Chart.js to use helper.each to iterate. Chart.js is not using that method in that place anymore.

    drawBody in Chart.js 2.8.0: // Draw body lines now helpers$1.each(body, function(bodyItem, i) {

    drawBody in Chart.js 2.9.0: // Draw body lines now for (i = 0, ilen = body.length; i < ilen; ++i) { bodyItem = body[i];

    opened by markokimpel 0
  • Installation with vue-chartjs not working?

    Installation with vue-chartjs not working?

    @nagix thanks for the repo, I was thnking of using roughViz earlier but this plugin will let me move completely to chart.js

    The problem is with the installation / integration - I'm using chartjs with Vue (used https://github.com/apertureless/vue-chartjs as a starting point, see my code here https://github.com/connecteev/test-chartjs-plugin-rough/)

    I then tried to integrate https://github.com/nagix/chartjs-plugin-rough but it does not work. My diff here: https://github.com/connecteev/test-chartjs-plugin-rough/commit/40043234c872e516fa02af8025b860a7d7e5a1b4

    This is the error I am seeing, and the bar graph is not loading if I enable /nagix/chartjs-plugin-rough

    Any idea how to get this to work when using vue?

    Uncaught TypeError: rough.canvas is not a function
    at ChartElement.draw (chartjs-plugin-rough.js?1686:966)
    at Object.draw (Chart.js?30ef:7231)
    at Chart.draw (Chart.js?30ef:9825)
    at Chart.render (Chart.js?30ef:9782)
    at Object.callback (Chart.js?30ef:2204)
    at Object.advance (Chart.js?30ef:3528)
    at Object.startDigest (Chart.js?30ef:3501)
    at eval (Chart.js?30ef:3490)
    opened by connecteev 5
  • How to maintain consistent roughjs randomness?

    How to maintain consistent roughjs randomness?

    Hey, I love what you've done with this mashup -- really solid work!

    I was wondering if there's an obvious way that I'm missing to disable the constant updating of the underlying roughjs redrawing such that the roughjs rendering remains temporally consistent.

    I'd still like to use roughjs to render the charts, just not having them updating all the time when hovering and stuff would be nice.

    Thanks!

    opened by transitive-bullshit 1
  • TypeError: rough.canvas is not a function

    TypeError: rough.canvas is not a function

    Hi,

    I'm trying to use your library in a React environment. Can't push it up for reproduction but will try and do my best to explain what it is I am trying to do.

    I got this component:

    import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Chart from 'chart.js'
import ChartRough from 'chartjs-plugin-rough'
import { LocaleContext } from '../../contexts/LocaleContext'

class LineBarChart extends Component {
  static contextType = LocaleContext

  static propTypes = {
    data: PropTypes.shape().isRequired
  }

  componentDidMount() {
    this.make()
  }

  componentDidUpdate(prevProps) {
    const { data } = this.props
    if (prevProps.data !== data) {
      this.make()
    }
  }

  make = () => {
    const { data } = this.props
    const ctx = this.lineChartRef.getContext('2d')
    this.chart = Chart.Line(ctx, {
      data,
      plugins: [ChartRough],
      options: {
        responsive: true,
        hoverMode: 'index',
        stacked: false,
        scales: {
          yAxes: [{
            type: 'linear',
            display: true,
            position: 'left',
            id: 'y-axis-1',

            gridLines: {
              drawOnChartArea: false,
              color: '#f2f2f2',
              zeroLineColor: '#f2f2f2'
            }
          }, {
            type: 'linear',
            display: true,
            position: 'right',
            id: 'y-axis-2',

            gridLines: {
              drawOnChartArea: false,
              color: '#f2f2f2',
              zeroLineColor: '#f2f2f2'
            }
          }]
        }
      }
    })
  }

  render() {
    return (
      <canvas ref={(ref) => { this.lineChartRef = ref }} width="100%" height="50" />
    )
  }
}

export default LineBarChart

    the data prop could look like this:

    {
    labels: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00'],
    datasets: [{
      label: 'CDN A',
      borderColor: '#2b70f7',
      backgroundColor: '#2b70f7',
      fill: false,
      data: [
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100)
      ],
      rough: {
        roughness: 2,
        bowing: 2
      },
      yAxisID: 'y-axis-2'
    }, {
      label: 'CDN B',
      borderColor: '#ce0060',
      backgroundColor: '#ce0060',
      fill: false,
      data: [
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100)
      ],
      rough: {
        roughness: 2,
        bowing: 2
      },
      yAxisID: 'y-axis-1'
    }, {
      label: 'CDN C',
      borderColor: '#e49e29',
      backgroundColor: '#e49e29',
      fill: false,
      data: [
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100)
      ],
      rough: {
        roughness: 2,
        bowing: 2
      },
      yAxisID: 'y-axis-2'
    }]
  }

    I've also installed all the dependencies (as far as I understood that I had to)

    "chart.js": "^2.8.0",
"chartjs-plugin-rough": "^0.2.0",
"roughjs": "^3.1.0",

    This is the error I'm getting

    chartjs-plugin-rough.js:966 Uncaught TypeError: rough.canvas is not a function
    at ChartElement.draw (chartjs-plugin-rough.js:966)
    at Chart.<anonymous> (Chart.js:8905)
    at Object.each (Chart.js:1801)
    at Chart.draw (Chart.js:8904)
    at Chart.render (Chart.js:8866)
    at Object.callback (Chart.js:1778)
    at Object.advance (Chart.js:2952)
    at Object.startDigest (Chart.js:2925)
    at Chart.js:2914
    opened by johansedgeware 6
Owner
Akihiko Kusanagi
Akihiko Kusanagi
GitHub
Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

roughViz.js is a reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser, based on D3v5, roughjs, and handy. Why? Use

Jared Wilber 6.4k Jan 4, 2023
This plugin for Chart.js that makes your bar chart to 100% stacked bar chart.

chartjs-plugin-stacked100 This plugin for Chart.js that makes your bar chart to 100% stacked bar chart. Requires Chart.js 3.x. Demo: https://y-takey.g

y-take 106 Jan 3, 2023
Chart.js plugin to defer initial chart updates

Chart.js plugin to defer initial chart updates until the user scrolls and the canvas appears inside the viewport, and thus trigger the initial chart a

Chart.js 97 Nov 9, 2022
Smoothie Charts: smooooooth JavaScript charts for realtime streaming data

Smoothie Charts is a really small charting library designed for live streaming data. I built it to reduce the headaches I was getting from watching ch

Joe Walnes 2.2k Dec 13, 2022
J2CL and GWT Charts library based on CHART.JS

Charba - J2CL and GWT Charts library based on CHART.JS What's Charba GWT Web toolkit doesn't have charting library available out of the box. There are

Pepstock.org 56 Dec 17, 2022
Beautiful charts for Angular based on Chart.js

ng2-charts slack Beautiful charts for Angular based on Chart.js Usage & Demo Samples using ng2-charts https://valor-software.com/ng2-charts/ Installat

Valor Software 2.2k Jan 4, 2023
Chart.js module for creating treemap charts

chartjs-chart-treemap Chart.js v3.6.0 module for creating treemap charts. Implementation for Chart.js v2 is in 2.x branch Documentation You can find d

Jukka Kurkela 99 Dec 18, 2022
Chart.js Box Plots and Violin Plot Charts

Chart.js Box and Violin Plot Chart.js module for charting box and violin plots. This is a maintained fork of @datavisyn/chartjs-chart-box-and-violin-p

Samuel Gratzl 61 Dec 14, 2022
A Simple Dashboard Chart in Laravel Nova using Chart JS

A Simple Dashboard Chart in Laravel Nova using Chart JS. Starting create your own dashboard with Chart JS Integration can save your time and help you maintain consistency across standard elements such as Bar, Stacked, Line, Area, Doughnut and Pie Chart.

Kuncoro Wicaksono 177 Jan 4, 2023
Bar Funnel Chart extension for Chart.js

Chart.BarFunnel.js Provides a Bar Funnel Chart for use with Chart.js Documentation To create a Bar Funnel Chart, include Chart.BarFunnel.js after Char

Chart.js 58 Nov 24, 2022
TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies

TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies; use it with any framework or backend.

null 24 Dec 12, 2022
Create beautiful charts with one line of JavaScript

Chartkick.js Create beautiful charts with one line of JavaScript See it in action Supports Chart.js, Google Charts, and Highcharts Also available for

Andrew Kane 1.2k Jan 2, 2023
Create beautiful JavaScript charts with one line of React

React Chartkick Create beautiful JavaScript charts with one line of React See it in action Supports Chart.js, Google Charts, and Highcharts Quick Star

Andrew Kane 1.2k Dec 28, 2022
Create beautiful JavaScript charts with one line of Ruby

Chartkick Create beautiful JavaScript charts with one line of Ruby. No more fighting with charting libraries! See it in action Chartkick 4.0 was recen

Andrew Kane 6.1k Jan 8, 2023
Using ASP.NET Core, SignalR, and ChartJs to create real-time updating charts

Real-time Charts with ASP.NET Core, SignalR, and Chart.js This project shows how to update a real-time chart in your web browser using technologies li

Khalid Abuhakmeh 11 Nov 25, 2022
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser

jQuery Sparklines This jQuery plugin makes it easy to generate a number of different types of sparklines directly in the browser, using online a line

Gareth Watts 1.2k Jan 4, 2023
JQuery plugin for creating charts

JQuery Linechart JQuery plugin for building a linechart. Chart ruler completely on HTML/CSS/JS. Bar chart, calendar view visualisation. Diagram, graph

Kirill Stepkin 42 Oct 25, 2022
JQuery plugin for creating charts

JQuery Linechart JQuery plugin for building a linechart. Chart ruler completely on HTML/CSS/JS. Bar chart, calendar view visualisation. Diagram, graph

Kirill Stepkin 42 Oct 25, 2022
Zoom and pan plugin for Chart.js

chartjs-plugin-zoom A zoom and pan plugin for Chart.js >= 3.0.0 For Chart.js 2.6.0 to 2.9.x support, use version 0.7.7 of this plugin. Panning can be

Chart.js 510 Jan 2, 2023