Customize Mixed Charts

[Toucouleur66]

According to the provided documentation we tried to implement the Mixed Chart on our reporting page.

You can see our current rendering from here https://www.sportstracklive.com/en/user/RS_Taucho/better_analytics

We tried to add a Mixed (Combined) Chart while using this part of code:

 <%= combo_charts({**options, theme: 'palette4', stacked: false, data_labels: false}) do %>
  <% line_chart(total_series) %>
  <% area_chart(total_series) %>
  <% column_chart(total_series, **options, colors: '#EE4545') %>

The red colors won't show up. To show up I need to do something like this

<% 
def get_series(this_data, start, stop)
  {
    name: "Total",
    data: this_data.each{|v, value|
      this_data[v] = value + rand(start..stop)
    }
  }
end
%>
<%= combo_charts({**options, colors: ['#EE4545', '#114545', '#FF4545'],
      chart: {
        height: 350,
        type: "line"
      },
      dataLabels: {
          enabled: [false, true, false]
      },
      stroke: {
        width: [0, 2, 1],
        curve: "smooth"
      }, fill: {
        opacity: [0.85, 0.25, 1],
        gradient: {
          inverseColors: false,
          shade: "light",
          type: "vertical",
          opacityFrom: 0.85,
          opacityTo: 0.55,
          stops: [0, 100, 100, 100]
        }
      }, stacked: false}) do %>
  <% area_chart(get_series(total_tracks_per_months, 0, 1)) %>
  <% area_chart(get_series(total_tracks_per_months, 5, 11)) %>
  <% column_chart(get_series(total_tracks_per_months, 11, 20)) %>
<% end %>

It works ok, however, it's seems to be impossible to customize those combo charts. Neither by adding parameters on options nor on individual chart (line, area or column).

For demo purpose I succeed to have this rendering :

But how to have the same rendering as https://apexcharts.com/angular-chart-demos/mixed-charts/line-column-area/ with in this exemple, adding labels on only 1 graph.

I tried to to this

dataLabels: [{
          enabled: false
      }, {
          enabled: false
      }, {
          enabled: true
      }],

or

dataLabels: {
          enabled: [false, false, true]
      }],

But it does not work at all.

or even better, I would like to find a way to apply a multiple y-axis https://apexcharts.com/angular-chart-demos/mixed-charts/multiple-y-axis/

Any advice would be appreciate!

[Toucouleur66]

Several attempts to generate multiple y-axis failed so far

<%= combo_charts({**options, colors: ['#EE4545', '#114545', '#FF4545'],
yaxis: [
  {
    title: {
      text: "Series A"
    },
  },
  {
    opposite: true,
    title: {
      text: "Series B"
    }
  },
  {
    opposite: true,
    title: {
      text: "Series C"
    }
  }
],
...

does not have any effect while

<%= combo_charts({**options, colors: ['#EE4545', '#114545', '#FF4545'],
yaxis: {
    title: {
        text: ['Serie1', 'Serie2', 'Serie3']
    }
},
...

Show the right title

[styd]

Hi, @Toucouleur66 .
From your posts, I can extract 3 questions:

1. How to override the color of a series after using palette?
   I don't know if this is possible. If you can point me to apexcharts.js examples that do this, maybe I can implement it. But for now, not using palette and manually specifying each color using colors as you did is the way to go.
2. How to implement data_labels on only some series?
   You can do this:

   data_labels: {enabled: true, enabled_on_series: [2]}
   

3. How to implement Y-Axis?
   I intentionally put off working on multiple Y-Axis because I thought it was a hassle to implement at the time (because I found a bug when I tried to) and just assume that yaxis field is only for one Y-Axis. So, currently it's not possible with this gem. But, maybe I can revisit it later.

[MrMoins]

upvoting for point 3 implementation :)

[styd]

@MrMoins here you go: https://github.com/styd/apexcharts.rb#multiple-y-axes.