Google Chart not affected with specified options

I'm using Google Charts API and charts are displaying correctly, but any options don't seem to be working. I'm trying to customise the bar colours and remove the legend, but it's not working. Can't work out what I'm missing as it seems to be as per the documentation.
Any ideas?

function show_workpack_chart ($project, $con) {        
    // Get the data (works ok but removed here)
    $dataset = "['Workpack Budget vs Actual Hours', 'Budget Hours', 'Hours Spent']";
    $values = "";
        while ($row = mysqli_fetch_assoc($result)) {
        $values .= "['" . $row["name"] . "', " . $row["manhours"] . ", " . $row["hoursspent"] . ",],";
        
        }    
    
    // Load the charts library
    echo '<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>';
    echo "<script type=\"text/javascript\">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          " . $dataset . ", " . $values . "
        ]);

        var options = {
          chart: {
            title: 'Workpack Overview',
            subtitle: 'Hours spent per workpack',
            legend: 'none',
            colors: ['#e0440e', '#e6693e']
            
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_hours'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>";
    
    // Now draw the chart
    echo '<div id="columnchart_hours" style="width: 100%; height: 350px;"></div>';
}

Specifically, the following has no effect:

legend: 'none',
colors: ['#e0440e', '#e6693e']

the colors and legend options should not be defined within chart

    var options = {
      chart: {
        title: 'Workpack Overview',
        subtitle: 'Hours spent per workpack'
      },
      legend: 'none',
      colors: ['#e0440e', '#e6693e']
    };

EDIT

to remove the legend, try using the following option...

legend: {
  position: 'none'
},

see following working snippet...

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

google.charts.load('current', {
  packages: ['bar']
}).then(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Workpack Budget vs Actual Hours', 'Budget Hours', 'Hours Spent'],
    ['Test', 12, 10]
  ]);

  var options = {
    chart: {
      title: 'Workpack Overview',
      subtitle: 'Hours spent per workpack',
    },
    legend: {
      position: 'none'
    },
    colors: ['#e0440e', '#e6693e']
  };

  var chart = new google.charts.Bar(document.getElementById('columnchart_hours'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

<!-- language: lang-html -->

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_hours" style="width: 100%; height: 350px;"></div>

<!-- end snippet -->