Apex Chart header small text goes here...

Line Chart

JavaScript Line Charts are a typical pictorial representation that depicts trends and behaviors over time. It is represented by a series of data points connected with a line.

<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>

<div id="apex-line-chart"></div>

<script>
  var chart = new ApexCharts(
    document.querySelector('#apex-line-chart'), {
      chart: {
        height: 350,
        type: 'line',
        shadow: { enabled: true, color: COLOR_DARK, top: 18, left: 7, blur: 10, opacity: 1 },
        toolbar: { show: false }
      },
      title: { text: 'Average High & Low Temperature', align: 'center' },
      colors: [COLOR_BLUE, COLOR_TEAL],
      dataLabels: { enabled: true },
      stroke: { curve: 'smooth', width: 3 },
      series: [
        { name: 'High - 2021', data: [28, 29, 33, 36, 32, 32, 33] }, 
        { name: 'Low - 2021', data: [12, 11, 14, 18, 17, 13, 13] }
      ],
      grid: {
        row: { colors: [COLOR_SILVER_TRANSPARENT_1, 'transparent'],  opacity: 0.5 },
      },
      markers: { size: 4 },
      xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
        axisBorder: { show: true, color: COLOR_SILVER_TRANSPARENT_5, height: 1, width: '100%', offsetX: 0, offsetY: -1 },
        axisTicks: { show: true, borderType: 'solid', color: COLOR_SILVER, height: 6, offsetX: 0, offsetY: 0 }
      },
      yaxis: { min: 5, max: 40 },
      legend: { show: true, position: 'top', offsetY: -10, horizontalAlign: 'right', floating: true }
    }
  );
  
  chart.render();
</script>

Column Chart

A JavaScript Column Chart, just like other bar graphs uses vertical bars to display data and is used to compare values across categories.

<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>

<div id="apex-column-chart"></div>

<script>
  var chart = new ApexCharts(
    document.querySelector('#apex-column-chart'), {
      chart: { height: 350, type: 'bar' },
      title: { text: 'Profit & Margin Chart', align: 'center' },
      plotOptions: {
        bar: { horizontal: false, columnWidth: '55%', endingShape: 'rounded' }
      },
      dataLabels: { enabled: false },
      stroke: { show: true, width: 2, colors: ['transparent'] },
      colors: [COLOR_DARK, COLOR_INDIGO, COLOR_SILVER],
      series: [
        { name: 'Net Profit', data: [44, 55, 57, 56, 61, 58, 63, 60, 66] }, 
        { name: 'Revenue', data: [76, 85, 101, 98, 87, 105, 91, 114, 94] }, 
        { name: 'Free Cash Flow', data: [35, 41, 36, 26, 45, 48, 52, 53, 41] }
      ],
      xaxis: {
        categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
        axisBorder: { show: true, color: COLOR_SILVER_TRANSPARENT_5, height: 1, width: '100%', offsetX: 0, offsetY: -1 },
        axisTicks: { show: true, borderType: 'solid', color: COLOR_SILVER, height: 6, offsetX: 0, offsetY: 0 }
      },
      yaxis: {
        title: { text: '$ (thousands)' }
      },
      fill: { opacity: 1 },
      tooltip: {
        y: { formatter: function (val) { return "$ " + val + " thousands" } }
      }
    }
  );

  chart.render();
</script>

Area Chart

With their mountain-like appearance, JavaScript Area Charts are used to represent quantitative variations.

<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>

<div id="apex-area-chart"></div>

<script>
  var chart = new ApexCharts(
    document.querySelector('#apex-area-chart'), {
      chart: { height: 350, type: 'area' },
      dataLabels: { enabled: false },
      stroke: { curve: 'smooth', width: 3 },
      colors: [COLOR_PINK, COLOR_DARK],
      series: [
        { name: 'series1', data: [31, 40, 28, 51, 42, 109, 100] }, 
        { name: 'series2', data: [11, 32, 45, 32, 34, 52, 41] }
      ],
      xaxis: {
        type: 'datetime',
        categories: ['2019-09-19T00:00:00', '2019-09-19T01:30:00', '2019-09-19T02:30:00', '2019-09-19T03:30:00', '2019-09-19T04:30:00', '2019-09-19T05:30:00', '2019-09-19T06:30:00'],
        axisBorder: { show: true, color: COLOR_SILVER_TRANSPARENT_5, height: 1, width: '100%', offsetX: 0, offsetY: -1 },
        axisTicks: { show: true,  borderType: 'solid', color: COLOR_SILVER, height: 6, offsetX: 0, offsetY: 0 }             
      },
      tooltip: {
        x: { format: 'dd/MM/yy HH:mm' }
      }
    }
  );

  chart.render();
</script>

Bar Chart

Unlike the Column chart, a JavaScript Bar Chart is oriented in a horizontal manner using rectangular bars.

<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>

<div id="apex-bar-chart"></div>

<script>
  var chart = new ApexCharts(
    document.querySelector('#apex-bar-chart'), {
      chart: { height: 350, type: 'bar', },
      plotOptions: {
        bar: { horizontal: true,  dataLabels: { position: 'top' } }  
      },
      dataLabels: { enabled: true, offsetX: -6, style: { fontSize: '12px', colors: [COLOR_WHITE] } },
      colors: [COLOR_ORANGE, COLOR_DARK],
      stroke: { show: true, width: 1, colors: [COLOR_WHITE] },
      series: [
        { data: [44, 55, 41, 64, 22, 43, 21] },
        { data: [53, 32, 33, 52, 13, 44, 32] }
      ],
      xaxis: {
        categories: [2013, 2014, 2015, 2016, 2017, 2018, 2019],
        axisBorder: { show: true, color: COLOR_SILVER_TRANSPARENT_5, height: 1, width: '100%', offsetX: 0, offsetY: -1 },
        axisTicks: { show: true, borderType: 'solid', color: COLOR_SILVER, height: 6, offsetX: 0, offsetY: 0 }
      }
    }
  );

  chart.render();
</script>

Mixed Chart

A JavaScript Mixed Chart or a Combo Chart is a visualization that allows the combination of two or more distinct graphs.

<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>

<div id="apex-mixed-chart"></div>

<script>
  var chart = new ApexCharts(
    document.querySelector('#apex-mixed-chart'), {
      chart: { height: 350, type: 'line', stacked: false },
      dataLabels: { enabled: false },
      series: [
        { name: 'Income', type: 'column', data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6] }, 
        { name: 'Cashflow', type: 'column', data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5] }, 
        { name: 'Revenue', type: 'line', data: [20, 29, 37, 36, 44, 45, 50, 58] }
      ],
      stroke: { width: [0, 0, 3] },
      colors: [COLOR_BLUE_DARKER, COLOR_TEAL, COLOR_ORANGE],
      title: { text: 'XYZ - Stock Analysis (2013 - 2021)', align: 'left', offsetX: 110 },
      xaxis: {
        categories: [2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021],
        axisBorder: { show: true, color: COLOR_SILVER_TRANSPARENT_5, height: 1, width: '100%', offsetX: 0, offsetY: -1 },
        axisTicks: { show: true, borderType: 'solid', color: COLOR_SILVER, height: 6, offsetX: 0, offsetY: 0 }
      },
      yaxis: [
        { axisTicks: { show: true }, axisBorder: { show: true, color: COLOR_BLUE_DARKER }, labels: { style: { color: COLOR_BLUE_DARKER } }, title: { text: "Income (thousand crores)", style: { color: COLOR_BLUE_DARKER } }, tooltip: { enabled: true } },
        { seriesName: 'Income', opposite: true, axisTicks: { show: true }, axisBorder: { show: true, color: COLOR_TEAL }, labels: { style: { color: COLOR_TEAL } }, title: { text: "Operating Cashflow (thousand crores)", style: { color: COLOR_TEAL } } },
        { seriesName: 'Revenue', opposite: true, axisTicks: { show: true }, axisBorder: { show: true, color: COLOR_ORANGE }, labels: { style: { color: COLOR_ORANGE } }, title: { text: "Revenue (thousand crores)", style: { color: COLOR_ORANGE } } }
      ],
      tooltip: { fixed: { enabled: true, position: 'topLeft', offsetY: 30, offsetX: 60 } },
      legend: { horizontalAlign: 'left', offsetX: 40 }
    }
  );

  chart.render();
</script>

Candlestick Chart

A candlestick chart (also called Japanese candlestick chart) is a style of financial chart used to describe price movements of a security, derivative, or currency.

<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>

<div id="apex-candelstick-chart"></div>

<script>
  var chart = new ApexCharts(
    document.querySelector('#apex-candelstick-chart'), {
      chart: { height: 350, type: 'candlestick' },
      series: [{
        data: [
          { x: new Date(1538778600000), y: [6629.81, 6650.5, 6623.04, 6633.33] },
          { x: new Date(1538780400000), y: [6632.01, 6643.59, 6620, 6630.11] },
          { x: new Date(1538782200000), y: [6630.71, 6648.95, 6623.34, 6635.65] },
          { x: new Date(1538784000000), y: [6635.65, 6651, 6629.67, 6638.24] },
          { x: new Date(1538785800000), y: [6638.24, 6640, 6620, 6624.47] },
          { x: new Date(1538787600000), y: [6624.53, 6636.03, 6621.68, 6624.31] },
          { x: new Date(1538789400000), y: [6624.61, 6632.2, 6617, 6626.02] },
          { x: new Date(1538791200000), y: [6627, 6627.62, 6584.22, 6603.02] },
          { x: new Date(1538793000000), y: [6605, 6608.03, 6598.95, 6604.01] },
          { x: new Date(1538794800000), y: [6604.5, 6614.4, 6602.26, 6608.02] }
        ]
      }],
      title: { text: 'CandleStick Chart', align: 'left' },
      xaxis: {
        type: 'datetime',
        axisBorder: { show: true, color: COLOR_SILVER_TRANSPARENT_5, height: 1, width: '100%', offsetX: 0, offsetY: -1 },
        axisTicks: { show: true, borderType: 'solid', color: COLOR_SILVER, height: 6, offsetX: 0, offsetY: 0 }
      },
      yaxis: { tooltip: { enabled: true } }
    }
  );

  chart.render();
</script>

Bubble Chart

JavaScript Bubble Charts are useful for showing data in a three-dimensional manner. In a bubble chart, data points are depicted with bubbles.

<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>

<div id="apex-bubble-chart"></div>

<script>
  function generateData(baseval, count, yrange) {
    var i = 0;
    var series = [];
    while (i < count) {
      series.push([
      	Math.floor(Math.random() * (750 - 1 + 1)) + 1, 
      	Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min, 
      	Math.floor(Math.random() * (75 - 15 + 1)) + 15
      ]);
      baseval += 86400000;
      i++;
    }
    return series;
  }
  
  var chart = new ApexCharts(
    document.querySelector('#apex-bubble-chart'), {
      chart: { height: 350, type: 'bubble', },
      dataLabels: { enabled: false },
      colors: [COLOR_BLUE, COLOR_ORANGE, COLOR_TEAL, COLOR_PINK],
      series: [
        { name: 'Bubble1', data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, { min: 10, max: 60 }) },
        { name: 'Bubble2', data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, { min: 10, max: 60 }) },
        { name: 'Bubble3', data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, { min: 10, max: 60 }) },
        { name: 'Bubble4', data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, { min: 10, max: 60 }) }
      ],
      fill: { opacity: 0.8 },
      title: { text: 'Simple Bubble Chart' },
      xaxis: { tickAmount: 12, type: 'category', axisBorder: { show: true, color: COLOR_SILVER_TRANSPARENT_5, height: 1, width: '100%', offsetX: 0, offsetY: -1 }, axisTicks: { show: true, borderType: 'solid', color: COLOR_SILVER, height: 6, offsetX: 0, offsetY: 0 } },
      yaxis: { max: 70 }
    }
  );

  chart.render();
</script>

Scatter Chart

For non-linearly related variables, JavaScript Scatter Charts are quite useful when there is a need to graphically establish a relationship between the variables.

<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>

<div id="apex-scatter-chart"></div>

<script>
  var chart = new ApexCharts(
    document.querySelector('#apex-scatter-chart'), {
      chart: { 
        height: 350, 
        type: 'scatter', 
        zoom: { 
          enabled: true, 
          type: 'xy' 
        }
      },
      colors: [COLOR_BLUE, COLOR_ORANGE, COLOR_TEAL],
      series: [
        { name: "SAMPLE A", data: [ [16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3], [13.6, 0] ] }, 
        { name: "SAMPLE B", data: [ [36.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10] ] }, 
        { name: "SAMPLE C", data: [ [21.7, 3], [23.6, 3.5], [24.6, 3], [29.9, 3], [21.7, 20], [23, 2], [10.9, 3], [28, 4], [27.1, 0.3], [16.4, 4], [13.6, 0], [19, 5], [22.4, 3] ] }
      ],
      xaxis: {
        tickAmount: 10,
        labels: {
          formatter: function(val) { 
            return parseFloat(val).toFixed(1)
          }
        },
        axisBorder: { show: true, color: COLOR_SILVER_TRANSPARENT_5, height: 1, width: '100%', offsetX: 0, offsetY: -1 },
        axisTicks: { show: true, borderType: 'solid', color: COLOR_SILVER, height: 6, offsetX: 0, offsetY: 0 }
      },
      yaxis: { tickAmount: 7 }
    }
  );

  chart.render();
</script>

Heatmap Chart

A heat map is a two-dimensional representation of data in which values are represented by colors.

<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>

<div id="apex-heatmap-chart"></div>

<script>
  function generateData(count, yrange) {
    var i = 0;
    var series = [];
    while (i < count) {
      var x = 'w' + (i + 1).toString();
      var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
      series.push({ x: x, y: y });
      i++;
    }
    return series;
  }
  
  var chart = new ApexCharts(
    document.querySelector('#apex-heatmap-chart'), {
      chart: { height: 350, type: 'heatmap', },
      dataLabels: { enabled: false },
      colors: [COLOR_BLUE],
      series: [
        { name: 'Metric1', data: generateData(18, { min: 0, max: 90 }) },
        { name: 'Metric2', data: generateData(18, { min: 0, max: 90 }) },
        { name: 'Metric3', data: generateData(18, { min: 0, max: 90 }) },
        { name: 'Metric4', data: generateData(18, { min: 0, max: 90 }) },
        { name: 'Metric5', data: generateData(18, { min: 0, max: 90 }) },
        { name: 'Metric6', data: generateData(18, { min: 0, max: 90 }) },
        { name: 'Metric7', data: generateData(18, { min: 0, max: 90 }) },
        { name: 'Metric8', data: generateData(18, { min: 0, max: 90 }) },
        { name: 'Metric9', data: generateData(18, { min: 0, max: 90 }) }
      ],
      title: { text: 'HeatMap Chart (Single color)' },
      xaxis: {
        axisBorder: {  show: true,  color: COLOR_SILVER_TRANSPARENT_5,  height: 1,  width: '100%',  offsetX: 0,  offsetY: -1 },
        axisTicks: {  show: true,  borderType: 'solid',  color: COLOR_SILVER,  height: 6,  offsetX: 0,  offsetY: 0 }
      }
    }
  );

  chart.render();
</script>

Pie Chart

A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.

<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>

<div id="apex-pie-chart"></div>

<script>
  var options = {
    chart: {
      height: 365,
      type: 'pie',
    },
    dataLabels: {
      dropShadow: {
        enabled: false,
        top: 1,
        left: 1,
        blur: 1,
        opacity: 0.45
      }
    },
    colors: [COLOR_PINK, COLOR_ORANGE, COLOR_BLUE, COLOR_TEAL, COLOR_INDIGO],
    labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
    series: [44, 55, 13, 43, 22],
    title: {
      text: 'HeatMap Chart (Single color)'
    }
  };

  var chart = new ApexCharts(
    document.querySelector('#apex-pie-chart'),
    options
  );

  chart.render();
</script>

Radial Bar Chart

Radial Bar Charts are valuable in showing comparisons between categories by using circularly shaped bars.

<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>

<div id="apex-radial-bar-chart"></div>

<script>
  var options = {
    chart: { height: 350, type: 'radialBar' },
    plotOptions: {
      radialBar: {
        offsetY: -10,
        startAngle: 0,
        endAngle: 270,
        hollow: { margin: 5, size: '30%', background: 'transparent', image: undefined, },
        dataLabels: { name: { show: false, }, value: { show: false, } }
      }
    },
    colors: ['#1ab7ea', '#0084ff', '#39539E', '#0077B5'],
    series: [76, 67, 61, 90],
    labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'],
    legend: {
      show: true,
      floating: true,
      position: 'left',
      offsetX: 140,
      offsetY: 15,
      labels: { useSeriesColors: true },
      markers: { size: 0 },
      formatter: function(seriesName, opts) { 
        return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex]
      },
      itemMargin: { horizontal: 1 }
    }
  }

  var chart = new ApexCharts(
    document.querySelector('#apex-radial-bar-chart'),
    options
  );

  chart.render();
</script>

Radar Chart

Radar chart is a graphical method of displaying two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.

<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>

<div id="apex-radar-chart"></div>

<script>
  var chart = new ApexCharts(
    document.querySelector('#apex-radar-chart'), {
      chart: { height: 320, type: 'radar' },
      series: [{ name: 'Series 1', data: [20, 100, 40, 30, 50, 80, 33] }],
      labels: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
      plotOptions: {
        radar: {
          size: 140,
          polygons: {
            strokeColor: COLOR_SILVER_TRANSPARENT_3,
            fill: { colors: [COLOR_SILVER_TRANSPARENT_2, COLOR_WHITE] }
          }
        }
      },
      title: { text: 'Radar with Polygon Fill' },
      colors: [COLOR_BLUE],
      markers: { size: 4, colors: [COLOR_WHITE], strokeColor: COLOR_BLUE, strokeWidth: 2 },
      tooltip: { y: { formatter: function(val) { return val } } },
      yaxis: {
        tickAmount: 7,
        labels: {
          formatter: function(val, i) {
            return (i % 2 === 0) ? val : '';
          }
        }
      }
    }
  );

  chart.render();
</script>
App Settings
Header Fixed
Header Inverse
Sidebar Fixed
Gradient Enabled
Admin Design (5)
Language Version (7)
Frontend Design (5)
Documentation Reset Local Storage