apexcharts / apexcharts.js

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

Regression between 3.35.0 and 3.35.1 #3133

Closed malard closed 2 years ago

malard commented 2 years ago

I woke up this morning to find my website's charts all faint, I am using jsDeliver and it was set to deliver the head revision all the time, rolling back your point release fixes the issue.

There are too many commits (which I do not understand well enough to identify the breaking change, however I suspect it could be this one:

https://github.com/apexcharts/apexcharts.js/commit/4d7131bf8e9773501345e68cc886fa8fef898599

image

My code


    document.addEventListener("DOMContentLoaded", function(event) {
        var s = document.getElementById('periodGraph');
        var blueLine = "#009EF7",
            blueFill = "#F1FAFF",
            greenLine = "#50CD89",
            greenFill = "#E8FFF3",
            purpleLine = "#7239ea",
            purpleFill = "#c8adff",
            redLine = "#ea3939",
            redFill = "#fc7777",
            greyLine = "#EFF2F5",
            greyFill = "#A1A5B7";

        new ApexCharts(s, {
            series: [
                {
                    name: "Purchases",
                    data: [9,17,22,13,17,13,20,21,15,7,19,24,8,11,12,8,11,10,4,10,8,3,3,5]
                },
                {
                    name: "Shenzhen",
                    data: [5,13,13,10,11,9,14,15,12,3,17,24,6,6,5,3,7,5,2,4,4,0,1,1]
                },
                {
                    name: "Singapore",
                    data: [4,3,4,2,5,4,6,5,2,4,2,0,2,5,4,2,3,3,1,3,2,2,1,2]
                },
                {
                    name: "DFW",
                    data: [0,1,5,1,1,0,0,1,1,0,0,0,0,0,3,3,1,2,1,2,2,1,1,2]
                },
                {
                    name: "Shanghai",
                    data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0]
                }

            ],
            chart: {
                type: "area",
                height: 300,
                toolbar: {
                    show: false
                }
            },
            plotOptions: {},
            legend: {
                show: false
            },
            dataLabels: {
                enabled: false
            },
            fill: {
                type: "solid",
                opacity: 0.6
            },
            stroke: {
                curve: "smooth",
                show: true,
                width: 3,
                colors: [blueLine, greenLine, purpleLine, redLine, greyLine]
            },
            xaxis: {
                categories: ['12am', '1am', '2am', '3am', '4am', '5am', '6am', '7am', '8am', '9am', '10am', '11am', '12pm', '1pm', '2pm', '3pm', '4pm', '5pm', '6pm', '7pm', '8pm', '9pm', '10pm', '11pm'],
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false
                },
                labels: {
                    show: false,
                    style: {
                        colors: greyFill,
                        fontSize: "12px"
                    }
                },
                crosshairs: {
                    position: "front",
                    stroke: {
                        color: blueLine,
                        width: 1,
                        dashArray: 3
                    }
                },
                tooltip: {
                    enabled: true,
                    formatter: void 0,
                    offsetY: 0,
                    style: {
                        fontSize: "12px"
                    }
                }
            },
            yaxis: {
                labels: {
                    style: {
                        colors: greyFill,
                        fontSize: "12px"
                    },
                    formatter: function(val, index) {
                        return (val || 0).toFixed(0);
                    }
                }
            },
            states: {
                normal: {
                    filter: {
                        type: "none",
                        value: 0
                    }
                },
                hover: {
                    filter: {
                        type: "none",
                        value: 0
                    }
                },
                active: {
                    allowMultipleDataPointsSelection: false,
                    filter: {
                        type: "none",
                        value: 0
                    }
                }
            },
            tooltip: {
                style: {
                    fontSize: "12px"
                }
            },
            colors: [blueFill, greenFill, purpleFill, redFill, greyFill],
            grid: {
                borderColor: greyLine,
                strokeDashArray: 4,
                yaxis: {
                    lines: {
                        show: true
                    }
                }
            },
            markers: {
                colors: [blueFill, greenFill, purpleFill, redFill, greyFill],
                strokeColor: [blueLine, greenLine, purpleLine, redLine, greyLine],
                strokeWidth: 3
            }
        }).render();
    });
...
junedchhipa commented 2 years ago

Thanks for bringing this to my attention, fixed it. A patch version will be released soon.

malard commented 2 years ago

your welcome, thanks for a speedy fix!