JSFiddle - React, Tailwind, and code Playground

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div class="row">
                        <div class="col-md-12 marginT25">
                            <div class="questionLabel">
                                1. Best scored areas:
                            </div>
                            Results based on <span class="overallScoreCount"><?= $overallScoreCount; ?></span> responses to this question.
                        </div>
                      
                    </div>
                    <div class="chart-legend-container marginT25">
                        <div class="row overallScoring">
                            <div class="nodataBestScore" style="<?= $bestscoreopacity; ?>"><h4><?= __('nodatafound') ?></h4></div>
                            <div class="col-md-12">
                                <div id="chartBestScore" style="height: 100%; width: 100%;"></div>
                            </div>
                        </div>
                        <script type="text/javascript">
                           
                        </script>
                    </div>

JavaScript

var bestScoredAreas = [{"y":0,"label":"Photo 1","indexLabel":"0 of 694 = 0.00%"},{"y":0,"label":"2nd AUDITOR: Feedback","indexLabel":"0 of 33 = 0.00%"},{"y":0,"label":"GREY ZONE COMMENTS","indexLabel":"0 of 166 = 0.00%"},{"y":0,"label":"GREEN ZONE WAITING ROOM STAND N COMMENTS","indexLabel":"0 of 195 = 0.00%"},{"y":0,"label":"Photo 2","indexLabel":"0 of 694 = 0.00%"},{"y":0,"label":"2nd AUDITOR: Name and position","indexLabel":"0 of 62 = 0.00%"},{"y":0,"label":"GREEN ZONE STD J COMMENTS","indexLabel":"0 of 166 = 0.00%"},{"y":0,"label":"YELLOW ZONE STANDS A-H COMMENTS","indexLabel":"0 of 195 = 0.00%"},{"y":0,"label":"Photo 3","indexLabel":"0 of 694 = 0.00%"},{"y":0,"label":"2nd AUDITOR: Signature","indexLabel":"0 of 64 = 0.00%"},{"y":0,"label":"GREEN ZONE OFFICE & STANDS L - R COMMENTS","indexLabel":"0 of 262 = 0.00%"},{"y":0,"label":"TURQUOISE ZONE STANDS N-R & STANDS S,T & V:Bollards COMMENTS","indexLabel":"0 of 195 = 0.00%"},{"y":0,"label":"Photo 4","indexLabel":"0 of 694 = 0.00%"},{"y":0,"label":"GREEN ZONE COMMENTS","indexLabel":"0 of 166 = 0.00%"},{"y":0,"label":"GREEN ZONE: STANDS A - C COMMENTS","indexLabel":"0 of 71 = 0.00%"},{"y":0,"label":"RED ZONE: STANDS S - Y COMMENTS","indexLabel":"0 of 262 = 0.00%"},{"y":0,"label":"Photo 5","indexLabel":"0 of 694 = 0.00%"},{"y":0,"label":"RED ZONE COMMENTS","indexLabel":"0 of 166 = 0.00%"},{"y":0,"label":"RED ZONE: STANDS D & Office COMMENTS","indexLabel":"0 of 71 = 0.00%"},{"y":0,"label":"AUDITOR: Signature","indexLabel":"0 of 694 = 0.00%"},{"y":0,"label":"Is this a joint audit?","indexLabel":"0 of 694 = 0.00%"},{"y":0,"label":"BLUE ZONE COMMENTS","indexLabel":"0 of 166 = 0.00%"},{"y":0,"label":"BLUE ZONE STANDS E-G COMMENTS","indexLabel":"0 of 71 = 0.00%"},{"y":0,"label":"AUDITOR: Feedback","indexLabel":"0 of 694 = 0.00%"},{"y":0,"label":"YELLOW ZONE COMMENTS","indexLabel":"0 of 166 = 0.00%"},{"y":0,"label":"PINK ZONE CYCLE CORRIDOR COMMENTS","indexLabel":"0 of 71 = 0.00%"},{"y":0,"label":"AUDITOR: Name and...