Create an Amazin chart with ApexCharts.

Hi 🙂🖐

ApexCharts is a powerful JavaScript charting library that allows you to create stunning charts and graphs in minutes. With its wide range of features and customization options, ApexCharts can be used to create charts for any purpose, from simple line charts to complex heatmaps.

In this post, we will show you how to create amazing charts with ApexCharts. We will cover the basics of creating charts, as well as some advanced techniques for creating more visually appealing and informative charts.

Getting Started with ApexCharts

The first step to creating a chart with ApexCharts is to include the ApexCharts library in your HTML file. You can do this by adding the following script tag to the head of your document

<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.42.0/apexcharts.min.js" integrity="sha512-HctQcT5hnI/elQck4950pvd50RuDnjCSGSoHI8CNyQIYVxsUoyJ+gSQIOrll4oM/Z7Kfi7WCLMIbJbiwYHFCpA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

you need to create a div to render charts into it

<div id="chart"></div>

Once you have included the library, you can create a chart by creating a new ApexCharts object and passing in the data you want to visualize. For example, the following code creates a simple area chart with two data series:

let options = {
    chart: {
        type: 'area',
        height: 350,
        width: 500,
    },

    series : [
        {
            name: "data 1",
            data : [100, 2500, 500, 600],
            color: 'red'
        },

        {
            name: "data 2",
            data : [1000, 500, 500, 0],
            color: 'blue'
        }
    ],

}

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

chart.render()

Remove the horizontal lines from yaxis

let options = {
    chart: {
        type: 'area',
        height: 350,
        width: 500,
    },

    series : [
        {
            name: "data 1",
            data : [100, 2500, 500, 600],
            color: 'red'
        },

        {
            name: "data 2",
            data : [1000, 500, 500, 0],
            color: 'blue'
        }
    ],

    grid: {
        show: true,

        yaxis : {
            lines: {
                show: false
            }
        }

    }

}

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

chart.render()

result

Hide yaxis labels

let options = {
    chart: {
        type: 'area',
        height: 350,
        width: 500,
    },

    series : [
        {
            name: "data 1",
            data : [100, 2500, 500, 600],
            color: 'red'
        },

        {
            name: "data 2",
            data : [1000, 500, 500, 0],
            color: 'blue'
        }
    ],

    grid: {
        show: true,

        yaxis : {
            lines: {
                show: false
            }
        }

    },

    yaxis : {
        labels: {
            show : false
        }
    }

}

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

chart.render()

result

Remove legend from chart

let options = {
    chart: {
        type: 'area',
        height: 350,
        width: 500,
    },

    series : [
        {
            name: "data 1",
            data : [100, 2500, 500, 600],
            color: 'red'
        },

        {
            name: "data 2",
            data : [1000, 500, 500, 0],
            color: 'blue'
        }
    ],

    grid: {
        show: true,

        yaxis : {
            lines: {
                show: false
            }
        }

    },

    yaxis : {
        labels: {
            show : false
        }
    },


    legend: {
        show: false
    }

}

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

chart.render()

result

Hide data labels

let options = {
    chart: {
        type: 'area',
        height: 350,
        width: 500,
    },

    series : [
        {
            name: "data 1",
            data : [100, 2500, 500, 600],
            color: 'red'
        },

        {
            name: "data 2",
            data : [1000, 500, 500, 0],
            color: 'blue'
        }
    ],

    grid: {
        show: true,

        yaxis : {
            lines: {
                show: false
            }
        }

    },

    yaxis : {
        labels: {
            show : false
        }
    },


    legend: {
        show: false
    },

    dataLabels: {
        enabled: false
    }

}

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

chart.render()

change labels

let options = {
    chart: {
        type: 'area',
        height: 350,
        width: 500,
    },

    series : [
        {
            name: "data 1",
            data : [100, 2500, 500, 600],
            color: 'red'
        },

        {
            name: "data 2",
            data : [1000, 500, 500, 0],
            color: 'blue'
        }
    ],

    grid: {
        show: true,

        yaxis : {
            lines: {
                show: false
            }
        },


    },

    yaxis : {
        labels: {
            show : false
        }
    },


    legend: {
        show: false
    },

    dataLabels: {
        enabled: false
    },

    /// new labels
    labels: ['Apples', 'Oranges', 'Berries', 'Grapes']

}

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

chart.render()

Conclusion

ApexCharts is a powerful tool that can be used to create stunning charts and graphs. With its wide range of features and customization options, ApexCharts can be used to create charts for any purpose.

In this post, we have shown you how to get started with ApexCharts and how to use some advanced techniques to create more visually appealing and informative charts.

learn more: https://apexcharts.com/docs/installation/

Now we're done 🤗

Don't forget to like and follow 🙂

Support me on PayPal 🤗
https://www.paypal.com/paypalme/amr396