# @s1seven/node-red-chartjs -- Getting Started

**URL:** <https://discourse.nodered.org/t/s1seven-node-red-chartjs-getting-started/71326>\
**Category:** Dashboard\
**Created:** [27 November 2022 16:54 UTC](https://discourse.nodered.org/t/s1seven-node-red-chartjs-getting-started/71326 "2022-11-27T16:54:02Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mick](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mick/32/80990_2.png) [@Mick](https://discourse.nodered.org/u/Mick)\
**Post date:** [27 November 2022 16:54 UTC](https://discourse.nodered.org/t/s1seven-node-red-chartjs-getting-started/71326/1 "2022-11-27T16:54:02Z")

</div>

I have loaded the node-red-chartjs.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/0/60ad21fde6658a99ffc2ac6423ea7423d6ceff1b.png)

I created a simple flow based on the s1seven/node-red-chartjs documentation.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/c/8c914a14fffb307da63975a9b5c097ee23491d53.png)

I am trying to get the example in the example to render on my test dashboard. So far I can't get it to show anything. The function output looks good to me, however no chart on the ui.

Here is the output from the the function:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/8/38ad8e331c59b03a66c4415368878cf35f801668.png)

Maybe some one can advise.

```auto
[{"id":"319bc1ab0a0be1da","type":"ui_template","z":"7f16363fe0d29b4f","group":"63b0eac674a63a21","name":"Chartjs","order":0,"width":0,"height":0,"format":"<script src=\"/resources/node-red-chartjs/chart.min.js\"></script>\n<script src=\"/resources/node-red-chartjs/chartjs-plugin-annotation.min.js\"></script>\n\n<div>\n <canvas id=\"myChartScatter\" height=\"1\" width=\"1\"></canvas>\n</div>\n<script>\n new Chart(document.getElementById('myChartScatter'), {\n type: 'scatter',\n data: {\n datasets: [{\n label: '{{{payload.legend}}}',\n data: '{{{payload.data}}}',\n showLine: false,\n backgroundColor: 'rgb(255, 99, 132)',\n }],\n },\n options: {\n title: {\n display: true,\n text: '{{{payload.title}}} Content',\n },\n\n plugins: {\n autocolors: false,\n annotation: {\n annotations: {\n minLine: {\n type: 'line',\n borderColor: 'red',\n borderWidth: 1,\n label: {\n enabled: true,\n backgroundColor: 'red',\n borderColor: 'red',\n borderRadius: 10,\n borderWidth: 1,\n content: 'min',\n rotation: 'auto'\n },\n scaleID: 'y',\n value: {{{min}}}\n },\n maxLine: {\n type: 'line',\n borderColor: 'red',\n borderWidth: 1,\n label: {\n enabled: true,\n backgroundColor: 'red',\n borderColor: 'red',\n borderRadius: 10,\n borderWidth: 1,\n content: 'max',\n rotation: 'auto'\n },\n scaleID: 'y',\n value: {{{max}}}\n },\n }\n }\n },\n\n scales: {\n y: {\n beginAtZero: true,\n suggestedMax: {{{max}}} * 1.5,\n },\n x: {\n grid: {\n display: false,\n },\n }\n }\n }\n });\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":460,"y":120,"wires":[["8399e3bbc0928a13"]]},{"id":"63b0eac674a63a21","type":"ui_group","name":"Default","tab":"c3b459709757d3ab","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"c3b459709757d3ab","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

Thanks in advance

---

<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:** [27 December 2022 16:54 UTC](https://discourse.nodered.org/t/s1seven-node-red-chartjs-getting-started/71326/2 "2022-12-27T16:54:54Z")

</div>

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