apexcharts integration in rails app (turbo loads)

[ncs1]

Is your feature request related to a problem? Please describe.
Currently, there's no documentation / simple solution to use apexcharts.rb in rails context (i.e. using with trubo/turbolinks).
When navigating into an apexcharts page, out and back - the chart won't show as it doesn't redraw/reload due to turbo listeners.

Describe the solution you'd like
I have a specific solution for my application, but it's not generic and poorly implemented.

Is there a solution ? Am I missing something ?

[toddsutt]

@ncs1 We also need this enhancement. Could you share your solution? We are looking into implementing a temporary solution as well

[toddsutt]

This seems to work for me, I forked the gem and changed the defer method:
def defer(js) if defer? <<~DEFERRED var createChart = function() { #{indent(js)} }; document.addEventListener('turbo:load', function() { if ($("##{element_id}").children().length == 0) { createChart(); } }); DEFERRED else js end end

[ncs1]

@toddsutt in first try, I did think it solved the issue.
However, I tried different flows and the graphs were "smearing" on each other when I switched to and back different pages that contains graphs draw also.
Did you encounter such an issue after your fix ?

My solution is having an object that keeps track of the graphs and redraw them in turbo event, as I noted I don't think that this is an elegant solution, but it does fix the issue completely.
In case still needed, I'll put instructions for my solution.

[toddsutt]

@ncs1 Interesting, I haven't run into that yet but I'd definitely be interested in seeing your solution!

[ncs1]

@toddsutt I'll upload it with instructions in the upcoming days.

[toddsutt]

@ncs1 It looks like this might work better without having to modify the gem. I have the options in helper methods to keep the view cleaner but then I put this in each view that has charts. Still not the cleanest but it relies more on building charts the way ApexCharts' website suggests: https://apexcharts.com/docs/chart-types/bar-chart/

:javascript
  var initializedCharts = false;

  document.addEventListener('turbo:load', function() {
    if (initializedCharts) return;
    initializedCharts = true;

    // ROAD TO 84 CHART //
    new ApexCharts(document.querySelector("#roadto84chart"), #{road84_chart_json}).render();

    // CLOSE RATE CHART //
    new ApexCharts(document.querySelector("#closeratechart"), #{closerate_chart_json}).render();
  });

UPDATE:

I am now using this javascript for each of my charts. My charts are each in their own partials with the id variable set

  (function() {
    const options = { ... };

    const initializeChart = function() {
      const element = $('##{id}');
      if (element.length == 0 || element.children().length > 0) return;
      const chart = new ApexCharts(document.querySelector("##{id}"), options);
      chart.render();
      document.removeEventListener('turbo:load', initializeChart);
    }
    document.addEventListener('turbo:load', initializeChart);
  })();

[ncs1]

@toddsutt , I think I tried something along the lines of your update and I still had graphs redraw on top of each other in case of multiple pages of graphs. Did you try multiple pages of graphs and transition between them successfully ?

Here's what I did (again, I don't think that this is elegant, but it works) - I supported both turbolinks and turbo inside:

• Use my patch for apexcharts.rb, see it in the following link:
  master...ncs1:apexcharts.rb:master

• In your Rails app,

1. Create a singleton class and make it accessible through the variable ApexTurboRenderer, i.e.:
   in application.js:

window.ApexTurboRenderer = _MYAPEXSINGLECLASS;
ApexTurboRenderer.setup_apex();

2. The singleton class needs to have the following static vars and methods inside:

static apex_graph = []

  static setup_apex() {
    window.addEventListener('turbo:before-render', () => {
      _MYAPEXSINGLECLASS.apex_graph = [];
    });
    window.addEventListener('turbolinks:before-render', () => {
      _MYAPEXSINGLECLASS.apex_graph = [];
    });
  }

  static add_apexobj(obj) {
    this.apex_graph.push(obj);
  }

  static render_apexes() {
    for (let index = 0; index < this.apex_graph.length; index++) {
      const element = this.apex_graph[index];

      try {
        let chrt = null;
        if (!!Apex && typeof Apex._chartInstances !== 'undefined') {
          chrt = ApexCharts.getChartByID(element[0]);
        }
        if (!!chrt) {
          chrt.destroy();
        }
      } catch (e) {
        console.log(e);
      }

      let chart = new ApexCharts(document.querySelector('#' + element[0]), element[1]);

      try {
        chart.render();
      } catch (e) {
        console.log(e);
      }
    }
    _MYAPEXSINGLECLASS.apex_graph = [];
  }

3. adds the following events to your js (I added them as a partial inside my navfooter):

<script>
  window.addEventListener('load', function cb(event) {
    ApexTurboRenderer.render_apexes();
    event.currentTarget.removeEventListener(event.type, cb);
  });

  window.addEventListener('turbolinks:load', function cb(event) {
    ApexTurboRenderer.render_apexes();
    event.currentTarget.removeEventListener(event.type, cb);
  });

  window.addEventListener('turbo:load', function cb(event) {
    ApexTurboRenderer.render_apexes();
    event.currentTarget.removeEventListener(event.type, cb);
  });
</script>

This is all.
I'm sure it can be refined, or a more elegant solution could be used.

[styd]

@ncs1 @toddsutt I really love watching your discussion. Unfortunately I cannot help you guys on this one because I don't use turbolinks in my app and I have quite limited free time nowadays. 😢
Perhaps both of you can submit a PR to implement this feature?
I just found that chartkick have solved this by adding new option, maybe we can adapt it for this gem. WDYT? Or do you have other ideas?

[Duartemartins]

Welp, this library needs to be updated for Rails 7. You basically have to duplicate everything because you have to create a second graph and load that if the "original" doesn't. Might as well just use the JS instead of the ERB helpers. This is how I got it to work:

Application.js:

// Listen for the 'turbo:load' event
document.addEventListener('turbo:load', function () {
    // Select the chart element
    var chartElement = document.querySelector('#pie-chart');

    // Log the chart element
    console.log('chartElement:', chartElement);

    // Check if ApexCharts is defined and the chart element exists
    if (window.ApexCharts && chartElement) {
        // Check if any charts have been created
        if (!window.Apex._chartInstances || window.Apex._chartInstances.length === 0) {
            // If no charts have been created, remove the first child of the chart element
            chartElement.firstElementChild.remove();
        } else {
            // If a chart has been created, remove the first child of the chart element
            chartElement.firstElementChild.remove();

            // Parse the options from the data-options attribute of the chart element
            var options = JSON.parse(chartElement.dataset.options);

            // Log the options
            console.log('options:', options);

            // Create a new chart with the parsed options
            var chart = new ApexCharts(chartElement, options);

            // Render the chart
            chart.render();
        }
    }
});

ERB view:

<% 
          @pie_series_data = @pie_series.map { |item| item[:data] }
          @pie_series_labels = @pie_series.map { |item| item[:name] }
          @chart_options = {
            chart: {
              type: 'pie',
              height: 300
            },
            series: @pie_series_data,
            labels:  @pie_series_labels,
            legend: {
              show: true, position: 'bottom'},
            defer: true,
            id: "pie-chart"
          }         %>
        <div class="h-full w-full" id="pie-chart" data-options="<%= @chart_options.to_json %>">
          <%= pie_chart(@pie_series, legend: "bottom",
              defer: true,
              height: 300,
              id: "pie-chart",
              tooltip: {
                y: {
                  formatter: {
                    function: {
                      args: 'val',
                      body: "return '\\u20AC' + parseFloat(val).toLocaleString();"
                    }
                  }
                }
              }) %>
        </div>

[bruno-costanzo]

Hi guys, any updates on this discussion?

[toddsutt]

@bruno-costanzo Here is what I am currently doing and this has worked for us for the past year:

Page HTML

#brand-feedback-graph
= turbo_stream.replace 'brand-feedback-graph' do
  = render partial: 'charts/donut_chart', locals: { id: 'brand-feedback-graph', data: @dismissal_reason_data }

Partial HTML (charts/donut_chart)

- if defined?(id) && defined?(data)
  - labels = data.keys.map { |key| key.to_s.humanize }
  - values = data.values
  = render partial: 'charts/chart_master', locals: { id: id }

  :css
    #{'#'+id} .apexcharts-toolbar {
      display: none;
    }
    #{'#'+id} .apexcharts-legend {
      display: none;
      /*display: flex;*/
      /*justify-content: center;*/
      /*font-size: 10px;*/
      /*height: auto;*/
      /*width: 115px;*/
    }
    .feedback-graph-container {
      height: 86%;
      align-items: center
    }
    #brand-feedback-graph {
      height: auto;
      width: 350px;
      padding-top: 10px;
      padding-bottom: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @media (max-width: 1598px) {
      #{'#'+id} .apexcharts-legend {
        display: none;
      }
      .feedback-graph-container {
        align-items: center;
      }
      #brand-feedback-graph {
        height: 250px;
        width: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    @media (max-width: 1198px) {
      #brand-feedback-graph {
        height: 250px;
        width: 230px;
      }
    }

  :javascript
    (function() {
      const options = {
        series: #{values},
        labels: #{labels},
        chart: {
          type: 'donut'
        },
        plotOptions: {
          pie: {
            donut: {
              size: '70%'
            }
          }
        },
        dataLabels: {
          enabled: true,
          textAnchor: 'middle',
          distributed: true,
          style: {
            fontSize: '16px',
            fontWeight: 'normal',
            colors: undefined
          },
          background: {
          enabled: true,
          foreColor: 'white',
          padding: 4,
          borderRadius: 2,
          borderWidth: 1,
          borderColor: 'black',
          opacity: 0.9,
          dropShadow: {
            enabled: true,
            top: 1,
            left: 1,
            blur: 2,
            color: '#000',
            opacity: 0.45
            }
          },
          dropShadow: {
            enabled: false
          }
        }
      };

      // const +options+ must be defined before this include.
      #{load_chart_js_include(id)}
    })();
- else
  %h3.mt-2 Some data is undefined for this chart.

ChartsHelper (required for loading via js)

module ChartsHelper

  ##
  # Javascript include to load an apex chart with +id+. This is necessary for every chart in views/charts.
  #
  # const +options+ must be defined before this include.
  def load_chart_js_include(id)
    %~const element = $("##{id}");
    if (element.length === 0 || element.children().length > 0) return;
    new ApexCharts(document.querySelector("##{id}"), options).render();~
  end

end

[toddsutt]

Looks like I also use this partial, sorry I forgot - it's been a while since I've touched this part of it. It has been working and we have made many new charts with this template:

charts/chart_master:

- if defined?(id)
  .cc-chart{id: id}

  -# Default css for all charts goes here
  :css
    .cc-chart {

    }
- else
  %h3.mt-2 ID is undefined for this chart.

[bruno-costanzo]

@toddsutt This is just for fixing the problem of the double-rendering when using back button?

[toddsutt]

@bruno-costanzo This solves all turbo issues with ApexCharts for me including the use of the back button. Refresh, link_to for the first time, link_to when you've already visited, async loading (ajax), etc.