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
Top comments (0)