Bar chart / Graph visible properly on localhost but not visible properly on Azure portal deployed environment

[brijeshkothari6492]

Describe the bug

We are using library for displaying different charts based on responses. On localhost same way implemented graphic chart is prepared on our .docx file properly, but same seems cluttered even confusing while deploying on Azure devops

Chart Configuration

            chartconfiguration = {
                    type: 'bar',
                    maintainAspectRatio: false,
                    data: {
                        labels: [ 'true' ], //label
                        datasets: [ { data: [ 1 ],
                            backgroundColor:
                             [ '#009CA6',
                               '#7B57CB',
                               '#D62598',
                               '#FF8A3D',
                               '#00C1CD',
                               '#9578D5',
                               '#DF44A8',
                               '#FFA264' ] } ]
                    },
                    options: {
                        indexAxis: 'y',
                        plugins: {
                            legend: {
                                display: true, // tried with dynamic & static true/false but its not working
                            }
                        },
                        scales: {
                            yAxes: {
                                ticks: {
                                    font: {
                                        size: 50,
                                    },
                                    // wtaf: https://www.chartjs.org/docs/3.5.0/samples/scale-options/ticks.html
                                    callback: function(index) {
                                        var actuallabel =  this.getLabelForValue(index);
                                        console.log(`generating label for ${actuallabel}`);
                                        if(typeof actuallabel == 'string' && actuallabel.length > 60){
                                            return actuallabel.substr(0, 60);//truncate
                                        } else {
                                            return actuallabel;
                                        }
                                    },
                                }
                            },
                            xAxes: {
                                ticks: {
                                    font: {
                                        size: 50,
                                    }
                                }
                            }
                        }
                    },
                    plugins: [{
                        id: 'background-colour',
                        beforeDraw: (chart) => {
                            const ctx = chart.ctx;
                            ctx.save();
                            ctx.fillStyle = 'white';
                            ctx.fillRect(0, 0, 600, 600);
                            ctx.restore();
                        }
                    }]
                };

All dynamic values we tried in real code with following values. Please find below with variable values

• chartwidth : 600
• chartheight : 600
• chartjsfontsize : 50
• chartshowlegend : true (Display true/false) We tried with both true & false but its not showing proper chart

Versions

• NodeJS version: 10.16.3
• Chart.JS version: 3.7.1
• Typescript version (if applicable): x.x.x

Additional context

On localhost same way implemented graphic chart is prepared on our .docx file properly, but same seems cluttered even confusing while deploying on Azure devops

** Working on Localhost

** Azure Devops screenshot

Note : We tried with border width, different color style, display style but its still not working as expected. We appreciate your kindly quick help on same. Thanks in advance.

[tianjos]

same issue here