Adding a chart within Granicus forms

[Taffmeister]

I am trying to add a chart.js graph to a granicus form.

When I try the code out of granicus it all works as expected.
Perhaps easier if I put the code in below.
all works apart from the background colors.

If I use barColors as the variable for the background colors it works, but if I use barColors2 as the variable it doesnt work.

if I dicument.write the 2 variables they are identical.

Any ideas why it would break using barColors2?
(Both work if i put them in an javascript editor such as w3schools it's just when in the granicus environment that it fails.)

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<canvas id="myChart" style="width:600%;max-width:600px"></canvas>
<form>        <input type="string" name="land" id="land" placeholder="Land Use" value="1" required>
        <input type="string" name="soil" id="soil" placeholder="Soil" value="2" required>
        <input type="string" name="bio" id="bio" placeholder="Biodiversity" value="3" required>
        <input type="string" name="greenhouse" id="greenhouse" placeholder="Greenhouse Gas Emissions" value="4" required>
        <input type="string" name="renewable" id="renewable" placeholder="Renewable Energy" value="5" required>
        <input type="string" name="woodland" id="woodland" placeholder="Woodland/Hedgerow Health" value="4" required>
        <input type="string" name="water" id="water" placeholder="water" value="3" required>
       <input type="string" name="pollution" id="pollution" placeholder="pollution" value="2" required>
        <input type="string" name="air" id="air" placeholder="air" value="1" required>
        <input type="string" name="circular" id="circular" placeholder="circular" value="2" required>
        <input type="string" name="climate" id="climate" placeholder="climate" value="3" required>
          
<hr/> 
        <input type="string" name="landColour" id="landColour" placeholder="Land Use" value="#e2efda" required>
        <input type="string" name="soilColour" id="soilColour" placeholder="Soil" value="#ffe699" required>
        <input type="string" name="bioColour" id="bioColour" placeholder="Biodiversity" value="#cccccc" required>
        <input type="string" name="greenhouseColour" id="greenhouseColour" placeholder="Greenhouse Gas Emissions" value="#e2efda" required>
        <input type="string" name="renewableColour" id="renewableColour" placeholder="Renewable Energy" value="#a9d08e" required>
        <input type="string" name="woodlandColour" id="woodlandColour" placeholder="Woodland/Hedgerow Health" value="#e2efda" required>
        <input type="string" name="waterColour" id="waterColour" placeholder="water" value="#cccccc" required>
        <input type="string" name="pollutionColour" id="pollutionColour" placeholder="pollution" value="#ffe699" required>
        <input type="string" name="airColour" id="airColour" placeholder="air" value="#ff9999" required>
        <input type="string" name="circular" id="circularColour" placeholder="circularColour" value="#ffe699" required>
         <input type="string" name="climateColour" id="climateColour" placeholder="climate" value="#cccccc" required>
           

<script>
var landValue = (document.getElementById('land').value);
 var soilValue = (document.getElementById('soil').value);
 var bioValue = (document.getElementById('bio').value);
 var greenhouseValue = (document.getElementById('greenhouse').value);
 var renewableValue = (document.getElementById('renewable').value);
 var woodlandValue = (document.getElementById('woodland').value);
 var waterValue = (document.getElementById('water').value);
 var pollutionValue = (document.getElementById('pollution').value);
 var airValue = (document.getElementById('air').value);
 var circularValue = (document.getElementById('circular').value);
 var climateValue = (document.getElementById('climate').value);




var landValueColour = (document.getElementById('landColour').value);
var soilValueColour = (document.getElementById('soilColour').value);
var bioValueColour = (document.getElementById('bioColour').value);
var greenhouseValueColour = (document.getElementById('greenhouseColour').value);
var renewableValueColour = (document.getElementById('renewableColour').value);
var woodlandValueColour = (document.getElementById('woodlandColour').value);
var waterValueColour = (document.getElementById('waterColour').value);
var pollutionValueColour = (document.getElementById('pollutionColour').value);
var airValueColour = (document.getElementById('airColour').value);
var circularValueColour = (document.getElementById('circularColour').value);
var climateValueColour = (document.getElementById('climateColour').value);


var xValues = ["Land Use", "Soil and Waterway Health", "Biodiversity", "Greenhouse Gas Emissions", "Renewable Energy", "Woodland/Hedgerow Health", "Water Resources","Pollution","Air Quality","Circular Economy","Climate Change Adaptation"];

var yValues = [landValue, soilValue, bioValue, greenhouseValue, renewableValue,woodlandValue,waterValue,pollutionValue,airValue,circularValue,climateValue];

var barColors2 = [landValueColour,
                soilValueColour,
                bioValueColour,
                greenhouseValueColour,
                renewableValueColour,
                woodlandValueColour,
                waterValueColour,
                pollutionValueColour,
                airValueColour,
            	circularValueColour,
                climateValueColour
 ];
var barColors = ["#e2efda","#ffe699","#cccccc","#e2efda","#a9d08e","#e2efda","#cccccc","#ffe699","#ff9999","#ffe699","#cccccc"
];

new Chart("myChart", {
  type: "doughnut",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors2,
      data: yValues
    }]
  },
  options: {
    title: {
      display: true,
      text: "Carbon Impact Assessment"
    }
  }
});
document.write ("<hr/>"+barColors+"<hr/>")
document.write (barColors2)

</script>