Forum Academy Marketplace Showcase Pricing Features

[New plugin] Beautiful Customizable Charts and Graphs (ApexCharts.js)

@Thimo,

Just got to say, your charts plugin is awesome.

I swapped out the other one and replaced their donut chart with you plugins.

Plus the area chart from your plugin is easy to configure nearly completely into what I wanted.

The only thing I can’t get the area chart to do, is expand to fill the entire width. There’s a gap on either side. Any pointers on if it’s possible?

Thanks

The chart looks great!

You can enable ‘sparkline’ if you haven’t already to reduce the margins. If you don’t want to enable sparkline or if you want to reduce the padding even more, there are 4 padding options for the chart where the default is ‘20’ (under ‘grid options’). These can be set to 0 or even a negative value! :slight_smile:

Thanks. It works well in the app.

Yes I saw those settings, but didn’t think to use negative values! That’s awesome idea! Thanks.

1 Like

@Thimo I have been using this plugin for almost a year and it is amazing. Many thanks to you.

I generally have some visualization problems when attempting to use the legend. I was wondering if there is a way to adjust the font size and have more control over the location of the legend (e.g. allow some offset to the preset location options)? Maybe I am missing something on the font size but I can’t seem to find any param for this in the config.

Happy new year!

Hi @rivergalli, great to hear that you are enjoying the plugin!

I have pushed an update (6.2.0) for you that gives you access to the following properties regarding the legend (‘X offset’, ‘Y offset’ and ‘Font size’): :slight_smile:
2021-01-10 om 18.45.22

@Thimo As always you are the best! I will check it out asap.

1 Like

@Thimo

Quick question: I am currently playing with the plug-in to get to know the different attributes better. Any chance, you can share the charts from your plug-in page in a way that I can copy their styles? When I try to do that with the one you have publicly available, I cannot seem to copy the styles. Bubble let’s me copy the style but pasting it does not change anything. This would help a lot to understand the plug-in quicker.

Thanks a lot and as the others said, the plugin is great

Hi @pat, I think that has something to do with that the demo page is using the ‘test’ version of the plugin. I am planning on re-creating the demo page with the ‘live’ plugin version which also should make it much faster. I unfortunately can’t give you a specific date for this though as this is quite a lot of work

Ok thank you for letting me know! Another quick question: The plug-in says to use RGBA color code if we want to use dynamic data. How do we have to format the code? Commas? No commas? I don’t seem to be able to adjust the color dynamically (tested it out via an input form and used all kinds of different ways of using the code)

Hi @Pat,

Yes, if you want to use dynamic colours from the database you should, instead of using hex color codes like ‘#ffffff’ (white), use rgba color codes like: ‘rgba(255,255,255,1.0)’ (white).

I will also look into for you if I can handle this inside the plugin, so you can just use hex codes like you are used to :slight_smile:

Thanks, it is working! Did not know I have to start with rgba

Re: the hex that would be great. Would it be just one of the two? Or both? Asking because I am about to set up the data structure. Just starting to try things out but I think what I like about RGBA is that we could combine two data fields and let the user adjust opacity, if my thinking is right

Edit: Nevermind, I think bubble is not allowing such a dynamic value in this field. But that’s ok, certainly other ways to achieve that

The way I am implementing it now is that you could use both Rgba or Hex!

Dear all,

I have an issue with this plugin. I received the following error:
The plugin ApexCharts.js - Charts and Graphs / element Area chart - multiple lines threw the following error: ReferenceError: toHex is not defined
at eval (PLUGIN_ApexCharts-js—Charts-and-Graphs-update–Area-chart—multiple-lines-.js:59:19)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/fb36060fd6160f96e9edb7a5981aa141a66ac6f8e2b853a2ef676ef27aee5a2e/xfalse/x10:15:476355 (please report this to the plugin author)

Can you help me please?

Hi @fr.duhamel,

I will send you a PM so we can take a better look at the problem you are having!

Hey,

Quick question. Why can the pie charts no longer have the legend at the top?

Hi @dr712406,

Thank you so much for flagging! I pushed a fix for this (6.3.1)! :slight_smile:

Don’t forget to refresh your editor when you have updated.

Hi @Thimo,

This plugin is great, absolute game changer!

I’m having an issue when trying to populate the charts (area/line/bar) directly from an API.

My API data returns as below:

My Chart Series Data & Category are “close” & “Date: formatted”
image

My Charts are producing the correct data however the data is being plotted from most recent - to oldest.

Are you able to advise how I can get the charts to present the data in date order (oldest to newest)?

I have tried sorting the dates in the series category, however this just rearranges the x axis labels without changing the plots on the chart.
image

Any help on this would be greatly appreciated.

Thanks
J

Hi @j.gow

You will have to sort both the series data and series category the same way. For example:

Series data: FMP-MTD’s historical:sorted(date)'s close
Category data: FMP-MTD’s historical:sorted(date)'s date:formatted as 1/17/21

Thanks for the rapid response!

This worked perfectly
I’m a little bit ashamed of how many incorrect things I tried without realising it was that simple haha

image

Thanks!

1 Like