<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: 'bar',
  data: {
    datasets: <%= JSON.generate(data_sets) %>
  },
  options: {
    responsive: <%= canvas_responsive? %>, // If responsive is true then it fills the screen
    indexAxis: 'y', // Make the bars horizontal
    scales: {
      x: {
        type: 'time',
        min: '<%= @date_range.begin.to_s %>',
        max: '<%= (@date_range.end ).to_s %>',
        stacked: false,
        title: {
          display: false
        },
        grid: {
          color: <%= CssVariable['--grid-line-color'].to_json %>
        },
      },
      y: {
        stacked: true,
        position: 'right',
        ticks: {
          display: true
        },
        grid: {
          color: <%= CssVariable['--grid-line-color'].to_json %>
        },
      }
    },
    plugins: {
      annotation: {
        annotations: {
          <%= working_days_annotation %>

          <% if percentage_line_x %>
          line: {
            type: 'line',
            scaleID: 'x',
            value: '<%= percentage_line_x %>',
            borderColor: <%= CssVariable.new('--aging-work-bar-chart-percentage-line-color').to_json %>,
            borderWidth: 1,
            drawTime: 'afterDraw'
          }
          <% end %>
        }
      },
      legend: {
        display: false
      },
      tooltip: {
        callbacks: {
          label: function(context) {
            return context.dataset.data[context.dataIndex].title
          }
        }
      }
    }
  }
});
</script>

