# Chart style fixing

**URL:** <https://discourse.nodered.org/t/chart-style-fixing/64927>\
**Category:** Dashboard\
**Created:** [11 July 2022 04:35 UTC](https://discourse.nodered.org/t/chart-style-fixing/64927 "2022-07-11T04:35:18Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kundepuu](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@Kundepuu](https://discourse.nodered.org/u/Kundepuu)\
**Post date:** [11 July 2022 04:35 UTC](https://discourse.nodered.org/t/chart-style-fixing/64927/1 "2022-07-11T04:35:18Z")

</div>

I use Amcharts heat map chart and need to change one property.  
I find from dev tool right place  
this is original

 ![chart2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/7/c79636249aac8b0705ae4c9250323856604208cb.png)

fixed in dev tools

 ![Chart1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/6/d6cfa407b90ba94e0831aae640000c60fe17a15c.png)

I cant get right colors chart, if I try to write this overriding in template?

```auto
.nr-dashboard-theme .nr-dashboard-template path {
1. /* fill: #1286f3; */
}

```

I try none and opacity in properties

flow

```auto
[
    {
        "id": "551810e024fd25e4",
        "type": "tab",
        "label": "Chart",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "4fb7c6f9c4b6301a",
        "type": "template",
        "z": "551810e024fd25e4",
        "name": "",
        "field": "template",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<style>\n #chartdiv {\n width: 100%;\n height: 250px;\n background-color: antiquewhite;\n }\n</style>\n<script src=\"https://cdn.amcharts.com/lib/4/core.js\"></script>\n<script src=\"https://cdn.amcharts.com/lib/4/charts.js\"></script>\n<script src=\"https://cdn.amcharts.com/lib/4/themes/animated.js\"></script>\n<div id=\"chartdiv\"></div>\n<script>\nam4core.ready(function() {\nam4core.disposeAllCharts();\nam4core.useTheme(am4themes_animated);\nchart = am4core.create(\"chartdiv\", am4charts.XYChart);\nchart.responsive.enabled = true;\n//chart.data ={{{data}}};\n chart.data = [{\n \"category\": \"Research\",\n \"value\": 450\n }, {\n \"category\": \"Marketing\",\n \"value\": 1200\n }, {\n \"category\": \"Distribution\",\n \"value\": 1850\n }, {\n \"category\": \"HR\",\n \"value\": 850\n }, {\n \"category\": \"Sales\",\n \"value\": 499\n }, {\n \"category\": \"Support\",\n \"value\": 871\n }, {\n \"category\": \"Other\",\n \"value\": 512\n }]; \n\nvar categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());\ncategoryAxis.dataFields.category = \"category\";\ncategoryAxis.renderer.grid.template.location = 0;\ncategoryAxis.renderer.minGridDistance = 30;\n\nvar valueAxis = chart.yAxes.push(new am4charts.ValueAxis());\n\nvar series = chart.series.push(new am4charts.ColumnSeries());\nseries.dataFields.value = \"value\";\nseries.dataFields.valueY = \"value\";\nseries.dataFields.categoryX = \"category\";\nseries.columns.template.strokeWidth = 0;\n\nseries.heatRules.push({\n \"target\": series.columns.template,\n \"property\": \"fill\",\n \"min\": am4core.color(\"#0000FF\"),\n \"max\": am4core.color(\"#FF0000\")\n });\n\nvar heatLegend = chart.createChild(am4charts.HeatLegend);\nheatLegend.series = series;\nheatLegend.width = am4core.percent(100);\nheatLegend.valueAxis.renderer.labels.template.fontSize = 20;\n heatLegend.valueAxis.renderer.minGridDistance = 30;\nheatLegend.markerCount = 10;\n});\n</script>",
        "output": "str",
        "x": 580,
        "y": 300,
        "wires": [
            [
                "cb3a935d55a72860"
            ]
        ]
    },
    {
        "id": "cb3a935d55a72860",
        "type": "ui_template",
        "z": "551810e024fd25e4",
        "group": "6d809819c563b590",
        "name": "",
        "order": 1,
        "width": 24,
        "height": 12,
        "format": "<div ng-bind-html=\"msg.payload\"></div>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 780,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "9c23377abb5a099e",
        "type": "inject",
        "z": "551810e024fd25e4",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 320,
        "y": 300,
        "wires": [
            [
                "4fb7c6f9c4b6301a"
            ]
        ]
    },
    {
        "id": "6d809819c563b590",
        "type": "ui_group",
        "name": "Test",
        "tab": "7b1488e71786be30",
        "order": 1,
        "disp": true,
        "width": 24,
        "collapse": false,
        "className": ""
    },
    {
        "id": "7b1488e71786be30",
        "type": "ui_tab",
        "name": "Chart",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![Kundepuu](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@Kundepuu](https://discourse.nodered.org/u/Kundepuu)\
**Post date:** [11 July 2022 08:15 UTC](https://discourse.nodered.org/t/chart-style-fixing/64927/2 "2022-07-11T08:15:47Z")

</div>

find solution!  
[https://github.com/node-red/node-red-dashboard/issues/447](https://github.com/node-red/node-red-dashboard/issues/447)

 ![bugi](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/d/ad825d2a43ef607b27efcb16fad8bc1a4b3c4fb7.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [25 July 2022 08:16 UTC](https://discourse.nodered.org/t/chart-style-fixing/64927/3 "2022-07-25T08:16:19Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.