Line Chart Legend Not Clickable Link

[shaharzoo93]

Hi,

I used Node-red Dashboard Line Chart with legend option show.
It's working properly with a simple configuration.

If I set the zoom property via CSS the legend click is not working.

Please find below the flow for reproducing the same issue.

[
    {
        "id": "94a325948a9a7892",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "580bf4d57627ace3",
        "type": "function",
        "z": "94a325948a9a7892",
        "name": "all",
        "func": "\nmsg.payload= [{\n\"series\": [\"Temp1\", \"Hum\"],\n\"data\": [\n    [{ \"x\": 1559481514470, \"y\":30 },{ \"x\": 1559481524470, \"y\":20 },{ \"x\": 1559481534470, \"y\":40 }],\n    [{ \"x\": 1559481514470, \"y\":10 },{ \"x\": 1559481524470, \"y\":30 },{ \"x\": 1559481534470, \"y\":50 }]\n],\n\"labels\": [\"\"]\n}]\n    return msg;\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 590,
        "y": 180,
        "wires": [
            [
                "e22daaf3e10192f0",
                "4499936e86410fdb"
            ]
        ]
    },
    {
        "id": "e22daaf3e10192f0",
        "type": "debug",
        "z": "94a325948a9a7892",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 810,
        "y": 180,
        "wires": []
    },
    {
        "id": "6a9cccbc0bb11d98",
        "type": "inject",
        "z": "94a325948a9a7892",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 390,
        "y": 180,
        "wires": [
            [
                "580bf4d57627ace3"
            ]
        ]
    },
    {
        "id": "b6752e3837649089",
        "type": "ui_template",
        "z": "94a325948a9a7892",
        "group": "",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<style id='divpx1' type=\"text/css\">\n    /* display scale of 100% */\n    @media only screen and (min-resolution: 96dpi) and (max-resolution: 125dpi),\n    only screen and (min-resolution: 1dppx) and (max-resolution:1.25dppx) {\n        body {\n         //   zoom: 1.25;\n            /* Set the browser zoom to 125% */\n            //  transform-origin: 0% 0%;\n            //-webkit-text-size-adjust: 100%;\n        }\n    }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "x": 580,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "4499936e86410fdb",
        "type": "ui_chart",
        "z": "94a325948a9a7892",
        "name": "",
        "group": "f27afcb9.528a8",
        "order": 0,
        "width": 0,
        "height": 0,
        "label": "chart",
        "chartType": "line",
        "legend": "false",
        "xformat": "HH:mm:ss",
        "interpolate": "linear",
        "nodata": "",
        "dot": false,
        "ymin": "",
        "ymax": "",
        "removeOlder": 1,
        "removeOlderPoints": "",
        "removeOlderUnit": "3600",
        "cutout": 0,
        "useOneColor": false,
        "useUTC": false,
        "colors": [
            "#1f77b4",
            "#aec7e8",
            "#ff7f0e",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "outputs": 1,
        "useDifferentColor": false,
        "x": 830,
        "y": 100,
        "wires": [
            []
        ]
    },
    {
        "id": "f27afcb9.528a8",
        "type": "ui_group",
        "name": "Khu vực 1",
        "tab": "551dd698.ab8968",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "551dd698.ab8968",
        "type": "ui_tab",
        "name": "Biểu đồ",
        "icon": "pie_chart",
        "order": 1,
        "disabled": false,
        "hidden": true
    }
]

[dceejay]

Hi - not sure what problem you are describing... If I run your flow I see this when I hover over points

[shaharzoo93]

Please set display setting to 100% and then check the flow.

[dceejay]

I don't have a windows box so don't have those settings - but my screen is set to default and the browser to "Actual size" - ie 100% no zoom... what are you expecting to see ? Do you have a screenshot ?

[shaharzoo93]

Thanks for the quick response. Please use below flow to check legend click.

[
    {
        "id": "94a325948a9a7892",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "580bf4d57627ace3",
        "type": "function",
        "z": "94a325948a9a7892",
        "name": "all",
        "func": "\nmsg.payload= [{\n\"series\": [\"Temp1\", \"Hum\"],\n\"data\": [\n    [{ \"x\": 1559481514470, \"y\":30 },{ \"x\": 1559481524470, \"y\":20 },{ \"x\": 1559481534470, \"y\":40 }],\n    [{ \"x\": 1559481514470, \"y\":10 },{ \"x\": 1559481524470, \"y\":30 },{ \"x\": 1559481534470, \"y\":50 }]\n],\n\"labels\": [\"\"]\n}]\n    return msg;\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 590,
        "y": 180,
        "wires": [
            [
                "e22daaf3e10192f0",
                "4499936e86410fdb"
            ]
        ]
    },
    {
        "id": "e22daaf3e10192f0",
        "type": "debug",
        "z": "94a325948a9a7892",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 810,
        "y": 180,
        "wires": []
    },
    {
        "id": "6a9cccbc0bb11d98",
        "type": "inject",
        "z": "94a325948a9a7892",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 390,
        "y": 180,
        "wires": [
            [
                "580bf4d57627ace3"
            ]
        ]
    },
    {
        "id": "b6752e3837649089",
        "type": "ui_template",
        "z": "94a325948a9a7892",
        "group": "",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<style id='divpx1' type=\"text/css\">\n    /* display scale of 100% */\n     body {\n            zoom: 1.25;\n        }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "x": 580,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "4499936e86410fdb",
        "type": "ui_chart",
        "z": "94a325948a9a7892",
        "name": "",
        "group": "f27afcb9.528a8",
        "order": 0,
        "width": 0,
        "height": 0,
        "label": "chart",
        "chartType": "line",
        "legend": "true",
        "xformat": "HH:mm:ss",
        "interpolate": "linear",
        "nodata": "",
        "dot": false,
        "ymin": "",
        "ymax": "",
        "removeOlder": 1,
        "removeOlderPoints": "",
        "removeOlderUnit": "3600",
        "cutout": 0,
        "useOneColor": false,
        "useUTC": false,
        "colors": [
            "#1f77b4",
            "#aec7e8",
            "#ff7f0e",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "outputs": 1,
        "useDifferentColor": false,
        "x": 830,
        "y": 100,
        "wires": [
            []
        ]
    },
    {
        "id": "f27afcb9.528a8",
        "type": "ui_group",
        "name": "Khu vực 1",
        "tab": "551dd698.ab8968",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "551dd698.ab8968",
        "type": "ui_tab",
        "name": "Biểu đồ",
        "icon": "pie_chart",
        "order": 1,
        "disabled": false,
        "hidden": true
    }
]

[dceejay]

This seems to be a known problem with chart.js
e.g. see chartjs/Chart.js#7178
so we aren't going to fix it here
(you can apply the opposite zoom to the canvas element the chart is in (eg 0.8 in your example) - so the rest of the page is zoomed but the chart is not)

[shaharzoo93]

I applied the zoom property to Canvas and the chart looks proper but the legend click is not working.

If I removed the zoom CSS then the legend click is working properly.

In the given reference example, the chart does not zoom properly but the legend click is working with zoom CSS.

e.g. see chartjs/Chart.js#7178
https://jsfiddle.net/85f41yra/