livewire-charts icon indicating copy to clipboard operation
livewire-charts copied to clipboard

[Question] Is there a way to change the formatting on a number (commas and dollar signs)?

Open shylor opened this issue 3 years ago • 4 comments

Is there a way to change the formatting on a number (commas and dollar signs)?

I think there is a way to do this in Apex, but not sure if there is a way to pass this through from livewire charts.

shylor avatar Mar 14 '21 12:03 shylor

me too

vigstudio avatar Jul 07 '21 14:07 vigstudio

me too

AllexNogue avatar Oct 06 '21 20:10 AllexNogue

$graphBase =  LivewireCharts::multiColumnChartModel()
        ->setHorizontal(false)
        ->multiColumn()
        ->setDataLabelsEnabled(true)
        ->setAnimated(true)
        ->withGrid()
        ->stacked()
        ->withOnColumnClickEventName('onColumnClick')
        ->addSeriesColumn('A', 1,   number_format($data,2,",","."))
        ->addSeriesColumn('B', 1, number_format($data,2,",","."))
        ->setColors(['#cb3234', '#32CD32'])
        ->setXAxisCategories(['$'])

mafalda2007 avatar Jan 05 '22 14:01 mafalda2007

hi @mafalda2007 or anyone , where do I put the number_format for a columnChartModel ? thank you in advance

below is my code:

`

$history = TopUpHistory::whereIn('source_type',$this->types)->get();

    $columnChart = $history->groupBy('source_type')

        ->reduce(function ($columnChart, $data) {

            $type = $data->first()->source_type;

            $value = number_format($data->sum('amount'),2);

            //$value = $data->sum('amount');

            return $columnChart->addColumn($type, $value, $this->colors[$type]);

            //return $columnChart->addColumn($type, ['formatted' => 'IDR ' . number_format($value,2,',','')], $this->colors[$type]);

        }, LivewireCharts::columnChartModel()

            ->setTitle('Top Up Value')

            ->setAnimated($this->firstRun)

            ->withOnColumnClickEventName('onColumnClick')

            ->setLegendVisibility(true)

            ->setDataLabelsEnabled($this->showDataLabels)

            //->setOpacity(0.25)

            ->setColors(['#b01a1b', '#d41b2c', '#ec3c3b', '#f66665'])

            ->setColumnWidth(90)

            ->setYAxisVisible(1)

            ->withGrid()

        );

`

rudysetiawan avatar Feb 24 '22 09:02 rudysetiawan

Hello @shylor

You can do this now using extras.tooltip in the latest version of the library.

asantibanez avatar Feb 01 '23 19:02 asantibanez

Hi, can you give an example how to implement the extra.tooltip. thank you!

kraglr avatar Apr 25 '23 09:04 kraglr

Em addColumn($title, $value, $color, $extras = []), no quarto paremetro voce coloca ['tooltip' => 'IDR ' . number_format($value,2,',','')]

$columnChart = $history->groupBy('source_type')

    ->reduce(function ($columnChart, $data) {

        $type = $data->first()->source_type;

        $value = number_format($data->sum('amount'),2);

        //$value = $data->sum('amount');

        return $columnChart->addColumn($type, $value, $this->colors[$type], ['tooltip' => 'IDR ' . number_format($value,2,',','')]);

        //return $columnChart->addColumn($type, ['formatted' => 'IDR ' . number_format($value,2,',','')], $this->colors[$type]);

    }, LivewireCharts::columnChartModel()

        ->setTitle('Top Up Value')

        ->setAnimated($this->firstRun)

        ->withOnColumnClickEventName('onColumnClick')

        ->setLegendVisibility(true)

        ->setDataLabelsEnabled($this->showDataLabels)

        //->setOpacity(0.25)

        ->setColors(['#b01a1b', '#d41b2c', '#ec3c3b', '#f66665'])

        ->setColumnWidth(90)

        ->setYAxisVisible(1)

        ->withGrid()

    );

fcmpeixoto avatar Jan 01 '24 23:01 fcmpeixoto