apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.27k stars 1.3k forks source link

Mixed charts (column & line) not working. #4430

Closed hummelmose closed 4 months ago

hummelmose commented 5 months ago

Description

I have a mixed chart that have worked for many years. The last few days the line chart has stopped working. It just show the dots, but not the lines between the dots. Line charts alone works, but the mixed chart don't

Steps to Reproduce

` var chart1 = { chart: { type: 'line', group: 'queue', id: 'chart', height: screen.height - 400, animations: { enabled: false, animateGradually: { enabled: false } }
}, title: { text: '24 timer (Opdateret: 24-04-2024 06:49:46)', align: 'left' }, stroke: { width: 2, curve: 'smooth' }, markers: { size: 3 }, grid: { borderColor: '#e7e7e7', row: { colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns opacity: 0.5 }, }, colors: ['#003300', '#002699', '#660066', '#990000', '#E8C872', '#FE7A36', '#444444','#888888'], series: [

                {
                    name: 'FS Time',
                    type: 'column',
                    data: ['3','0','0','0','0','0','1','','','','','','','','','','','','','','','','',''],

                },
                {
                    name: 'FS Sum',
                    type: 'line',
                    data: ['3','3','3','3','3','3','4','','','','','','','','','','','','','','','','','']
                },                   
                {
                    name: 'GKEA Time',
                    type: 'column',
                    data: ['1','0','0','0','0','0','2','','','','','','','','','','','','','','','','','']

                },
                {
                    name: 'GKEA Sum',
                    type: 'line',
                    data: ['1','','','','','','3','','','','','','','','','','','','','','','','','']
                },
                {
                    name: 'OESK Time',
                    type: 'column',
                    data: ['0','0','0','0','0','0','1','','','','','','','','','','','','','','','','','']

                },
                {
                    name: 'OESK Sum',
                    type: 'line',
                    data: ['','','','','','','1','','','','','','','','','','','','','','','','','']
                },
                {
                    name: 'FS kø',
                    type: 'column',
                    data: ['0','0','0','0','0','0','','','','','','','','','','','','','','','','','','']
                },
                {
                    name: 'GKEA kø',
                    type: 'column',
                    data: ['0','0','0','0','0','0','','','','','','','','','','','','','','','','','','']
                }                     

            ],                
            xaxis: {
                categories: ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
                title: {
                    text: 'Tidspunkt',

                }
            },

        }

        var chart = new ApexCharts(document.querySelector("#chart"), chart1);
        chart.render();
        chart.hideSeries('FS kø');
        chart.hideSeries('GKEA kø');

`

Expected Behavior

Line charts with connected dots

Actual Behavior

only dots

Screenshots

image

Reproduction Link

RocketerJames commented 5 months ago

Hi @hummelmose,

I managed to sort my issue however I did look at yours for you:

Only one of your series is connected 'FS Sum' which is the second series. Every other lines have breaks. Two things are incorrect here: The colours array you supplied has an invalid colour assigned to that series (#2699) but also, the gaps should be null not blank strings (''). Changing that plots the lines.

Hope that helps!

hummelmose commented 5 months ago

Hi @hummelmose,

I managed to sort my issue however I did look at yours for you:

Only one of your series is connected 'FS Sum' which is the second series. Every other lines have breaks. Two things are incorrect here: The colours array you supplied has an invalid colour assigned to that series (#2699) but also, the gaps should be null not blank strings (''). Changing that plots the lines.

Hope that helps!

The wrong colorcode was an paste issue to Github. It's correct. I changed my code and removed two series, and that solved it - But it's just weird that it stopped working. Thanks for your answer.