Create an Amazin chart with ApexCharts.
Tags: javascript, ui, programming, coding
Published: 2023-09-21 14:22:06

## 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

```html
<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

```html
<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:

```javascript
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()

```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8nw0m8nmo8c2ylcqretk.PNG)


## Remove the horizontal lines from yaxis

```javascript
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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4xofhucjqzm43ixviwj.PNG)


## Hide yaxis labels

```javascript
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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3l3ow7xugawg49xgygz.PNG)


## Remove legend from chart

```javascript


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3ajd7e4w7u9c94wn76z.PNG)


## Hide data labels

```javascript

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()
```



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7ssqvwpe3zngbqmqp44.PNG)


## change labels

```javascript


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()
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3m4f2aidojylb2ehw4e.PNG)



## 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