CODEWITHSUNDEEP
javascriptapexcharts
Stenly Georgiev
Stenly Georgiev

Reputation: 35

ApexChart: Line chart another option

Hi I am using АpexChart but I have problem setting up xaxis. The picture below is from another chart, but I'm looking for the effect it has. Note the long straight line, this means there is no data for the specific period.

How do I set up a АpexChart so I can display similar data

  var options = {
                series: [{
                        name: "Level",
                        data: [30,45,50,60,70,91,125]
                    }],
                chart: {
                    height: 350,
                    type: 'line',
                    zoom: {
                        enabled: true
                    }
                },
                dataLabels: {
                    enabled: true
                },
                stroke: {
                    curve: 'straight'
                },
                title: {
                    text: 'Battery',
                    align: 'left'
                },
                grid: {
                    row: {
                        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                        opacity: 0.5
                    },
                },
                xaxis: {
                    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
                }
            };

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

chart.render();

enter image description here

Upvotes: 1

Views: 277

Answers (1)

Badacadabra
Badacadabra

Reputation: 8497

The chart we see on your screenshot has been made with Highcharts, right? I know that you can do something similar with amCharts or Chart.js. But this feature is not available in ApexCharts yet. With ApexCharts, you will get blanks (see demo) if you have null values in your data.

Take a look at this issue and this pull request on GitHub.

Comment of the library author (2019), from the issue:

This has been proposed, but not worked upon yet.

Comment of the library author (2021), from the PR:

Update: This PR doesn't solve the issue the way we wanted and doesn't cover multiple use-cases. Please bear with us. There might be a new PR with a completely different implementation.

Upvotes: 1

Related Questions