<div class="wildewidget-chart-container">
  <canvas id="{{name}}" width="{{options.width}}" height="{{options.height}}"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script> 
<script>

  $(document).ready(function() {
    var ctx = document.getElementById('{{name}}').getContext('2d');
    var myChart = new Chart(ctx, {
      type: "{{options.chart_type}}",
      data: {
        labels:{{labels|safe}},
        datasets:{{datasets|safe}}
      },
      options: {
        responsive: false,
        {% if options.title %}
          title: {
            display: true,
            text: '{{options.title}}'
          },
        {% endif %}

        legend: {
          display: {% if options.legend %}true{% else %}false{% endif %},
          {% if options.legend %}
            position: '{{options.legend_position}}'
          {% endif %}
        },

        {% if options.money %}
          tooltips: {
            callbacks: {
              label: function(tooltipItem, data) {
                var label = ''
                if (data.datasets[tooltipItem.datasetIndex].label) {
                  label = data.datasets[tooltipItem.datasetIndex].label + ": "
                } 
                var value;
                {% if options.chart_type == 'horizontalBar' %}
                  value = Math.round(tooltipItem.xLabel * 100) / 100
                {% else %}
                  value = Math.round(tooltipItem.yLabel * 100) / 100
                {% endif %}
                value = value.toLocaleString()
                return label + '$' + value;
              }
            }
          },
        {% endif %}
      }
    });
  });

</script>

