Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot set timeline xaxis #100

Open
ManuDoni opened this issue Feb 17, 2024 · 3 comments
Open

Cannot set timeline xaxis #100

ManuDoni opened this issue Feb 17, 2024 · 3 comments

Comments

@ManuDoni
Copy link

ManuDoni commented Feb 17, 2024

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
Copy link

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

@ManuDoni
Copy link
Author

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
Copy link

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...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants