Skip to content

Integration Examples

Glenn Matthys edited this page Mar 16, 2021 · 2 revisions

React

Vue

Basic example of rendering a chart with µPlot and Vue: https://jsfiddle.net/oa6y1Lj4/

new Vue(
    {
    	beforeDestroy()
        {
            if(this.chart)
                this.chart.destroy();
        },
        el: "#app",
        mounted()
        {
            let data =
            [
                [1, 2, 3, 4],
                [35, 71, 32, 18],
                [55, 53, 50, 49]
            ];

            let opts =
            {
                title: "My Chart",
                width: 640,
                height: 480,
                scales:
                {
                    x: { time: false }
                },
                series:
                [
                    {},
                    {
                        label: 'Series 1',
                        stroke: 'red',
                        width: 1,
                        fill: 'rgba(255, 0, 0, 0.3)',
                    },
                    {
                        label: 'Series 2',
                        stroke: 'blue'
                    }
                ],
            };

            this.chart = new uPlot(opts, data, this.$refs.chart);
        }
    }
);

Angular

Clone this wiki locally