Preline Charts #238

YIPZIYAN · 2024-01-01T13:35:46Z

YIPZIYAN
Jan 1, 2024

I'm using <div id="hs-single-area-chart"></div>
The code is exactly copied from here https://preline.co/docs/charts.html
But the tooltips does not display as the same with the demo
This is what I get

it should be

all script files are linked, no error in console

does anyone know what is the problem?

My code

<head>
    <link rel="stylesheet" href="../dist/apexcharts.css">
    <script src="../dist/lodash.min.js"></script>
    <script src="../dist/apexcharts.min.js"></script>
    <script src="https://preline.co/assets/js/hs-apexcharts-helpers.js"></script>
</head>

    <div class="max-w-[85rem] mt-8">
        <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden dark:bg-slate-900 dark:border-gray-700">
            <div id="hs-single-area-chart"></div>
        </div>
    </div>
    
        <script>
        window.addEventListener('load', () => {
            (function () {
                buildChart('#hs-single-area-chart', (mode) => ({
                    chart: {
                        height: 300,
                        type: 'area',
                        toolbar: {
                            show: false
                        },
                        zoom: {
                            enabled: false
                        }
                    },
                    series: [
                        {
                            name: 'Visitors',
                            data: [180, 51, 60, 38, 88, 50, 40, 52, 88, 80, 60, 70]
                        }
                    ],
                    legend: {
                        show: false
                    },
                    dataLabels: {
                        enabled: false
                    },
                    stroke: {
                        curve: 'straight',
                        width: 2
                    },
                    grid: {
                        strokeDashArray: 2
                    },
                    fill: {
                        type: 'gradient',
                        gradient: {
                            type: 'vertical',
                            shadeIntensity: 1,
                            opacityFrom: 0.1,
                            opacityTo: 0.8
                        }
                    },
                    xaxis: {
                        type: 'category',
                        tickPlacement: 'on',
                        categories: [
                            '25 January 2023',
                            '26 January 2023',
                            '27 January 2023',
                            '28 January 2023',
                            '29 January 2023',
                            '30 January 2023',
                            '31 January 2023',
                            '1 February 2023',
                            '2 February 2023',
                            '3 February 2023',
                            '4 February 2023',
                            '5 February 2023'
                        ],
                        axisBorder: {
                            show: false
                        },
                        axisTicks: {
                            show: false
                        },
                        crosshairs: {
                            stroke: {
                                dashArray: 0
                            },
                            dropShadow: {
                                show: false
                            }
                        },
                        tooltip: {
                            enabled: false
                        },
                        labels: {
                            style: {
                                colors: '#9ca3af',
                                fontSize: '13px',
                                fontFamily: 'Inter, ui-sans-serif',
                                fontWeight: 400
                            },
                            formatter: (title) => {
                                let t = title;

                                if (t) {
                                    const newT = t.split(' ');
                                    t = `${newT[0]} ${newT[1].slice(0, 3)}`;
                                }

                                return t;
                            }
                        }
                    },
                    yaxis: {
                        labels: {
                            align: 'left',
                            minWidth: 0,
                            maxWidth: 140,
                            style: {
                                colors: '#9ca3af',
                                fontSize: '13px',
                                fontFamily: 'Inter, ui-sans-serif',
                                fontWeight: 400
                            },
                            formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
                        }
                    },
                    tooltip: {
                        x: {
                            format: 'MMMM yyyy'
                        },
                        y: {
                            formatter: (value) => `${value >= 1000 ? `${value / 1000}k` : value}`
                        },
                        custom: function (props) {
                            const { categories } = props.ctx.opts.xaxis;
                            const { dataPointIndex } = props;
                            const title = categories[dataPointIndex].split(' ');
                            const newTitle = `${title[0]} ${title[1]}`;

                            return buildTooltip(props, {
                                title: newTitle,
                                mode,
                                valuePrefix: '',
                                hasTextLabel: true,
                                markerExtClasses: '!rounded-sm',
                                wrapperExtClasses: 'min-w-[120px]'
                            });
                        }
                    },
                    responsive: [{
                        breakpoint: 568,
                        options: {
                            chart: {
                                height: 300
                            },
                            labels: {
                                style: {
                                    colors: '#9ca3af',
                                    fontSize: '11px',
                                    fontFamily: 'Inter, ui-sans-serif',
                                    fontWeight: 400
                                },
                                offsetX: -2,
                                formatter: (title) => title.slice(0, 3)
                            },
                            yaxis: {
                                labels: {
                                    align: 'left',
                                    minWidth: 0,
                                    maxWidth: 140,
                                    style: {
                                        colors: '#9ca3af',
                                        fontSize: '11px',
                                        fontFamily: 'Inter, ui-sans-serif',
                                        fontWeight: 400
                                    },
                                    formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
                                }
                            },
                        },
                    }]
                }), {
                    colors: ['#2563eb', '#9333ea'],
                    fill: {
                        gradient: {
                            stops: [0, 90, 100]
                        }
                    },
                    grid: {
                        borderColor: '#e5e7eb'
                    }
                }, {
                    colors: ['#3b82f6', '#a855f7'],
                    fill: {
                        gradient: {
                            stops: [100, 90, 0]
                        }
                    },
                    grid: {
                        borderColor: '#374151'
                    }
                });
            })();
        });
    </script>

Zio-n · 2024-04-17T19:04:00Z

Zio-n
Apr 17, 2024

Were you able to find a solution to the problem, cause i'm having the same issue.

0 replies

Zio-n · 2024-04-17T19:28:59Z

Zio-n
Apr 17, 2024

The problem i was having is the data labels weren't showing when i hovered over the area chart only the date. I was able to fix my problem by copying the contents of hs-apexcharts-helpers.js and creating the file locally in my project. So instead of

<script src="https://preline.co/assets/js/hs-apexcharts-helpers.js"></script> it would be
<script src="../{location_path}/js/hs-apexcharts-helpers.js"></script>

0 replies

YIPZIYAN · 2024-04-18T00:05:56Z

YIPZIYAN
Apr 18, 2024
Author

Thanks for the solution.
I'm just remove the custom function in tooltips then its work for me.

                    tooltip: {
                        x: {
                            format: 'MMMM yyyy'
                        },
                        y: {
                            formatter: (value) => `${value >= 1000 ? `${value / 1000}k` : value}`
                        },
                        
                        //delete this custom function
                        custom: function (props) {
                            const { categories } = props.ctx.opts.xaxis;
                            const { dataPointIndex } = props;
                            const title = categories[dataPointIndex].split(' ');
                            const newTitle = `${title[0]} ${title[1]}`;

                            return buildTooltip(props, {
                                title: newTitle,
                                mode,
                                valuePrefix: '',
                                hasTextLabel: true,
                                markerExtClasses: '!rounded-sm',
                                wrapperExtClasses: 'min-w-[120px]'
                            });
                        }
                    },

0 replies

fatmaibrahim90 · 2024-08-14T09:37:16Z

fatmaibrahim90
Aug 14, 2024

how can I convert this chart as it select as id selector for many classes as the class selector and make for each for it

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Preline Charts #238

{{title}}

Replies: 4 comments

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Preline Charts #238

YIPZIYAN Jan 1, 2024

Replies: 4 comments

Zio-n Apr 17, 2024

Zio-n Apr 17, 2024

YIPZIYAN Apr 18, 2024 Author

fatmaibrahim90 Aug 14, 2024

YIPZIYAN
Jan 1, 2024

Zio-n
Apr 17, 2024

Zio-n
Apr 17, 2024

YIPZIYAN
Apr 18, 2024
Author

fatmaibrahim90
Aug 14, 2024