Hi Ian,
I need to generate a bar chart for datasets which includes some null values. An example URL is as following:
https://quickchart.io/chart?c={%0A++type%3A+%22horizontalBar%22%2C%0A++data%3A+{%0A++++labels%3A+[%22Hopital_1%22%2C+%22Hopital_2%22%2C+%22Hopital_3%22%2C+%22Hopital_4%22%2C+%22Hopital_5%22%2C+%22Hopital_6%22%2C+%22Hopital_7%22%2C+%22Hopital_8%22%2C+%22Hopital_9%22%2C+%22Hopital_10%22%2C+%22Hopital_11%22%2C+%22Hopital_12%22%2C+%22Hopital_13%22%5D%2C%0A++++datasets%3A+%5B%0A++++++%2F%2F+%7B%0A++++++%2F%2F+++label%3A+%22%28N%2FV%29+No+Volume%22%2C%0A++++++%2F%2F+++backgroundColor%3A+%22%23FFFFFF%22%2C%0A++++++%2F%2F+++borderWidth%3A+0%2C%0A++++++%2F%2F+++data%3A+%5B50.0%2C+null%2C+null%2C+71.4%2C+null%2C+100.0%2C+36.4%2C+0.0%2C+40.0%2C+55.6%2C+null%2C+42.9%2C+48.0%5D%0A++++++%2F%2F+%7D%2C%0A++++++%7B%0A++++++++label%3A+%22Self-Transport%22%2C%0A++++++++backgroundColor%3A+%22%2353277E%22%2C%0A++++++++borderWidth%3A+0%2C%0A++++++++data%3A+%5B40.0%2C+33.3%2C+null%2C+40.0%2C+null%2C+null%2C+31.6%2C+null%2C+28.6%2C+37.5%2C+null%2C+11.8%2C+29.0%5D%0A++++++%7D%2C%0A++++++%7B%0A++++++++label%3A+%22Paramedic+Services%22%2C%0A++++++++backgroundColor%3A+%22%23c8c8c8%22%2C%0A++++++++borderWidth%3A+0%2C%0A++++++++data%3A+%5B50.0%2C+null%2C+null%2C+71.4%2C+null%2C+100.0%2C+36.4%2C+0.0%2C+40.0%2C+55.6%2C+null%2C+42.9%2C+48.0%5D%0A++++++%7D%0A++++%5D%2C%0A++%7D%2C%0A++options%3A+%7B%0A++++scales%3A+%7B%0A++++++xAxes%3A+%5B+%7B%0A++++++++++ticks%3A+%7B%0A++++++++++++beginAtZero%3A+true%2C%0A++++++++++++steps%3A+10%2C%0A++++++++++++stepValue%3A+10%2C%0A++++++++++++max%3A+100%2C%0A++++++++++++padding%3A+10%2C%0A++++++++++++fontSize%3A9%2C%0A++++++++++++fontColor%3A+%22%23000000%22%2C%0A++++++++++%7D%0A++++++++%7D%2C%0A++++++%5D%2C%0A++++++yAxes%3A+%5B%0A++++++%7B%0A++++++++ticks%3A+%7B%0A++++++++++labelOffset%3A+5%2C%0A++++++++++padding%3A+30%2C%0A++++++++++fontSize%3A9%2C%0A++++++++++fontColor%3A+%22%23000000%22%2C%0A++++++++%7D%2C%0A++++++++barPercentage%3A+0.8%2C%0A++++++++categoryPercentage%3A+1.0%2C%0A++++++%7D%2C%0A++++%5D%2C%0A++++%7D%2C%0A++++elements%3A+%7B%0A++++++rectangle%3A+%7B%0A++++++++borderWidth%3A+2%2C%0A++++++%7D%2C%0A++++%7D%2C%0A++++responsive%3A+true%2C%0A++++legend%3A+%7B%0A++++++position%3A+%22top%22%2C%0A++++++labels%3A+%7B%0A++++++++boxWidth%3A+14%2C%0A++++++%7D%2C%0A++++%7D%2C%0A++++title%3A+%7B%0A++++++display%3A+true%2C%0A++++++text%3A+%22Default+Title%22%2C%0A++++++fontSize%3A+%2220%22%2C%0A++++++fontFamily%3A+%22Roboto%22%2C%0A++++++fontColor%3A+%22%23429871%22%2C%0A++++%7D%2C%0A++++plugins%3A+%7B%0A++++++autocolors%3A+false%2C%0A++++++annotation%3A%7B%0A++++++++annotations%3A%7B%0A++++++++++line1%3A%7B%0A++++++++++++type%3A%27line%27%2C%0A++++++++++++xMin%3A75%2C%0A++++++++++++xMax%3A75%2C%0A++++++++++++borderWidth%3A2%2C%0A++++++++++++borderColor%3A%22rgb%28255%2C+99%2C+132%29%22%0A++++++++++%7D%0A++++++++%7D%0A++++++%7D%2C%0A++++++datalabels%3A+%7B%0A++++++++display%3A+true%2C%0A++++++++align%3A+%22start%22%2C%0A++++++++anchor%3A+%22start%22%2C%0A++++++++borderRadius%3A+1%2C%0A++++++++color%3A+function+%28ctx%29+%7B%0A++++++++++if+%28ctx.dataset.backgroundColor+%3D%3D%3D+%22%2353277E%22%29+%7B%0A++++++++++++return+ctx.dataset.backgroundColor%3B%0A++++++++++%7D%0A++++++++++return+%22black%22%3B%0A++++++++%7D%2C%0A++++++++font%3A+%7B%0A++++++++++size%3A+9%2C%0A++++++++%7D%2C%0A++++++++formatter%3A+%28value%29+%3D%3E+%7B%0A++++++++++if%28value+%3D%3D+null%29%7B%0A++++++++++++return+%22N%2FV%22%3B%0A++++++++++%7D+else%7B%0A++++++++++++return+Math.round%28value%29+%2B+%27%25%27%3B%0A++++++++++%7D++++++++++%0A++++++++%7D%2C%0A++++++%7D%2C%0A++++%7D%2C%0A++%7D%2C%0A%7D%3B&w=400&h=600&bkg=%23ffffff&devicePixelRatio=0.8&f=png&v=2.9.4
Following customized formatter seems not working.
formatter: (value) => {
if(value == null){
return “N/V”;
} else{
return Math.round(value) + ‘%’;
}
Is it possible to support this sort of customization?
Thanks,
Eric
