Chart.js is not visible in Chrome when width is too long, but fine in safari?

Question

So I am using the chart.js script within one of my offline site projects to display a graph on various pages all of very different number ranges. As the width for the canvas holding the graph is so dynamic and the bar chart width within this script cannot be set (as far as I can tell), I have set a function to get the vote range and multiply so that the bar width stays consistent between different graphs. I then use the scrollpane script so that the width of the chart is scrollable within the set div container.

The issue seems that when that width is too high, the chart is not displayed within Chrome, but it still displays ok in safari? The code is below? Is there anyway I can do this more efficiently to make it work as well?

<?php
$chartWidth = $voteAmountRange * 63;
        $voteCounts = getFinishedVoteCount($votesPlaced,$pageRef);
        $highestVoteCount = max($voteCounts);
  ?>

<div class="aligncenter  wp-chart-wrap" style="max-width: 100%; width: 600px; height: 400px; margin: 10px;" data-proportion="1"><canvas id="ChartTitle" height="380" width="<?php echo $chartWidth ?>" class="wp_charts_canvas" data-proportion="1" style="width: 625px; height: 600px;"></canvas></div>

    <script>var ChartTitleOps = {

showTooltips: true,
tooltipFillColor: "#e64c65",
tooltipFontFamily: "'Bree Serif', sans-serif",
tooltipFontColor: "#fff",
tooltipTemplate: "<%if (label){%><%=label%> <%}%>(<%= value %> votes)",
barValueSpacing : 2,
scaleLineWidth: 10,
scaleFontFamily: "'Bree Serif', sans-serif",responsive: false,animation: false,maintainAspectRatio: false,scaleIntegersOnly: true,scaleShowGridLines : false,scaleBeginAtZero : true,scaleFontSize: 17,scaleFontColor: "#FFFFFF",scaleOverride:true,scaleSteps:<?php echo $highestVoteCount ?>,scaleStepWidth:1,scaleStartValue:0,scaleGridLineColor : "#1f253d"}; var ChartTitleData = {labels : [<?php styleFinishedVoteAmounts($votesPlaced); ?>],datasets : [{
                fillColor   : "rgba(52,104,175,0.7)",
                strokeColor : "rgba(52,104,175,1)",
                data        : [<?php styleFinishedVoteCount($voteCounts); ?>]
            }]};var wpChartChartTitleBar = new Chart(document.getElementById("ChartTitle").getContext("2d")).Bar(ChartTitleData,ChartTitleOps);
        wpChartChartTitleBar.datasets[0].bars[<?php echo $lowestUniqueWithinArray; ?>].fillColor = "rgba(39, 174, 96,1.0)";
        wpChartChartTitleBar.datasets[0].bars[<?php echo $lowestUniqueWithinArray; ?>].highlightFill = "rgba(39, 174, 96,1.0)";
        wpChartChartTitleBar.update();
</script>

Welcome to the Treehouse Community

Looking to learn something new?

Gary Stewart

Gary Stewart

Chart.js is not visible in Chrome when width is too long, but fine in safari?