styd / apexcharts.rb Goto Github PK
View Code? Open in Web Editor NEW:bar_chart: Awesome charts for your ruby app powered by ApexCharts.JS.
Home Page: https://a-styd.gitbook.io/apexcharts-ruby/
License: MIT License
:bar_chart: Awesome charts for your ruby app powered by ApexCharts.JS.
Home Page: https://a-styd.gitbook.io/apexcharts-ruby/
License: MIT License
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" }) %>
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:
//= require apexcharts
gem 'apexcharts', require: 'apexcharts/prefix_with_apex'
<%= 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:
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <% require 'set' %> <% require 'apexcharts' %> <% include ApexCharts::Helper %>
`<%= 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) %>`
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:
sprockets
and esbuild
+jsbundling-rails
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).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 )defer
option, usually the chart is not presented when the route is loaded first time because it tries to use ApexChart before its initialization.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
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:
Expected behavior
No errors
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
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:
Create the file box_plot_chart.rb under lib/apex_charts/charts, inheriting from CaterisanChart
Add the boxplot_chart helper method to the file lib/apex_charts/helper.rb
Add boxPlot to the file lib/apex_charts/options/default/plot_options.rb
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.
Kick up the gem version so that I can check my application's Gemfile.lock and ensure that it is referencing the right code.
Update the apexcharts.js file because the current version in use does not have the boxPlot chart.
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):
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
For example:
<%= column_chart([], {
title: 'My graph',
xtitle: 'Horizontal Series',
ytitle: 'Vertical Series',
theme: 'mytheme' }) %>
I would have expected an empty series to show an empty graph.
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
Desktop (please complete the following information):
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:
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
Expected behavior
Doesn't duplicate de chart.
Desktop (please complete the following information):
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.
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 %>
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:
options = { plotOptions: { heatmap: { distributed: true }}}
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_chart
s 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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.