I use Amcharts heat map chart and need to change one property.
I find from dev tool right place
this is original
fixed in dev tools
I cant get right colors chart, if I try to write this overriding in template?
.nr-dashboard-theme .nr-dashboard-template path {
1. /* fill: #1286f3; */
}
I try none and opacity in properties
flow
[
{
"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
}
]
