def pie(self, **kwargs):
    template = Template(
        """
    <div class="chart-container"></div>

    <script>
      const data = {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
          data: [10, 20, 30],
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
          hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
        }]
      };
      const options = {
      };

      const container = document.querySelector('.chart-container');
      const canvas = document.createElement("CANVAS");

      canvas.setAttribute('data-controller', 'chart');
      canvas.setAttribute('data-chart-type-value', 'pie');
      canvas.setAttribute('data-chart-data-value', JSON.stringify(data));
      canvas.setAttribute('data-chart-options-value', JSON.stringify(options));

      // Stimulus will use chart_controller to init the chart
      container.appendChild(canvas);
    </script>
    """,
    )

    return template.render(Context({}))