How can I pass chart click event data from a Stimulus controller to a Rails ActionController for CSV exports?

Below is one suggested approach that builds on your work using Stimulus to intercept clicks on Chartkick’s generated chart. The idea is to use your Stimulus controller to intercept clicks via Chartkick’s chart options (using getChartObject to access the underlying chart) and then make a request (via fetch or Turbo) to your Rails controller where you’ve set up an action to generate the CSV based on the selected label.

For example, you might update your Stimulus controller like this:

---

JSCopied
import { Controller } from "@hotwired/stimulus";

// Connects to data-controller="chart-export"
export default class extends Controller {
  static values = {
    id: String,
  };

  connect() {
    let chart = Chartkick.charts[this.idValue];

    if (chart) {
      let chartObj = chart.getChartObject();
      let chartConfig = chartObj.config;

      // Override the onClick event for the chart
      chartConfig.options.onClick = (event, native, active) => {
        if (native.length > 0) {
          const xAxisIndex = native[0].index;
          const label = chartObj.data.labels[xAxisIndex];

          // Call a method to export data as CSV
          this.exportDataAsCSV(label);
        }
      };
    } else {
      console.log("Chartkick chart not initialized", this.idValue);
    }
  }

  exportDataAsCSV(label) {
    // Construct URL with query parameters for filtering (adjust your route accordingly)
    const url = `/export?year=${encodeURIComponent(label)}`;

    // Example using fetch to trigger CSV download; you could also use Turbo.visit or a form submission if preferred
    fetch(url, {
      headers: { "Accept": "text/csv" }
    })
      .then(response => response.blob())
      .then(blob => {
        // Create a temporary link to download the CSV file
        const downloadUrl = window.URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = downloadUrl;
        a.download = `${label}-data.csv`;
        document.body.appendChild(a);
        a.click();
        a.remove();
        window.URL.revokeObjectURL(downloadUrl);
      })
      .catch(error => console.error("CSV export error:", error));
  }
}

---

In your view (using Slim, for example) ensure you have the data attributes set so that Stimulus can initialize your controller and associate it with the chart:

---

SLIMCopied
h3 Yearly Data
- if @yearly_data.present?
  .card-header.card-header-content-between 
    data-controller="chart-export" 
    data-chart-export-id-value="yearly_data_chart"
    = column_chart @yearly_data, id: "yearly_data_chart", 
      stacked: true, ytitle: "Total", loading: "Loading...", 
      prefix: "$", thousands: ",", decimal: "."

---

A few points to consider:

1. Routing & Controller: In your Rails routes you’d define an export action (e.g., in an ExportsController) that reads the query params (year or category) and responds with CSV format. A sample Rails controller action might look like:

   ---

   RUBYCopied
   class ExportsController < ApplicationController
     def export
       # Filter your data based on params; assume params[:year] and/or category is available
       filtered_data = YourModel.filtered_by_year(params[:year])
       csv_data = YourModel.to_csv(filtered_data)
   
       respond_to do |format|
         format.csv { send_data csv_data, filename: "#{params[:year]}-data.csv" }
       end
     end
   end

   ---

2. Alternative Approaches:

   • If you want a Turbo Stream response (which is especially useful if you’re updating parts of the page), you could have your export action return a Turbo Stream that replaces a container with a download link or triggers a download via JavaScript.
   • You could also consider using a form submission driven by Stimulus if you want to maintain more of the Rails conventions around resource generation.

3. Chartkick & Canvas Rendering:
   Since Chartkick generates the chart in a canvas element under the hood, using Stimulus to attach to the container where the chart is rendered is a good approach. By accessing the chart instance via Chartkick.charts you can modify the chart configuration as needed.

This approach leverages Stimulus to intercept the onClick event on your Chartkick chart and then uses a fetch call to request CSV data from your Rails app. Adjust the query params, route URL, and Rails export action to fit your data filtering logic (for both the year and category you mentioned).