Stacked Column Charts

[sytheveenje]

Summary

A column chart with stacked columns like Apex has: https://apexcharts.com/javascript-chart-demos/column-charts/stacked/

Proposal

Should work like this: https://apexcharts.com/javascript-chart-demos/column-charts/stacked/

I guess you should use it like this:

$chart =
            (new StackedColumnChartModel())
            ->setTitle('title')
            ->addColumn(['column 1', 'column 2'], [4,5], '#123FFF');

Additional Notes

[sytheveenje]

I'm sorry, I now see in the docs that there is an option for stacked() on the columnchart. Do you have an example of how to use it @asantibanez ?

[mafalda2007]

Hello, I am also looking for the stacked chart. I tried in many ways without success. @asantibanez

[mafalda2007]

@sytheveenje Eureka! I already found it

 $graficoStacked = $assignments->get()->groupBy('type')
          ->reduce(function ($multiColumnChartModel, $data) {
                  $type  = $data->first()->type;
          return $multiColumnChartModel
                ->addSeriesColumn($type, 1, $data->count('type'));
          },        
          LivewireCharts::multiColumnChartModel()
                ->setHorizontal(false)
                ->multiColumn()
                ->setOpacity(0.80)
                ->setDataLabelsEnabled(true)
                ->withoutLegend()
                ->setTitle('Type Problem')
                ->withLegend()
                ->withGrid()
                ->stacked()
                ->withOnColumnClickEventName('onColumnClick')
                ->setXAxisCategories(['2019', '2020', '2021', '2022', '2022'])

[asantibanez]

Glad you found it @mafalda2007

Have you seen the demo repo @sytheveenje ? I've added some examples there

https://github.com/asantibanez/livewire-charts-demo