<div class="chart">
  <canvas id="<%= chart_id %>" width="<%= canvas_width %>" height="<%= canvas_height %>"></canvas>
</div>
<script>
new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
  type: 'bubble',
  data: {
    datasets: <%= JSON.generate(data_sets) %>
  },
  options: {
    title: {
      display: true,
      text: "Sprint Burndown"
    },
    responsive: <%= canvas_responsive? %>, // If responsive is true then it fills the screen
    scales: {
      x: {
        type: "linear",
        scaleLabel: {
          display: true,
          labelString: 'Date'
        },
        title: {
          display: true,
          text: "Cycletime (days)"
        },
        min: 0,
        grid: {
          color: <%= CssVariable['--grid-line-color'].to_json %>
        },
      },
      y: {
        type: "<%= @y_axis_type %>",
        <% if @y_axis_sort_order %>
        labels: ["","<%= @y_axis_sort_order.reverse.join('","')%>",""],
        <% end %>
        scaleLabel: {
          display: true,
          labelString: 'Items remaining'
        },
        title: {
          display: true,
          text: "<%= @y_axis_label %>"
        },
        min: 0.0,
        grid: {
          color: <%= CssVariable['--grid-line-color'].to_json %>
        },
      }
    },
    plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {
            return context.dataset.data[context.dataIndex].title
          }
        }
      },
    }
  }
});
</script>
