DEV Community 👩‍💻👨‍💻

Shriji
Shriji

Posted on

Svelte XKCD chart

The charts library already have vue and react wrappers so it lacked the svelte version of the library.

Introducing chart.xkcd-svelte

All chart examples can be found here

General usage for svelte and check out the REPL

<script>

    import Chart from 'chart.xkcd-svelte';
    import chartXkcd from 'chart.xkcd';

let options = {
        title: 'What people think', // optional
        data: {
            labels: ['work', 'sleep', 'social'],
            datasets: [{
                data: [30, 10, 60],
            }],
        },
        options: { // optional
            innerRadius: 0,
            legendPosition: chartXkcd.config.positionType.upLeft,
        },
    }
let type = "bar";
</script>
<Chart type={type} options={options} />


Enter fullscreen mode Exit fullscreen mode

Thanks to awesome people at svelte's discord I was able to do this ❤️❤️

Top comments (0)

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.