asantibanez / livewire-charts

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

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

Closed shylor closed 1 year ago

shylor commented 3 years ago

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.

vigstudio commented 3 years ago

me too

AllexNogue commented 2 years ago

me too

mafalda2007 commented 2 years ago
$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(['$'])
rudysetiawan commented 2 years ago

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()

        );

`

asantibanez commented 1 year ago

Hello @shylor

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

kraglr commented 1 year ago

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

fcmpeixoto commented 6 months ago

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()

    );
Acentrix-Jordan commented 4 months ago

.

Can't seem to find this reference in the documentation. Can anybody provide a link?