Gradient stroke on grid lines

[zeknoss]

Hello,
I've been switching our project charts from chartjs to ApexCharts. The only hickup I've encountered is applying a gradient to the vertical grid lines.

I've tried defining the gradient in another svg tag and referring to it as stroke: url(#gradName) but could not make it work.
Also tried as follows with no positive result:

grid: {
    borderColor: 'url(#gradName)',
}

Any help is appreciated, kind regards.

[d3cie]

Hey, did you ever find out how to do this?

[zeknoss]

hey @d3ciee , it's been a long time since I saw this :)
I guess I did it but might be wrong. Dug the archive for you and I'm pasting the code here, but I cannot guarantee the output.

<template>
    <div class="bg-white rounded-lg p:2 sm:p-6 mt-6 overflow-auto">
        <apexchart type="area" height="450" :options="options" :series="datasets" />
    </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts';

const colors = [
    [29,146,154],
    [255,69,0],
    [57,144,255],
    [255,199,110],
    [114,114,114],
    [121,182,162],
];

export default {
    name: "MainChart",
    components: {apexchart: VueApexCharts},
    props: {
        chartData: {
            type: Object
        },
    },
    data() {
        return {
            colors: colors.map(c => 'rgba(' + c.join(',') + ',0.5)'),
            colorsOpaque: colors.map(c => 'rgb(' + c.join(',') + ')')
        }
    },
    computed: {
        options() {
            return {
                colors: this.colors,
                markers: {
                    size: 2,
                    colors: this.colors,
                    strokeWidth: 0,
                },
                tooltip: {
                    x: {
                        format: 'LLL dd'
                    },
                },
                dataLabels: {
                    enabled: false
                },
                chart: {
                    id: 'mainChart',
                    height: 450,
                    type: 'area',
                    zoom: {
                        enabled: false,
                    },
                    toolbar: {
                        show: false,
                    },
                },
                grid: {
                    borderColor: "/grad.svg",
                    xaxis: {
                        lines: {
                            show: true,
                        }
                    },
                    yaxis: {
                        lines: {
                            show: false
                        }
                    },
                },
                xaxis: {
                    categories: this.labels,
                    axisBorder: {
                        show: false,
                    },
                    labels: {
                        style: {
                            colors: '#1D629A'
                        },
                        rotate: -90,
                        hideOverlappingLabels: true,
                    }
                },
                yaxis: {
                    labels: {
                        style: {
                            colors: '#1D629A'
                        },
                        formatter: val => val.toFixed(0)
                    }
                },
                stroke: {
                    curve: 'smooth',
                    width: 1,
                },
                legend: {
                    position: 'top',
                    horizontalAlign: 'right',
                    markers: {
                        fillColors: this.colorsOpaque,
                        radius: 4,
                        width: 20,
                        height: 20,
                        offsetY: 5
                    }
                },
            }
        },
        labels() {
            return this.chartData ? this.chartData.labels.map(l => this.$date.fromISO(l).toFormat('LLL dd')) : [];
        },
        datasets() {
            const output = [];
            if (this.chartData) {
                this.chartData.datasets.forEach(c => {
                    output.push({
                        name: c.label,
                        data: c.data
                    })
                });
            }
            return output;
        },
    },
};
</script>

<style>
.apexcharts-canvas, svg.apexcharts-svg {
    width: 100% !important;
    min-width: 600px;
}
</style>

I hope it helps.

PS: I used vue-apexcharts package for this one.

[d3cie]

Thank you so much I will look at it a bit later