asantibanez / livewire-charts

Neat Livewire Charts for your Laravel projects
MIT License
788 stars 116 forks source link

Added x-axis label rotation configuration for column charts #73

Closed AdrianBav closed 2 years ago

AdrianBav commented 2 years ago

Summary

Added x-axis label rotation configuration for column charts

Issue

When large amounts of x-axis labels, the default 45° rotation isn't enough

    $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
            ->setXAxisLabelAngle(-90)
        ;

Type of Change

Screenshot/Video

Capture

AdrianBav commented 2 years ago

Since PRing this, i've since made a flexible/dynamic addition to my forked copy.

->stylesFromJson('{"xaxis": {"labels": {"rotate": -90}}}')

I wanted to make too many customizations and didn't want make/PR a lot of fluent method helpers to cover everything. (I also added a "stylesFromFile" for when do ultra customization)

With these helpers, all data must still be set via the addSlice/addLine helpers. I just wanted a way to apply styles.

Even though its already written, I don't know if its worth PRing this. It feels like a bit of a hack and against the idea of using fluent helpers to apply styles. But it works for me, Let me know.

arrgh11 commented 2 years ago

+1

This would be a huge help as I'm currently running into an issue where I need to add "$" to the y axis labels. This would easily solve that problem!

AdrianBav commented 2 years ago

Closing this PR in favor of a more comprehensive solution.