ArielMejiaDev / larapex-charts

A Laravel wrapper for apex charts
https://larapex-charts.netlify.app/
MIT License
290 stars 83 forks source link

Cannot set timeline xaxis #100

Open ManuDoni opened 8 months ago

ManuDoni commented 8 months ago

Hello, I tried to plot a bar chart with multiple series, each of those have a different timeline. I needed to use $this->chart->barChart()->setXAxis(['type' => 'datetime']) but I cannot because in LarapexChart::setXAxis you are setting only the xaxis.categories property. This is the generated HTML:

var options =
    {
        chart: {
            type: 'bar',
            height: 500,
            width: '100%',
            toolbar: {"show": false},
            zoom: {"enabled": true},
            fontFamily: 'Helvetica, Arial, sans-serif',
            foreColor: '#373d3f',
            sparkline: {"enabled": false},
        },
        plotOptions: {
            bar: {"horizontal": false}
        },
        colors: ["#008FFB", "#00E396", "#feb019", "#ff455f", "#775dd0", "#80effe", "#0077B5", "#ff6384", "#c9cbcf", "#0057ff", "#00a9f4", "#2ccdc9", "#5e72e4"],
        series: [{
            "name": "Planet Premium",
            "data": [["2024-01-18", 1], ["2024-01-19", 1], ["2024-01-24", 2], ["2024-01-30", 1], ["2024-01-31", 2], ["2024-02-02", 1], ["2024-02-08", 1], ["2024-02-12", 1]]
        }, {
            "name": "Planet Classic",
            "data": [["2024-01-20", 2], ["2024-01-21", 1], ["2024-01-22", 1], ["2024-01-28", 1], ["2024-01-30", 1], ["2024-02-01", 1], ["2024-02-03", 1], ["2024-02-08", 1], ["2024-02-16", 1]]
        }, {
            "name": "Brico Planet",
            "data": [["2024-01-23", 1], ["2024-01-31", 1], ["2024-02-03", 1], ["2024-02-04", 2], ["2024-02-06", 1], ["2024-02-08", 1], ["2024-02-09", 1], ["2024-02-10", 1], ["2024-02-11", 1]]
        }, {
            "name": "Easy Planet",
            "data": [["2024-01-26", 1], ["2024-01-27", 1], ["2024-01-29", 1], ["2024-01-30", 1], ["2024-01-31", 1], ["2024-02-02", 1], ["2024-02-03", 1], ["2024-02-04", 1], ["2024-02-08", 1], ["2024-02-11", 1]]
        }],
        dataLabels: {"enabled": false},
        title: {
            text: "Ricerche ultimo mese"
        },
        subtitle: {
            text: 'Divise per prodotto',
            align: 'left'
        },
        xaxis: {
            categories: {"type": "datetime"}
        },
        grid: {"show": false},
        markers: {"show": false},
        legend: {
            show: true
        }
    }

var chart = new ApexCharts(document.querySelector("#ohwpjxcasydzqkbmfuegtvnli"), options);
chart.render();

The setXAxis method name is misleading, but I understand altering its behavior would be a breaking change. It should be done in the next major release. At the moment the only thing I can do is use apex chart directly without using this package. Not a big issue though but it makes this package useless for me

lukejames1111 commented 5 months ago

I'm wondering if you ever found a fix for this as I'm looking for the same solution too?

ManuDoni commented 5 months ago

I'm wondering if you ever found a fix for this as I'm looking for the same solution too?

I can't fix this without making a PR that would introduce a breaking change. I was waiting for an answer by the author. I ended up not using this library, using apex charts directly by JavaScript

lukejames1111 commented 5 months ago

I can't fix this without making a PR that would introduce a breaking change. I was waiting for an answer by the author. I ended up not using this library, using apex charts directly by JavaScript

Unfortunately, I think this is the only way to properly use this library. Which is a shame because out the box it works well, but if you want to customise it in any way it just doesn't work. Oh well. Looks like I'll be using ApexCharts directly too...