Preview Download

Apex Charts

ApexCharts is a modern JavaScript charting library that empowers developers to build interactive data visualizations for commercial and non-commercial projects. Packed with simple API, 100+ ready-to-use samples, interactive features, styling, and customization options, and over a dozen chart types, all of which allow for beautiful, responsive, and high-performance visualizations in your apps and dashboards.

apexcharts.com

github.com/apexcharts/apexcharts.js

Documentation

Licence

v3.35.1

We used some 3rd party plugins while developing the Qoduby template. We have customized these plugins according to our template. You can view examples of this plugin below.

You can find the original documentation of this plugin in the info card above.

Bar Chart

										
var options = {
  series: [{
    data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
  }],
  chart: {
    type: 'bar',
    height: 350
  },
  plotOptions: {
    bar: {
      borderRadius: 4,
      horizontal: true,
    }
  },
  dataLabels: {
    enabled: false
  },
  xaxis: {
    categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan','United States', 'China', 'Germany'],
  }
};

var chart1 = new ApexCharts(document.querySelector("#chart1"), options);
chart1.render();

										
<div id="chart1" class="height-300"></div>

Line Chart

										
var options2 = {
  series: [{
    name: "Desktops",
    data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
  }],
  chart: {
    height: 350,
    type: 'line',
    zoom: {
      enabled: false
    }
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    curve: 'straight'
  },
  title: {
    text: 'Product Trends by Month',
    align: 'left'
  },
  grid: {
    row: {
      colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
      opacity: 0.5
    },
  },
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
  }
};

var chart2 = new ApexCharts(document.querySelector("#chart2"), options2);
chart2.render();

										
<div id="chart2" class="height-300"></div>

Pie Chart

										
var options3 = {
  series: [44, 55, 13, 43, 22],
  chart: {
    width: 380,
    type: 'pie',
  },
  labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
  responsive: [{
    breakpoint: 480,
    options: {
      chart: {
        width: 200
      },
      legend: {
        position: 'bottom'
      }
    }
  }]
};

var chart3 = new ApexCharts(document.querySelector("#chart3"), options3);
chart3.render();

										
<div id="chart3" class="height-300"></div>