DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Shriji
Shriji

Posted on

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.

Result

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)
Enter fullscreen mode Exit fullscreen mode

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
  }
})
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Line Chart

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

Top comments (0)

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!