# How to configure Echarts in Dashboard 2?

**URL:** <https://discourse.nodered.org/t/how-to-configure-echarts-in-dashboard-2/87259>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [15 April 2024 21:34 UTC](https://discourse.nodered.org/t/how-to-configure-echarts-in-dashboard-2/87259 "2024-04-15T21:34:44Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [16 April 2024 14:36 UTC](https://discourse.nodered.org/t/how-to-configure-echarts-in-dashboard-2/87259/4 "2024-04-16T14:36:35Z")

</div>

Here is a very basic working demo to get you moving.

![chrome_3bl8y1grck](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/2/324c8ec428ce6dc01de85279eb189f531f1d8086.gif)

hook these 2 injects up to the input of your template

```json
[{"id":"2d2e714030317eee","type":"inject","z":"85fb8b6df2be7ac8","name":"","props":[{"p":"payload"},{"p":"payload.title","v":"Average per hour","vt":"str"},{"p":"payload.labels","v":"[\"07:00\",\"08:00\",\"09:00\",\"10:00\",\"11:00\",\"12:00\",\"13:00\",\"14:00\",\"15:00\",\"16:00\",\"17:00\",\"18:00\"]","vt":"json"},{"p":"payload.data","v":"[8600, 8750, 7800, 8700, 9600, 6400, 5600, 4750, 5980, 6000, 5555, 5150]","vt":"json"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"data","payload":"{}","payloadType":"json","x":1210,"y":540,"wires":[["29ee8b5b2da056b6"]]},{"id":"b0e5da946de25ea9","type":"inject","z":"85fb8b6df2be7ac8","name":"","props":[{"p":"payload"},{"p":"payload.title","v":"Tons / Hour","vt":"str"},{"p":"payload.labels","v":"[\"07:00\",\"08:00\",\"09:00\",\"10:00\",\"11:00\",\"12:00\",\"01:00\",\"02:00\",\"03:00\",\"04:00\",\"05:00\",\"06:00\"]","vt":"json"},{"p":"payload.data","v":"[5300, 9280, 11250, 1260, 2270, 4300, 5550, 2500, 2400, 4390, 9380, 12390, 10400, 11500, 7600, 8750, 4800, 8700, 9600, 4400, 6600, 6750, 8980, 7000]","vt":"json"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"data","payload":"{}","payloadType":"json","x":1210,"y":580,"wires":[["29ee8b5b2da056b6"]]}]

```

Here is the template code - its not pretty but it works (I will leave it to you to re-arrange it for the parts you want to automate)

```html
<template>
    <div ref="charttpw" style="width: 500px; height: 200px"></div>
</template>

<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

<script>

    export default {
        data() {
            return {
                myChart: null
            }
        },
        watch: {
            msg: function () {
                if (this.msg.topic === "data") {
                    this.update(this.msg.payload.labels, this.msg.payload.data, this.msg.payload.title)
                }
            }
        },
        mounted() {
            let interval = setInterval(() => {
                if (window.echarts) {
                    clearInterval(interval);
                    // now it is loaded, we can initialise and use it
                    this.init();
                }
            }, 100);
        },
        methods: {
            init: function () {
                this.myChart = echarts.init(this.$refs.charttpw, "dark");
                // dummy / test data
                const labels = ['07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00']
                const data = [5300, 9280, 11250, 1260, 2270, 4300, 5550, 2500, 2400, 4390, 9380, 12390] 
                const title = "Tons per Hour"
                this.update(labels, data, title)
            },
            update: function (xAxisData, data, title) {
                this.myChart.setOption({
                    title: {
                        text: title
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "cross",
                        },
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {},
                        },
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        //top: '30%',
                    containLabel: true,
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: xAxisData,
                    },
                    yAxis: {
                        type: "value",
                        axisLabel: {
                            formatter: "{value} T",
                        },
                        axisPointer: {
                            snap: true,
                        },
                    },
                    visualMap: {
                        show: false,
                        dimension: 0,
                        pieces: [
                            { lte: 9, color: "green" },
                            { gt: 9, lte: 11, color: "red" },
                            { gt: 11, color: "green" },
                        ],
                    },
                    series: [{
                        name: "Tons",
                        type: "line",
                        smooth: true,
                        // prettier-ignore
                        data: data,
                        markArea: {
                        itemStyle: {
                            color: "rgba(255, 173, 177, 0.4)",
                        },
                        data: [[{ name: "Max Peak", xAxis: "9:00" }, { xAxis: "11:00" }]],
                        },
                    }],
                });
            }
        }
    }
</script>

```

---

_[View the full topic](https://discourse.nodered.org/t/how-to-configure-echarts-in-dashboard-2/87259)._