styd / apexcharts.rb Goto Github PK

I'm attempting to display my annotation labels horizontally when using x_annotation. By default they show the text and label vertically. When looking at the apexcharts documentation I noticed an option for this, but when trying it with this gem my labels just disappear completely.

Here's the line of code I used... <% x_annotation(value: eos_weight.date, text: "#{eos_weight.weigh_in_value}", color: 'purple', label: { orientation: "horizontal" }) %>

This project needs a logo that doesn't suck.
If you know how to design a logo, please propose a logo through comments below to replace this logo.

Current Version in gem
ApexCharts v3.10.1

Requested Version
ApexCharts v3.15.2

When trying to use combo/mixed chart I'm getting the following error:

Application js:

//= require apexcharts

Gemfile:

gem 'apexcharts', require: 'apexcharts/prefix_with_apex'

erb:

<%= apex_combo_charts({**options, theme: 'palette4', stacked: false, data_labels: false}) do %>
  <% line_chart(serie_one) %>
  <% column_chart(serie_two) %>
<% end %>

I'm using Rails 5.1.6.

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 ?

Describe the bug
As per our conversation on reddit, here is the problem i am having. The graph is showing the percentage of customers that return after X amount of visits. Hash keys are the X amount of visits, hash values are the percentage of returning customers.

Context:
Final return value is the hash i put down below. Using a line chart with options labeling the x and y axis. All pretty simple stuff. It looks like apex is averaging the numbers between the first and last which makes sense but doesn't actually look all that nice.

Series Data:
{1=>99.69,
5=>99.0,
10=>98.22,
25=>95.89,
50=>91.64,
100=>83.27,
200=>66.78,
300=>50.06,
400=>33.13,
500=>17.02}

What I expected:
The keys to be the X labels.

Screenshot of output:
https://ibb.co/MDgsbwR (First time using this image hoster, if it breaks, let me know!)

Is it possible to pass in events through the options?https://apexcharts.com/docs/options/chart/events/

I have the following code, but it doesn't work:

<%=
    events: {
      touchstart: "function(event, chartContext, config) { console.log('Test') }"
    }
%>

I'm attempting to try this gem out with my Rails project. I'm attempting install on a Rail 5.1.6 app. I'm getting errors with the <% include ApexCharts::Helper %> line as I'm receiving the error: "undefined method `include' for #<#Class:0x00007fffdaa9a1c8:0x00007f83495673f8>".

To Reproduce
Steps to reproduce the behavior:

1. Added the two gems 'apexcharts' and 'groupdate'
2. bundle install
3. Added //= require 'apexcharts' to my /assets/javascripts/application.js file
4. Created /application/_apex_charts.html.erb partial to keep the following lines in...

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <% require 'set' %> <% require 'apexcharts' %> <% include ApexCharts::Helper %>

5. Create another partial with the following inside...

`<%= render partial: "apex_charts" %>

<% series = [
{ name: "Weigh (In)", data: @player.body_weight_recordings.ordered.pluck(:weigh_in_value) },
{ name: "Weigh (Out)", data: @player.body_weight_recordings.ordered.pluck(:weigh_out_value) }]
%>

<%= options = {
title: "Weight History",
subtitle: "Example Subtitle",
xtitle: 'Week',
ytitle: 'Weight',
stacked: true
} %>

<%= line_chart(series, options) %>`

6. Load webpage and get the error mentioned above.

Expected behavior
I expected my code to break :)

Reverse Y axis options not working
I am trying to display number that are smaller graph should go up, bigger the number graph should go down.
Anything i did wrong here? Down below

<% options = { yaxis: { reversed: true } } %>

Is your feature request related to a problem? Please describe.

The problem is with a graph I need to update dynamically in a web application where I initialize ApexChart in a module. If I use the option defer, the graph shows first time but it doesn't update dynamically, and if I dont' use the option defer it doesn't show up the first time but it is updated correctly.

To be more concrete:

• This is the web application https://github.com/pasosdeJesus/sivel2 (information system to manage cases of political violence) recently updated to rails7, bundling javascript resources with both sprockets and esbuild+jsbundling-rails
• I'm initializing Apexchart in the file app/javascript/application.rb (see https://github.com/pasosdeJesus/sivel2/blob/main/app/javascript/application.js ) that in rails7 is run as module after the full HTML has been loaded. (I know I could load and initialize apexchart in the part managed with sprockets but I prefer to do it in the part bundled with jsbundling-rails+esbuild).
• There is a bar_chart (or column_chart depending on the user input) for authenticated users in the route conteos/personas (countings about demography of victims like sex, age, etc.), see https://github.com/pasosdeJesus/sivel2_gen/blob/main/app/views/sivel2_gen/conteos/_personas_grafica.html.erb. This graph can be updated dynamically when the users select different filters or aggregations for the graph (see https://github.com/pasosdeJesus/sivel2_gen/blob/main/app/views/sivel2_gen/conteos/personas.js.erb )
• If I don't use the defer option, usually the chart is not presented when the route is loaded first time because it tries to use ApexChart before its initialization.
• If I use the defer option it is presented the first time correctly but it is not updated automatically when the users selects a new filter or aggregation criteria (because in the controller I use format.js to run a javascript that updates part of the page including the apexchar.rb <script> tag that will not run because it is defered.

Describe the solution you'd like

That I could keep the initialization of Apexchart in a module and at the same time that I could keep using format.js to update dynamically the generation of the chart. (In future I'm planning change format.js for format.html and turbo or javascript).

Describe alternatives you've considered

I have experimented by changing apexchart.rb and found that if the non-defered script created by apexchart.rb has type='module' instead of type='text/javascript' I will have the result I expect, the graph is presented correctly initially and can be updated responding to user input by updating the script.

Analogous to the option defer, I think there should be an option module for the charts of apexchart.rb that would implement this behavior.

Additional context

• Wihouth defer it will not present the graph first time:
  

• With defer it will present the chart first time:
  
  but not when the user upates the filter:
  

I have a situation where I would like to be able to click on a bar of a chart and link to another page based on the date of its data point.

I was hoping we pass in the function through the chart building options like this:

events: { click: {function: {args: 'event, chartcontext', body: "js logic here" }}}

Has anybody solved this issue already?

Describe the bug
Copy/pasting the candlestick_chart example to a Sinatra example file results in an undefined local variable or method error

To Reproduce
Steps to reproduce the behavior:

1. copy/paste the example to the 'template :index' block

Expected behavior
No errors

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Arch Linux
• Browser: Firefox
• Version: 87

Additional context
Method definitions need to be moved out from the template :index definition to the Class body and the example works fine.

I am working on adding the boxPlot chart to this Gem and must be missing a step in the process. Using the Range Bar chart as my template because capitalization is consistent with how ApexCharts does boxPlot, I have done the following:

1. Create the file box_plot_chart.rb under lib/apex_charts/charts, inheriting from CaterisanChart
   

2. Add boxPlot to the lib/apex_charts/charts.rb file.
   

3. Add the boxplot_chart helper method to the file lib/apex_charts/helper.rb
   

4. Add boxPlot to the file lib/apex_charts/options/default/plot_options.rb
   

5. Add bogus options to the file lib/apex-charts/options/dry_schema/plot_options.rb, copying from candlestick because boxPlot is a derivation of candlestick.
   

6. Kick up the gem version so that I can check my application's Gemfile.lock and ensure that it is referencing the right code.
   
   
   

7. Add the chart creation to my slim file.
   

8. Update the apexcharts.js file because the current version in use does not have the boxPlot chart.
   

I am getting the error:

When I replace the boxplot chart with the candlestick chart, it works fine, so this tells me that the Gem is installed correctly.

Can someone point out what piece of the puzzle I am missing?

Many thanks in advance.

Edward

Describe the bug

It seems there is an issue with the dependency smart_kv

$ erb charts.html.erb > charts.html
Traceback (most recent call last):
        7: from /home/noraj/.rbenv/versions/2.7.0/bin/erb:175:in `<main>'
        6: from /home/noraj/.rbenv/versions/2.7.0/bin/erb:154:in `run'
        5: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/2.7.0/erb.rb:890:in `run'
        4: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/2.7.0/erb.rb:905:in `result'
        3: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/2.7.0/erb.rb:905:in `eval'
        2: from charts.html.erb:2:in `<main>'
        1: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/2.7.0/rubygems/core_ext/kernel_require.rb:92:in `require'
/home/noraj/.rbenv/versions/2.7.0/lib/ruby/2.7.0/rubygems/core_ext/kernel_require.rb:92:in `require': cannot load such file -- apexcharts (LoadError)
        22: from /home/noraj/.rbenv/versions/2.7.0/bin/erb:175:in `<main>'
        21: from /home/noraj/.rbenv/versions/2.7.0/bin/erb:154:in `run'
        20: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/2.7.0/erb.rb:890:in `run'
        19: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/2.7.0/erb.rb:905:in `result'
        18: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/2.7.0/erb.rb:905:in `eval'
        17: from charts.html.erb:2:in `<main>'
        16: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/2.7.0/rubygems/core_ext/kernel_require.rb:156:in `require'
        15: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/2.7.0/rubygems/core_ext/kernel_require.rb:168:in `rescue in require'
        14: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/2.7.0/rubygems/core_ext/kernel_require.rb:168:in `require'
        13: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/gems/2.7.0/gems/apexcharts-0.1.8/lib/apexcharts.rb:3:in `<top (required)>'
        12: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/2.7.0/rubygems/core_ext/kernel_require.rb:72:in `require'
        11: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/2.7.0/rubygems/core_ext/kernel_require.rb:72:in `require'
        10: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/gems/2.7.0/gems/apexcharts-0.1.8/lib/apexcharts/helper.rb:6:in `<top (required)>'
         9: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/gems/2.7.0/gems/apexcharts-0.1.8/lib/apexcharts/helper.rb:6:in `require_relative'
         8: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/gems/2.7.0/gems/apexcharts-0.1.8/lib/apexcharts/options_builder.rb:4:in `<top (required)>'
         7: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/gems/2.7.0/gems/apexcharts-0.1.8/lib/apexcharts/options_builder.rb:4:in `require_relative'
         6: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/gems/2.7.0/gems/apexcharts-0.1.8/lib/apexcharts/options/root.rb:1:in `<top (required)>'
         5: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/gems/2.7.0/gems/apexcharts-0.1.8/lib/apexcharts/options/root.rb:1:in `require_relative'
         4: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/gems/2.7.0/gems/apexcharts-0.1.8/lib/apexcharts/options/div_attributes.rb:1:in `<top (required)>'
         3: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/gems/2.7.0/gems/apexcharts-0.1.8/lib/apexcharts/options/div_attributes.rb:2:in `<module:ApexCharts>'
         2: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/gems/2.7.0/gems/apexcharts-0.1.8/lib/apexcharts/options/div_attributes.rb:3:in `<class:DivAttributes>'
         1: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/gems/2.7.0/gems/smart_kv-0.2.7/lib/smart_kv/meat.rb:26:in `optional'
/home/noraj/.rbenv/versions/2.7.0/lib/ruby/gems/2.7.0/gems/smart_kv-0.2.7/lib/smart_kv/meat.rb:38:in `init_optional': uninitialized constant SmartKv::Meat::Set (NameError)

So we could think about an upstream issue with SmartKv but the version used (0.2.7) is an exact version in the gemspec file nad it's the same version used since the first commit of apexcharts.rb.

$ irb
irb(main):001:0> require 'apexcharts'
=> true
irb(main):001:0> require 'smart_kv'
=> true
irb(main):002:0> SmartKv::Meat::Set
Traceback (most recent call last):
        4: from /home/noraj/.rbenv/versions/2.7.0/bin/irb:23:in `<main>'
        3: from /home/noraj/.rbenv/versions/2.7.0/bin/irb:23:in `load'
        2: from /home/noraj/.rbenv/versions/2.7.0/lib/ruby/gems/2.7.0/gems/irb-1.2.1/exe/irb:11:in `<top (required)>'
        1: from (irb):2
NameError (uninitialized constant SmartKv::Meat::Set)

$ gem list | grep apexcharts
apexcharts (0.1.8)

To Reproduce

Steps to reproduce the behavior:

$ rbenv local 2.7.0
$ gem install apexcharts
$ rbenv rehash
$ erb charts.html.erb > charts.html

charts.html.erb from here

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<% require 'apexcharts' %>
<% include ApexCharts::Helper %>

Expected behavior

Not crashing when generating erb.

Desktop (please complete the following information):

• OS: ArchLinux
• Browser Firefox
• Version 0.1.8

Thanks for this excellent gem @styd .

When loading a chart with an empty series, you will encounter the following error:
undefined method `[]' for nil:NilClass

Reproduce the bug

For example:
<%= column_chart([], {
title: 'My graph',
xtitle: 'Horizontal Series',
ytitle: 'Vertical Series',
theme: 'mytheme' }) %>

Expected Behaviour

I would have expected an empty series to show an empty graph.

Actual behaviour

Stack trace

Describe the bug
When producing a boxplot chart with multi-line legends (using text arrays), the bottom of the legend is trimmed when there are numerous columns in the chart.

To Reproduce
In my example, I have 11 columns, of which 4 are multi-line and the legend is trimmed. When I only have 5 columns, the legend is not trimmed. I have experimented with manually adjusting the chart's height and width and this does not resolve the issue. If I manually adjust the chart height after it has been generated, however, the legends are shown correctly.

Using the options:

       @boxplot_options = {
        stroke: {
          show: true,
          curve: 'smooth',
          lineCap: 'butt',
          colors: ['#474038'  ],
          width: 1.5,
          dashArray: 0,
        },
        ytitle: "chart title",
        noData: {
          text: "no data",
          align: 'center',
          verticalAlign: 'middle',
          offsetX: 0,
          offsetY: 0,
          style: {
            fontSize: '14px',
          }
        },
        chart: {
          type: 'boxPlot',
          toolbar: {
            tools: {
              zoom: false,
              zoomin: false,
              zoomout: false,
              pan: false,
              reset: false,
            }
          }
        },
        title: {
          text: '',
        },
        tooltip: {
          enabled: false
        },
        plotOptions: {
          boxPlot: {
            colors: {
              upper: rgb(194,209,226),
              lower: rgb(35, 20, 94),
            }
          }
        }
      }

Because the data is proprietary, I am using legend text that has the same number of characters, but not exactly the same text. I don't imagine this should matter.

The chart legend is displayed correctly with the following data:

[[["Uuuuuu", " Innnnnnnn"], [12, 12, 12, 12, 12]],
[["FFFFFF-DD"], [13, 13, 13, 14, 14]],
[["VVVVVVVVVVVV"], [13, 13, 13, 13, 13]],
[["TTTTTTTTTT-DD"], [11, 11, 12, 13, 13]],
[["OOOOOOOOOOO", " HHHH"], [10, 10, 12, 13, 13]]]

The chart legend is chopped when using the following data:

[[["HHHHHH"], [9, 9, 11, 12, 12]],
[["UUUUUU", " Innnnnnnn"], [9, 9, 10, 12, 12]],
[["FFFFFF-DD"], [12, 12, 13, 14, 14]],
[["VVVVVVVVVVVV"], [11, 11, 12, 13, 13]],
[["TTTTTTTTTT-DD"], [9, 9, 11, 12, 12]],
[["TTTTT.", "& Vvvvvvv"], [11, 11, 11, 11, 11]],
[["Gggggggggg", " & Sss."], [11, 11, 11, 11, 11]],
[["Bbbbbbb"], [11, 11, 11, 11, 11]],
[["Oooooooooo", " Hhhh"], [11, 11, 13, 14, 14]],
[["Uuuuuu Dd"], [10, 10, 11, 12, 12]]]

The chart is generated with the statement:

box_plot_chart(@chart_data, @boxplot_options)

Expected behavior
All chart legends are clearly visible

Screenshots
Correctly displayed legend

Chopped legend

Desktop (please complete the following information):

• OS: Ubuntu
• Browser FireFox
• Version 102.6.0esr (64-Bit)
• Browser: Chrome
• Version: Version 108.0.5359.124 (Offizieller Build) (64-Bit)

I am wanting to display a value on my data labels that is different from the charted data. So I made a collection that matches the x-axis labels that I wanted to pull from given the index value.

I found this documentation here for the "formatter": Apex Charts Data Labels Documentation

Discussed there is an "opts" parameter that seems to be what I want. However, I am getting an error when I attempt to use it. Is this not supported? Or am I doing something incorrectly?

I'm on Rails 5.1.6. Relevant gems installed: apexcharts, functionable-json

dataLabels: { 
    enabled: false, 
    formatter: function(val,opts) { return ((val == null) ? '' : '$ ') + parseFloat(val).toLocaleString().substring(0,parseFloat(val).toLocaleString().length-4); } 
  },

Error:
undefined local variable or method `opts' for #<#Class:0x00007faab8427b50:0x00007faaa9cfb588>

I can't able to find something that help me to add event for chart like there official document defined.

How can I add some events like this into my project. Here is my code for option.

`<% bubble_series = @prob_array.each_with_index.map do |prob,i|
{
name: "Bubble #{i}",
data: [[i+1,rand(10..50), prob , rand(10..500)]],
}
end %>
<% options = {
xtitle: 'bubble number',
ytitle: 'bubble ',
height: 500,
# data_labels: false,
theme: 'palette6',

chart: {
  events: {
    dataPointSelection: function(event, chartContext, config) {
    console.log(event, chartContext, config);
   }
 },
 toolbar: {
   show: false
 }
},
} %>`

This giving me an error

I've trying use ApexCharts in my RoR 6 app, but occurred the error below:

My Gemfile:

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.3'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
gem "bcrypt", "~> 3.1"

gem 'apexcharts', require: 'apexcharts/prefix_with_apex'
gem 'chartkick'
gem 'simple_form'
# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  # Use sqlite3 as the database for Active Record
  gem 'sqlite3', '~> 1.4'
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'listen', '>= 3.0.5', '< 3.2'
  gem 'rubocop', require: false
  gem 'web-console', '>= 3.3.0'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

group :production do
  gem 'pg'
  gem 'rails_12factor'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

My app/javascript/packs/application.js

require("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
require("channels");
require("chartkick");
require("chart.js");
require("apexcharts");

import "bootstrap"
import "../stylesheets/application"

const feather = require('feather-icons')

document.addEventListener("turbolinks:load", () => {
    feather.replace();
});

My app is built in:
Ruby 2.6.3
Rails 6
Webpacker

Describe the bug
When adding example data to application to produce multiple Y-Axes then it does not work and produces error undefined method 'first' for 1.4:Float

To Reproduce
Steps to reproduce the behavior:

1. copy code to your app
2. visit page

Expected behavior
Should see same chart as given in readme file

Additional context
And even if I do something like this, then the opposite yaxis still wont appear

series = [
        {
          name: 'Income',
          type: 'column',
          data: {2009 => 1.1, 2010 => 2, 2011=>2.5, 2012=>1.5}
          #[1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6]
        },
        {
          name: 'Cashflow',
          type: 'column',
          data: {2009 => 1.1, 2010=> 2, 2011=>3.17, 2012=>4}
          #[1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5]
        },
        {
          name: 'Revenue',
          data: {2009 => 20, 2010=> 29, 2011=>37, 2012=>36}
          #[20, 29, 37, 36, 44, 45, 50, 58]
        }
      ]

      xaxis = {
        title: {text: 'Year'},
        categories: [2009, 2010, 2011, 2012]
      }

      yaxis = [
        {title: {text: "Income"}},
        {
          title: {text: "Operating Cashflow"},
          opposite: true,
          seriesName: 'Cashflow'
        },
        {
          title: {text: "Revenue"},
          opposite: true,
          seriesName: 'Revenue'
        }
      ]
      line_chart(series, xaxis: xaxis, yaxis: yaxis, defer: true)

It would be nice if there would be actually example for combo_chart chart also

Describe the bug
When i'm on the chart page and go to another by a link for example and go back to the page the charts are being duplicated.

I'm not sure if I missing something, but I haven't found anything related to this.

To Reproduce
I created a sample repo https://github.com/marcelolx/apexcharts-test

But basically is

• adding the gem and the yarn package to the project
• add two pages, one to chart and another to go through a link for example
• run the project, go to the chart page -> go to the another page -> go back to the chart page through navigator backward button.

Expected behavior
Doesn't duplicate de chart.

Screenshots

Desktop (please complete the following information):

• OS: [Windows 10]
• Browser [Chrome - 85.0.4183.121]

Is your feature request related to a problem? Please describe.
I'd love to use this library with a middleman framework.
https://middlemanapp.com/

Describe the solution you'd like
I've managed to get it running with my existing middleman project, just had to do a little bit more plumbing code.

in config.rb I've added
helpers ApexCharts::Helper
And by explicitly adding apexchart.js library into view.

I don't think that it's possible to make a loader for gem. yeat, maybe we can update README to help offers get started faster?

I think this is mentioned in #25 , but is it possible to add a formatter for tooltips? Or is there a suggested workaround? I was hoping to format my value as currency.

Describe the bug
Check out charts i've built:
https://fbacatalog.com/charts/trial.html
There are a lot of datapoints -- 10 to be precise. And some of the colors are repeating, so it's really hard to understand what part of chart is related to certain data point.

Expected behavior
I'd expect that every data point should have it's own color. Then it would be easier to understand this chart.

Screenshots

Describe the bug
I wanted to set some background options for my dataLabels and encountered the problem, that the background option can't be used.

That's the code:

<%= line_chart(
    [{ name: "Bewertung", data: Feedback.group_by_week(:date, format: "%d.%m.%Y", last: 4).average(:overall_impression_feed)}], 
    dataLabels: {  
        enabled: true,
        formatter: { function: { args: "value", body: "return value.toFixed(2);" } },
        style: {
            fontSize: "12px"
        },
        background: { 
            enabled: true
         }
    },
    title: "Bewertung allgemeine Zufriedenheit",
    subtitle: "Wochenübersicht",
    xtitle: "Kalenderwoche",
    ytitle: "Durchschnittsbewertung",
    animations: true,
    tooltip: true,
    chart: { width: "100%", height: "500px" },
    yaxis: { min: 1, max: 5, tickAmount: 5, decimalsInFloat: 1, forceNiceScale: true }) do %> 

    <% y_annotation(value: (0.0 .. 2.0), text: "", color: "green") %>
    <% y_annotation(value: (2.0 .. 4.0), text: "", color: "orange") %>
    <% y_annotation(value: (4.0 .. 5.0), text: "", color: "red") %>

<% end %>

Screenshots

Couldn't find anything about passing additional options to the dataLabels in dhe docs.

But nevertheless thanks for this amazing gem!

Hello again.

I guess it would be helpful if the docs state how to use JS functions, vars and statements as options for the chart helpers.

For example to format labels with Apexcharts, one has to define them as a function:

yaxis: {
  labels: {
    formatter: function (value) {
      return value + "$";
    }
  },
}

Also sometimes undefined is needed to reset certain options.

If you tell me where and how, I would be glad to open a PR to add that to the docs.

I am working on a project requiring heatmaps with largely varying data. I am trying to either:

1. utilize the distributed option as described in apexcharts docsoptions = { plotOptions: { heatmap: { distributed: true }}}
   or 2) disable shading entirely

When I use these options, I am returned with this unrecognized key: :distributed in ApexCharts::Options::RootOptions

Am I either missing something with this option or is it not available to use for heatmaps?

Thanks in advance

First, thanks @styd for this awesome wrapper.

Out of curiosity, I tried to replace Chartkick in one of our projects and for the reports I tried it with, it was almost like using a drop-in-replacement. Only that the Apexcharts look better :-)

When using this in production, one would most likely want to have global options, like disabling the toolbar, setting a font and theme for all charts and so forth.

I think (for a Rails app) an initializer would be the way to go:

Apexcharts.options = {
  chart: {
    animations: {
      enabled: false,
    },
    fontFamily: '"CGE Sans", Helvetica, Arial, sans-serif',
    toolbar: false,
    …
  },
  …
}

These global options hash would then be merged with the options argument per Apexcharts helper call:

<%= line_chart(series, options) %>
                       ^^^^^^^

Of course this could all be done manually, but having distinct global options would be cleaner and safer (no maintainer could forget to manually merge the global options).

Is your feature request related to a problem? Please describe.
I need to present data in the format of a histogram (columns with no space between)

Describe the solution you'd like
ability to to present data in the format of a histogram (columns with no space between)

Describe alternatives you've considered
No reasonable alternatives. Data can currently be presented as a column chart, but that doesn't communicate appropriate meaning as a histogram

Additional context
ApexCharts appears to support a histogram chart type: https://apexcharts.com/docs/options/chart/type/

Is your feature request related to a problem? Please describe.
I'm trying to use the sync functionality with a candlestick chart but the candlestick chart is not rendered. I can successfully display both charts without sync. If I try to sync two line_charts it works as well.

Describe the solution you'd like
The candlestick chart rendered and synced with the other charts.

Additional context
I'm using Sinatra.
Sample code that I'm using:

  def sync_candles_macd
    syncing_charts(chart: {toolbar: false}, height: 250, style: 'display: inline-block; width: 32%;') do
      line_chart(@macd_data, @macd_options) # these two line charts are rendered and synced
      line_chart(@macd_data, @macd_options) 
      candlestick_chart(@data, @data_options)
    end 
  end

The index template:

  template :index do
    <<~INDEX
      <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
      <%= sync_candles_macd %>
    INDEX
  end

Note: TY for the awesome project! :)

Describe the bug
when using integer values for x, the column chart won't display

To Reproduce
see above.

Desktop (please complete the following information):
reproduced in Chrome on Macbook pro on Catalina, as well as a PC Clone running Fedora 31