Making hand-drawn charts using svelte actions

Svelte's batteries come with actions that help you integrate third-party libraries and to some extent interact with them.

Actions provide great flexibility you could directly install external libraries npm install any-package.

Svelte's API Docs states on actions

Actions are functions that are called when an element is created.

Much of this article is a reproduction of svelte.school tutorial on actions with this tutorial I was able to make the integration.

You can see the demo https://peopledrivemecrazy.github.io/chart.xkcd-svelte/

How to use actions to integrate beautiful XKCD themed charts on svelte.

Prerequisites:

  1/ Svelte starter template (https://svelte.dev/)
  2/ XKCD Charts via NPM (https://www.npmjs.com/package/chart.xkcd)

From the library we see

It’s easy to get started with chart.xkcd. All that’s required is the script included in your page along with a single <svg> node to render the chart and the JS part of XKCD library is like this

const lineChart = new chartXkcd.Line(svg, {
  title: 'Monthly income of an indie developer', // optional
  xLabel: 'Month', // optional
  yLabel: '$ Dollars', // optional
  data: {
    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
    datasets: [{
      label: 'Plan',
      data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000],
    }, {
      label: 'Reality',
      data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
    }],
  },
  options: { // optional
    yTickCount: 3,
    legendPosition: chartXkcd.config.positionType.upLeft
  }
})

We now know <svg> the node where our JS will interact and the node indeed has options that are supplied about the chart properties.

From line chart's example we can make something like this and import in .svelte file.

So let's create a new .js file and call it Line.js and exports Line.

import chartXkcd from 'chart.xkcd';

export default function Line(node,chart) {
    new chartXkcd.Line(node, chart);
}

In our App.svelte we can supply the options from a variable and pass to the node like this use:Line={line}


import Line from './Line'

let line = {
  title: 'Monthly income of an indie developer', // optional
  xLabel: 'Month', // optional
  yLabel: '$ Dollars', // optional
  data: {
    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
    datasets: [{
      label: 'Plan',
      data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000],
    }, {
      label: 'Reality',
      data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
    }],
  },
  options: { // optional
    yTickCount: 3,
    legendPosition: chartXkcd.config.positionType.upLeft
  }
}

<svg use:Line={line}></svg>

Success, Now we see it work right out of the box.

You can check out the working examples from the repo here
https://github.com/peopledrivemecrazy/chart.xkcd-svelte

PS. I made svelte wrapper for xkcd.chart NPM package

Blog

Making hand-drawn charts using svelte actions

Shriji

Prerequisites:

Join Our Newsletter. No Spam, Only the good stuff.

Related