Add ability to specify chart styles via JSON objects

[AdrianBav]

Summary

Add ability to specify chart styles via JSON objects

Issue

Often it is nice to be able to utilize the full power of Apex Charts.
There are too many options to make a fluent helper for each one, so this solution uses a more dynamic approach.

$columnChartModel =
    (new ColumnChartModel())
        ->setTitle('Expenses by Type')
        ->addColumn('Food', 100, '#f6ad55')
        ->addColumn('Shopping', 200, '#fc8181')
        ->addColumn('Travel', 400, '#90cdf4')
        // Allow x-axis labels to be set at right angles
        ->stylesFromJson('{"xaxis": {"labels": {"rotate": -90}}}')
    ;

// Multiple lines can also be specified
->stylesFromJson('{
    "plotOptions": {"bar": {"dataLabels": {"position": "top"}}},
    "dataLabels": {"offsetY": -20, "style": {"colors": ["#304758"]}},
    "stroke": {"show": true, "width": 2, "colors": ["transparent"]}
}')

// For large amounts of customization, the styles can be loaded from a JSON file
->stylesFromFile('styles.json')

Number formatting on the chart axis requires a JavaScript callback.
The setNumberFormat fluent helper formatting numbers in three common ways:

$columnChartModel =
    (new ColumnChartModel())
        ->setTitle('Expenses by Type')
        ->addColumn('Food', 14, '#f6ad55')
        ->addColumn('Shopping', 30, '#fc8181')
        ->addColumn('Travel', 56, '#90cdf4')
        // Choose the number format for data lables and y-axis ('number', 'dollar', 'percentage')
        ->setNumberFormat('percentage')
    ;

Type of Change

• [x] :rocket: New fluent helpers

[engel-m]

This is the one huge feature I am missing in this package. Thanks for your contribution it looks amazing.

[RishabSwift]

@asantibanez Any updates on when this can be merged? This is a crucial feature to allow complete customization of the charts. Thanks!

[laraben]

can this be merged please? I need this so i can handle the borderRadius of the columns

[laraben]

Why is this still not merged? :(

[asantibanez]

Hello @AdrianBav

I love the idea but i would like to keep the library api simple for now. I thought once about having a setApexChartConfig method directly so you could pass in a JSON config and that would be applied instead of the defaults for each chart but it still sounds too complex.

Thanks again.

[asantibanez]

@AdrianBav @engel-m @RishabSwift @laraben hello.

I am taking a different approach to achieve the same goal.

https://twitter.com/asantibanez/status/1620909755521974286

[simonbuehler]

hi,

imo this package does need this advanced customization option so one could pass some overrides that will get merged just before passing the data to the chart rendering, e.g. i need the title on top and not on the left, so please add an override mechanism

[RishabSwift]

@asantibanez

If the setJsonConfig() does the same thing as the PR, then that's great! About time :)

Unfortunately, I had to abandon this package because it was missing this much needed critical ability to customize.

[marcioelias]

@asantibanez this version with the setJsonConfig method are currently available from the composer install? I need this feature, but even removing and reinstalling from the composer is not available to me.