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

[andrew.mcdonagh]

Hi @Thimo

Ok thanks for confirming.

How about the area chart fill colour (not the tooltip) which is currently just a solid colour. Could you add a gradient to it?

[Thimo]

@andrew.mcdonagh the ‘line chart’ does support the gradient color for the stroke of the chart. I will take a look if the Area chart also supports this!

[andrew.mcdonagh]

Great, many thanks @Thimo!

[andrew.mcdonagh]

Hi @Thimo,

Just noticed an odd behaviour with the Donut chart.

If the ‘Section border Color’ is set to be 100% transparent, then the border disappears as if the Border Width was set to zero.

Is this expected behaviour?

Eg - with colour transparency set to Zero

Eg with colour transparency set to 100%

regards
Andrew

[Thimo]

Hi @andrew.mcdonagh ,

Are you sure this is my chart plugin? I don’t recognize these particular setting names. In my chart plugin (donut) these settings look like this:

[andrew.mcdonagh]

Oh you’re right @Thimo!

Sorry, I thought I was using your plugin for the donut!

[andrew.mcdonagh]

@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.

[andrew.mcdonagh]

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

[Thimo]

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!

[andrew.mcdonagh]

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.

[rivergalli]

@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!

[Thimo]

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’):

[rivergalli]

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

[Pat]

@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

[Thimo]

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

[Pat]

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)

[Thimo]

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

[Pat]

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

[Thimo]

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

[fr.duhamel]

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?