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 options = {
    chart: { height: 350, type: 'line', toolbar: { show: false } },
    title: { text: 'Average High & Low Temperature', align: 'center' },
    colors: [app.color.blue, app.color.success],
    dataLabels: { enabled: true, background: { borderWidth: 0 } },
    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: ['rgba('+ app.color.componentColorRgb + ', .1)', 'transparent'], opacity: 0.5 } },
    markers: { size: 4 },
    xaxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
    },
    yaxis: { min: 5, max: 40 },
    legend: {
      show: true,
      position: 'top',
      offsetY: -10,
      horizontalAlign: 'right',
      floating: true,
    }
  };

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

  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 options = {
    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: ['rgba('+ app.color.componentColorRgb + ', .5)', app.color.indigo, 'rgba('+ app.color.componentColorRgb + ', .25)'],
    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'],
    },
    yaxis: { title: { text: '$ (thousands)' } },
    fill: { opacity: 1 },
    tooltip: {
      y: { 
      	formatter: function (val) { return "$ " + val + " thousands" } 
      }
    }
  };
  
  var chart = new ApexCharts(
    document.querySelector('#apex-column-chart'),
    options
  );

  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 options = {
    chart: { height: 350, type: 'area', },
    dataLabels: { enabled: false },
    stroke: { curve: 'smooth', width: 3 },
    colors: [app.color.pink, app.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'],
    },
    tooltip: { x: { format: 'dd/MM/yy HH:mm' } }
  };
  
  var chart = new ApexCharts(
    document.querySelector('#apex-area-chart'),
    options
  );

  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 options = {
    chart: { height: 350, type: 'bar', },
    plotOptions: { bar: { horizontal: true, dataLabels: { position: 'top' } } },
    dataLabels: { enabled: true, offsetX: -6 },
    colors: [app.color.orange, 'rgba('+ app.color.componentColorRgb + ', .5)'],
    stroke: { show: true, width: 1, colors: [app.color.componentBg] },
    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]
    }
  };
  
  var chart = new ApexCharts(
    document.querySelector('#apex-bar-chart'),
    options
  );

  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 options = {
    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: [app.color.blue, app.color.success, app.color.orange],
    title: { text: 'XYZ - Stock Analysis (2013 - 2021)', align: 'left', offsetX: 110 },
    xaxis: { categories: [2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021] },
    yaxis: [{
      axisTicks: { show: true, color: 'rgba('+ app.color.componentColorRgb + ', .15)' },
      axisBorder: { show: true, color: 'rgba('+ app.color.componentColorRgb + ', .15)' },
      title: { text: "Income (thousand crores)", style: { color: app.color.componentColor } },
      tooltip: { enabled: true }
    },{
      seriesName: 'Income',
      opposite: true,
      axisTicks: { show: true, color: 'rgba('+ app.color.componentColorRgb + ', .15)' },
      axisBorder: { show: true, color: 'rgba('+ app.color.componentColorRgb + ', .15)' },
      title: { text: "Operating Cashflow (thousand crores)", style: { color: app.color.componentColor } },
    }, {
      seriesName: 'Revenue',
      opposite: true,
      axisTicks: { show: true },
      axisBorder: { show: true, color: app.color.orange },
      title: { text: "Revenue (thousand crores)", style: { color: app.color.orange } }
    }],
    tooltip: { fixed: { enabled: true, position: 'topLeft', offsetY: 30, offsetX: 60 } },
    legend: { horizontalAlign: 'left', offsetX: 40 }
  };

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

  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 } },
      plotOptions: {
        candlestick: { 
          colors: { upward: app.color.success, downward: app.color.red } 
        }
      }
    }
  );

  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: [app.color.blue, app.color.orange, app.color.success, app.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' },
      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: [app.color.blue, app.color.orange, app.color.success],
      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)
          }
        }
      },
      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: [app.color.blue],
      stroke: { show: true, colors: [app.color.componentBg], width: 2, dashArray: 0 },
      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)' }
    }
  );

  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
      }
    },
    stroke: { show: true, colors: [app.color.componentBg], width: 2, dashArray: 0 },
    colors: [app.color.pink, app.color.orange, app.color.blue, app.color.success, app.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,
          strokeColor: 'rgba('+ app.color.componentColorRgb + ', .25)',
          fill: {
            colors: ['rgba('+ app.color.componentColorRgb + ', .05)', 'rgba('+ app.color.componentColorRgb + ', .15)']
          }
        }
      },
      title: { text: 'Radar with Polygon Fill' },
      colors: [app.color.blue],
      markers: { size: 4, colors: [app.color.componentBg], strokeColor: app.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
Dark Mode NEW
Adjust the appearance to reduce glare and give your eyes a break.
Header Fixed
Sidebar Fixed
Sidebar Grid
Gradient Enabled
Admin Design (5)
Language Version (7)
Frontend Design (5)
Documentation Reset Local Storage