![image](https://global.discourse-cdn.com/business6/uploads/nodered/original/3X/f/f/ffeb74ce44d27c170dc4b7a347934b1051c5899e.png)
Basic Bar Chart
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
<script>
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
)
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
)
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
)
</script>
<script src="https://cdn.jsdelivr.net/npm/react@16.12/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16.12/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prop-types@15.7.2/prop-types.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/react-apexcharts@1.3.6/dist/react-apexcharts.iife.min.js"></script>
<script>
// Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
// Based on https://gist.github.com/blixt/f17b47c62508be59987b
var _seed = 42;
Math.random = function() {
_seed = _seed * 16807 % 2147483647;
return (_seed - 1) / 2147483646;
};
</script>
<div id="app"></div>
<script type="text/babel">
class ApexChart extends React.Component {
constructor(props) {
super(props);
this.state = {
series: [{
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
}],
options: {
chart: {
type: 'bar',
height: 350
},
plotOptions: {
bar: {
borderRadius: 4,
horizontal: false,
}
},
dataLabels: {
enabled: true
},
xaxis: {
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
'United States', 'China', 'Germany'
],
}
},
};
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="bar" height={350} />
</div>
<div id="html-dist"></div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(ApexChart), domContainer);
</script>
I want show data in apexcharts using template node,
[
{
"id": "d11ef169d2055a82",
"type": "tab",
"label": "Flow 4",
"disabled": false,
"info": ""
},
{
"id": "19df53b3fb7177ec",
"type": "template",
"z": "d11ef169d2055a82",
"name": "",
"field": "payload",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "\n\n \n \n \n \n Basic Bar Chart\n\n \n\n \n \n #chart {\n max-width: 650px;\n margin: 35px auto;\n }\n \n \n\n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n\n \n \n
\n\n\n\n \n\n \n \n",
"output": "str",
"x": 340,
"y": 260,
"wires": [
[
"af9c164a11632f22"
]
]
},
{
"id": "af9c164a11632f22",
"type": "http response",
"z": "d11ef169d2055a82",
"name": "",
"statusCode": "",
"headers": {},
"x": 510,
"y": 260,
"wires": []
},
{
"id": "b4404c868f4eee38",
"type": "http in",
"z": "d11ef169d2055a82",
"name": "",
"url": "/book",
"method": "get",
"upload": false,
"swaggerDoc": "",
"x": 140,
"y": 260,
"wires": [
[
"19df53b3fb7177ec"
]
]
}
]