How To Change Line Thickness of Chart

Hi All,

I've made chart with function code for custom my line chart. But i need to make the line more bigger. I've try to put syntax lineThickness on optional. But still doesn't work. Here is my code:

[
    {
        "id": "3a631079.44a3b8",
        "type": "function",
        "z": "7b83f797.4849b8",
        "name": "digital ampchart",
        "func": "// declare variables\nvar startmoment = context.get(\"startmoment\");\nvar chartdata5 = context.get(\"chartdata5\") || [];\nvar chartdata = context.get(\"chartdata\") || [];\n//////////////////////////////////////////////////\n\n\n// reset button has topic 'reset'. clear all data\nif(msg.topic === \"reset\"){\n startmoment = undefined;\n context.set(\"startmoment\",startmoment);\n context.set(\"chartdata\",[]);\n msg.payload = [];\n return msg;\n}\n\n// keep startmoment undefined if not set and no new data yet.\n// after reset first data marks initial time\nif(startmoment === undefined){\n startmoment = new Date().getTime();\n context.set(\"startmoment\",startmoment);\n}\n\n\n\n// calculate time difference\n\n\nfunction radians (degrees) {\n  return degrees * Math.PI / 180;\n}\n\n// hours + minutes convertion\nvar min = new Date().getHours() *60 + new Date().getMinutes();\n\n//create degree for 1440 point\nvar deg = 360/ 1440 * min;\n\nvar adh = msg.payload;\nvar xnew = adh * Math.sin(radians(deg));\nvar ynew = adh * Math.cos(radians(deg));\n\n// debug calculated values\n//node.warn(deg+ \" \"+adh +\" \"+xnew+\" \"+ynew)\n\n// create chart point object\nvar ob = {x:xnew, y:ynew};\n// collect datapoints\nchartdata.push(ob);\n\n// limit data collection length\n\n//store data set\ncontext.set(\"chartdata\",chartdata);\n\n//////////////////////////////////////////////////////////////////////////////////\n// reset button has topic 'reset'. clear all data\nif(msg.topic === \"reset\"){\n startmoment = undefined;\n context.set(\"startmoment\",startmoment);\n     context.set(\"chartdata5\",[]);\n msg.payload = [];\n return msg;\n}\n\n\nfor (var i=0; i<=360; i++) {\n    \n  //////////////////////////\n    var ob5 = {x:xnew5, y:ynew5};\nvar xnew5 = 5 * Math.sin(radians(i));\nvar ynew5 = 5 * Math.cos(radians(i));\n chartdata5.push(ob5);\n \n}\n\n\nmsg.payload = [{\n\"series\": [\"5\",\"A\"],\n\"xAxisID\": 'custom-x-axis',\n\"yAxisID\": 'custom-y-axis',\n\"data\": [chartdata5,chartdata],\n\"labels\": [\"\"],\n\"align\": 'center'\n}];\n\nmsg.ui_control = {\n    options: {\n        legend: {\n            display: false\n        },\n       scales: {\n           \n            xAxes: [{\n                gridLines: {\n                display:false},\n                type: 'linear',\n                id: 'custom-x-axis',\n                position:'bottom',\n                ticks: {display : false,\n                  //  fontColor:\"#ccc\",\n                  //  max: 5,\n                  //  min: -5,\n                   // stepSize: 1\n                }\n            }],\n            yAxes: [{\n                gridLines: {\n                display:false},\n                id: 'custom-y-axis',\n                ticks: {display : false,\n                  //  max: 5,\n                  //  min: -5,\n                  //  fontColor:\"#ccc\",\n                   \n                }\n            }]\n       }\n    }\n};\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 608.8887939453125,
        "y": 175.0000457763672,
        "wires": [
            [
                "cc5d25b.86c4658"
            ]
        ]
    },
    {
        "id": "cc5d25b.86c4658",
        "type": "ui_chart",
        "z": "7b83f797.4849b8",
        "name": "",
        "group": "9f5dd067.1a426",
        "order": 1,
        "width": "22",
        "height": "22",
        "label": "",
        "chartType": "line",
        "legend": "false",
        "xformat": "mm",
        "interpolate": "linear",
        "nodata": "",
        "dot": false,
        "ymin": "-5",
        "ymax": "5",
        "removeOlder": "24",
        "removeOlderPoints": "",
        "removeOlderUnit": "3600",
        "cutout": 0,
        "useOneColor": false,
        "colors": [
            "#00ffff",
            "#400000",
            "#0000ff",
            "#0000ff",
            "#00ffff",
            "#ff0000",
            "#ffffff",
            "#9467bd",
            "#c5b0d5"
        ],
        "useOldStyle": false,
        "outputs": 1,
        "x": 778.22216796875,
        "y": 163.00003051757812,
        "wires": [
            []
        ]
    },
    {
        "id": "cbd32a21.731e88",
        "type": "inject",
        "z": "7b83f797.4849b8",
        "name": "",
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "repeat": "300",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "x": 165.83334350585938,
        "y": 170.00001525878906,
        "wires": [
            [
                "e5ecb5c1.8c144"
            ]
        ]
    },
    {
        "id": "e5ecb5c1.8c144",
        "type": "function",
        "z": "7b83f797.4849b8",
        "name": "",
        "func": "rnd= Math.round (Math.random()*5);\nmsg.payload= rnd;\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 370.8333435058594,
        "y": 177.2222442626953,
        "wires": [
            [
                "3a631079.44a3b8"
            ]
        ]
    },
    {
        "id": "9f5dd067.1a426",
        "type": "ui_group",
        "z": "",
        "name": "Digital Amp-Chart",
        "tab": "a0367898.8f8da8",
        "order": 4,
        "disp": false,
        "width": "22",
        "collapse": false
    },
    {
        "id": "a0367898.8f8da8",
        "type": "ui_tab",
        "z": "",
        "name": "TL-031",
        "icon": "dashboard"
    }
]

Please somebody help me to custom the line thickness.

1 Like

Property to change line thickness is line.borderWidth

msg.ui_control = {
    options: {
        elements: {
            line: {
                borderWidth: 5 // default = 3
            }
        }, .....
4 Likes

Thank you @hotNipi . :clap::clap: