<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() {
    $.get('{% url "wildewidgets_json" %}?wildewidgetclass={{wildewidgetclass}}', function(data) {
      var ctx = document.getElementById('{{name}}').getContext('2d');
      var myChart = new Chart(ctx, {
        type: "{{options.chart_type}}",
        data: data,
        options: {
          responsive: false,
          {% if options.title %}
            title: {
              display: true,
              text: '{{options.title}}'
            },
          {% endif %}
          
            legend: {
              display: {% if options.legend %}true{% else %}false{% endif %},
              position: '{{options.legend_position}}'
            },

          {% 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 = Math.round(tooltipItem.yLabel * 100) / 100
                  value = value.toLocaleString()
                  return label + '$' + value;
                }
              }
            },
          {% endif %}
        }
      });
    });
  });

</script>

