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

Showcase
63

@Thimo Thank you for taking a look.

64

Hi @Thimo,

Iā€™m having a bit of trouble and hoping that youā€™d be able to help. Iā€™m trying to create a graph which will show a forecast range (thereā€™s a picture at the bottom with an example), but canā€™t seem to get this right. Below is a picture of the current graph.

Capture
Capture888Ɨ325 22.3 KB

Iā€™m trying to do the following:

  • Reduce the number of labels on the x-axis, Iā€™ve tried like crazy to do this. Am I missing something perhaps? The graph is dynamic and based upon the userā€™s input, so I canā€™t make this a static value.

  • Iā€™m trying to change the shaded area so that you can only see the light orange part at the top. Essentially, I want to show the area between the Upper Forecast and the Lower Forecast, with the 70% Forecast being a straight line. I have tried to change the order of the series (currently the Upper Forecast is Series 1), but then when you hover over a data point, it shows the Lower Forecast at the top of the tooltip, which looks very wierd.

  • Lastly, is there a way to change the Y-axis prefix? Iā€™m from South Africa and our currency is Rands (or ā€œRā€ for short).

Here is an example of the type of graph that Iā€™m trying to create:
Ellevest

Thanks for the help!
Dylan

1 Like
65

Hi @dylanmartens!

I have tried to implement ways to reduce the number of labels on the X-axis, but ApexCharts doesnā€™t seem to provide a way to do that with the values from the plugin inputs unfortunately . I would recommend to hide the X-axis labels and maybe create your own X-axis with dynamic data.

It is not possible to have one data series with a background color and one without. So I am afraid that it is not possible to create the chart style from your example image.

I will add your currency to the prefixes list! :slight_smile:

66

Hi @Thimo,

Thanks for the quick reply and the suggestions.

Dylan

67

Hi @Thimo,

Just thought of something else. Is it possible to change the color fill of 1 series and not another?

So have one series which is solid and another which is a line?

68

Hi @dylanmartens this is not currently possible with Apexcharts. A certain fill color style will apply to all the data series. Maybe a future update of the ApexCharts.js library will enable this feature.

69

Update 4.1.0

1 - Events now also return the index of the clicked datapoint.

2 - Added the ā€™Start angleā€™ property to define the start angle for donut and bar charts.

3 - Rands (ā€˜Rā€™) currency added to the prefixes and suffixes list. @dylanmartens

4 - Upgraded to the latest version of Apexcharts.

Donā€™t forget to refresh your editor after upgrading

2 Likes
70

Update 4.2.0

1 - You can now specify a minimum and maximum value for the Y-axis! This feature is available for: Line charts, Area chart (single and multiple lines), Bar chart (single and multiple bars) and the Candlestick chart.

Donā€™t forget to refresh your editor after upgrading

3 Likes
71

Update 4.3.0

1 - Added the ā€˜Bar widthā€™, ā€˜Bar heightā€™ (for horizontal bar charts) and the ā€˜Starting shapeā€™ property for the single and multiple bar charts.

Donā€™t forget to refresh your editor after updating

2 Likes
72

Hi! Question is possible to create a chart based off for one field for one item in the table?

73

Hi @mariel.vargas most of the charts needs a list of numbers (Y-axis data) and a lists of texts (X-axis data). If that field/item in the database can provide that it should work! :slight_smile:

2 Likes
74

Thanks Thimo!

75

Update 4.4.0

1 - The scatter chart now works with only 1 data series.

Donā€™t forget to refresh your editor after updating

1 Like
76

Hi @Thimo, great work with your plugin, I started using it a few days ago and itā€™s really beautiful and game changing for us, thank you so much for this wonderful job !!

I have two questions :

  • do you think it would be possible to do a scatter chart with unlimited numbers of series ?
  • do you think it could be possible to have two series for the radar chart ?

It would be awwwesome !

Thanks a lot !!

1 Like
77

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

Unlimited data series for the scatter chart is not something that could be implemented I am afraid. I will take a deeper look for you, but I donā€™t think it will work.

Multiple data series for the radar chart is something I want to try to implement in the coming weeks though! So that is something I will definitely look into and with positive results I will include it in the next update! :slight_smile:

78

Hi @Thimo, thanks for your fast answer ! Cant wait for the next update :slight_smile:

79

Happen to have a horizontal box and whiskers chart on the roadmap?

80

Hi @howard.lothrop! As far I know ApexCharts.js doesnā€™t support a horizontal box and whiskers chart (yet). If they end up implementing something like that in the future I will definitely take a look at it!

81

Could make a candlestick google chart with a vertical orientation

https://developers.google.com/chart/interactive/docs/gallery/combochart

Need an HTML element and to use a workflow event of run javascript to put the script in

82

Update 4.5.0

1 - The radar chart now supports up to 4 data series! @alexandre4

Radar chart multiple series preview

2 - Legends are now supported with radar charts

Donā€™t forget to refresh your editor after upgrading

2 Likes