Filament•3mo ago

Chart Widget - Ticks

I have a chart that is measuring user logins. However at small numbers or if there is no data the chart displays the possiblity of negative numbers and .5 of ticks. This doesn't make sense for this chart, you can't get negative logins or .5 of a login. Is there a way I can set the ticks to only be postive and for the ticks to be whole numbers? As part of my solution I am also using the flowframe/laravel-trend as reccomended in the docs

Solution:

We are using Chart.JS for the charts so check their docs. You probably want to set a min value for the y-axis: https://www.chartjs.org/docs/latest/axes/

Axes | Chart.js

Open source HTML5 Charts for your website

Jump to solution

2 Replies

Solution

Dennis Koch•3mo ago

We are using Chart.JS for the charts so check their docs. You probably want to set a min value for the y-axis: https://www.chartjs.org/docs/latest/axes/

Axes | Chart.js

Open source HTML5 Charts for your website

Kymset•3mo ago

Thanks @Dennis Koch I have managed to get this sorted by doing the following:

protected function getOptions(): RawJs
    {
        return RawJs::make(<<<JS
            {
                scales: {
                    y: {
                        min: 0,
                        ticks: {
                            stepSize: 1,
                        },
                    },

                },
                plugins: {
                    legend: {
                        display: false
                    },
                }
            }
        JS);
    }

protected function getOptions(): RawJs
    {
        return RawJs::make(<<<JS
            {
                scales: {
                    y: {
                        min: 0,
                        ticks: {
                            stepSize: 1,
                        },
                    },

                },
                plugins: {
                    legend: {
                        display: false
                    },
                }
            }
        JS);
    }

Gaming

Programming

Chart Widget - Ticks