Apexcharts

OverviewOfficial Website

Explore the sample JavaScript charts created to show some of the enticing features packed in ApexCharts.

Add Package
npm install ng-apexcharts
Remove Package
npm uninstall ng-apexcharts or you can remove package by removing specific package from package.json
Examples
Title Source
Line Charts
Javascript
basicLineChart: any;
this._basicLineChart('["--vz-primary"]');
Component (Component js)
  private _basicLineChart(colors:any) {
  colors = this.getChartColorsArray(colors);
  this.basicLineChart  = {
    series: [{
      name: "STOCK ABC",
      data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
    }],
    chart: {
    height: 380,
    type: 'line',
    zoom: {
    enabled: false
    },
    toolbar: {
    show: false
    }
    },
    colors: ["#3980c0", "#fa6374"],
    dataLabels: {
    enabled: false,
    },
    stroke: {
    width: [3, 3],
    curve: 'straight'
    },
    series: [{
    name: "High - 2018",
    data: [26, 24, 32, 36, 33, 31, 33]
    },
    {
    name: "Low - 2018",
    data: [14, 11, 16, 12, 17, 13, 12]
    }
    ],
    title: {
    text: 'Average High & Low Temperature',
    align: 'left',
    style: {
    fontWeight: 500,
    },
    },
    grid: {
    row: {
    colors: ['transparent', 'transparent'],
    opacity: 0.2
    },
    borderColor: '#f1f1f1'
    },
    markers: {
    size: 6
    },
    xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
    title: {
    text: 'Month'
    }
    },
    yaxis: {
    title: {
    text: 'Temperature'
    },
    min: 5,
    max: 40
    },
    legend: {
    position: 'top',
    horizontalAlign: 'right',
    floating: true,
    offsetY: -25,
    offsetX: -5
    }
  }
};
Html
<apx-chart [series]="lineWithDataLabelsChart.series" [chart]="lineWithDataLabelsChart.chart"
[xaxis]="lineWithDataLabelsChart.xaxis" [stroke]="lineWithDataLabelsChart.stroke"
[colors]="lineWithDataLabelsChart.colors" [dataLabels]="lineWithDataLabelsChart.dataLabels"
[legend]="lineWithDataLabelsChart.legend" [markers]="lineWithDataLabelsChart.markers"
[grid]="lineWithDataLabelsChart.grid" [yaxis]="lineWithDataLabelsChart.yaxis"
[title]="lineWithDataLabelsChart.title"></apx-chart>
Area Charts
Javascript
basicAreaChart: any;
this._basicAreaChart('["--vz-success"]');
Component (Component js)
private _basicAreaChart(colors:any) {
  colors = this.getChartColorsArray(colors);
  const basicAreaChart: ChartOptions = {
    series: [
    {
        name: "STOCK ABC",
        data: series.monthDataSeries1.prices
    }
    ],
    chart: {
    type: "area",
    height: 350,
    zoom: {
        enabled: false
    }
    },
    dataLabels: {
    enabled: false
    },
    stroke: {
    curve: "straight"
    },

    title: {
    text: "Fundamental Analysis of Stocks",
    align: "left"
    },
    subtitle: {
    text: "Price Movements",
    align: "left"
    },
    labels: series.monthDataSeries1.dates,
    xaxis: {
    type: "datetime"
    },
    yaxis: {
    opposite: true
    },
    legend: {
    horizontalAlign: "left"
    }
  }
};
HTML
<apx-chart [series]="basicAreaChart.series" [chart]="basicAreaChart.chart"
[xaxis]="basicAreaChart.xaxis" [stroke]="basicAreaChart.stroke"
[dataLabels]="basicAreaChart.dataLabels" [yaxis]="basicAreaChart.yaxis"
[labels]="basicAreaChart.labels" [legend]="basicAreaChart.legend" [title]="basicAreaChart.title"
[subtitle]="basicAreaChart.subtitle"></apx-chart>
Column Charts
Javascript
basicChart: any;
this._basicChart('["--vz-danger", "--vz-primary", "--vz-success"]');
Component (Component js)
  private _basicChart(colors:any) {
  colors = this.getChartColorsArray(colors);
  const basicColumnChart: ChartOptions = {
    chart: {
    height: 350,
    type: 'bar',
    toolbar: {
    show: false,
    }
    },
    plotOptions: {
    bar: {
    horizontal: false,
    columnWidth: '45%',
    },
    },
    dataLabels: {
    enabled: false
    },
    stroke: {
    show: true,
    width: 2,
    colors: ['transparent']
    },
    series: [{
    name: 'Net Profit',
    data: [46, 57, 59, 54, 62, 58, 64, 60, 66]
    }, {
    name: 'Revenue',
    data: [74, 83, 102, 97, 86, 106, 93, 114, 94]
    }, {
    name: 'Free Cash Flow',
    data: [37, 42, 38, 26, 47, 50, 54, 55, 43]
    }],
    colors: ["#fa6374", "#3980c0","#33a186"],
    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"
    }
    }
  }
  } 
};
HTML
<apx-chart [series]="basicColumnChart.series" [chart]="basicColumnChart.chart" [colors]="basicColumnChart.colors" [dataLabels]="basicColumnChart.dataLabels"
[plotOptions]="basicColumnChart.plotOptions" [yaxis]="basicColumnChart.yaxis" [legend]="basicColumnChart.legend"
[fill]="basicColumnChart.fill" [stroke]="basicColumnChart.stroke" [tooltip]="basicColumnChart.tooltip"
[xaxis]="basicColumnChart.xaxis"></apx-chart>
Bar Charts
Javascript
basicBarChart: any;
this._basicBarChart('["--vz-success"]');
Component (Component js)
   private _basicBarChart(colors:any) {
  colors = this.getChartColorsArray(colors);
  const basicBarChart: ChartOptions = {
    chart: {
    height: 350,
    type: 'bar',
    toolbar: {
        show: false,
    }
    },
    plotOptions: {
    bar: {
        horizontal: true,
    }
    },
    dataLabels: {
    enabled: false
    },
    series: [{
    data: [380, 430, 450, 475, 550, 584, 780, 1100, 1220, 1365]
    }],
    colors: ['#33a186'],
    grid: {
    borderColor: '#f1f1f1',
    },
    xaxis: {
    categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'Germany'],
    }
  }
};
HTML
<apx-chart [series]="basicBarChart.series" [colors]="basicBarChart.colors" [chart]="basicBarChart.chart"
[dataLabels]="basicBarChart.dataLabels" [plotOptions]="basicBarChart.plotOptions"
[xaxis]="basicBarChart.xaxis"></apx-chart>
Mixed Charts
Javascript
lineChart: any;
this._lineChart('["--vz-primary", "--vz-success"]');
Component (Component js)
   private _lineChart(colors:any) {
  colors = this.getChartColorsArray(colors);
  this.lineChart = {
    series: [{
      name: 'Website Blog',
      type: 'column',
      data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
    }, {
        name: 'Social Media',
        type: 'line',
        data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
    }],
    chart: {
      height: 350,
      type: 'line',
      toolbar: {
          show: false,
      }
    },
    stroke: {
        width: [0, 4]
    },
    title: {
        text: 'Traffic Sources',
        style: {
            fontWeight: 600,
        },
    },
    dataLabels: {
        enabled: true,
        enabledOnSeries: [1]
    },
    labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001'],
    xaxis: {
        type: 'datetime'
    },
    yaxis: [{
        title: {
            text: 'Website Blog',
            style: {
                fontWeight: 600,
            },
        },

    }, {
        opposite: true,
        title: {
            text: 'Social Media',
            style: {
                fontWeight: 600,
            },
        }
    }],
    colors: colors
  };
}
HTML
<apx-chart [series]="lineChart.series" [chart]="lineChart.chart" [yaxis]="lineChart.yaxis"
[xaxis]="lineChart.xaxis" [labels]="lineChart.labels" [stroke]="lineChart.stroke" [title]="lineChart.title" 
[dataLabels]="lineChart.dataLabels" [fill]="lineChart.fill" [tooltip]="lineChart.tooltip" [colors]="lineChart.colors"></apx-chart>
Timeline Charts
Javascript
basicTimelineChart: any;
this._basicTimelineChart('["--vz-primary"]');
Component (Component js)
   private _basicTimelineChart(colors:any) {
  colors = this.getChartColorsArray(colors);
  this.basicTimelineChart = {
    series: [
      {
        data: [
          {
            x: "Code",
            y: [
              new Date("2019-03-02").getTime(),
              new Date("2019-03-04").getTime(),
            ],
          },
          {
            x: "Test",
            y: [
              new Date("2019-03-04").getTime(),
              new Date("2019-03-08").getTime(),
            ],
          },
          {
            x: "Validation",
            y: [
              new Date("2019-03-08").getTime(),
              new Date("2019-03-12").getTime(),
            ],
          },
          {
            x: "Deployment",
            y: [
              new Date("2019-03-12").getTime(),
              new Date("2019-03-18").getTime(),
            ],
          },
        ],
      },
    ],
    chart: {
      height: 350,
      type: "rangeBar",
      toolbar: {
        show: false,
      },
    },
    plotOptions: {
      bar: {
        horizontal: true,
      },
    },
    xaxis: {
      type: "datetime",
    },
    colors: colors,
  };
}
HTML
<apx-chart [series]="basicTimelineChart.series" [chart]="basicTimelineChart.chart"
[plotOptions]="basicTimelineChart.plotOptions" [xaxis]="basicTimelineChart.xaxis"
[colors]="basicTimelineChart.colors"></apx-chart>
Bubble Charts
Javascript
bubbleChart: any;
this._BubbleChart('["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger"]');
Component (Component js)
 private _BubbleChart(colors:any) {
  colors = this.getChartColorsArray(colors);  
  this.BubbleChart = {
    series: [
      {
        name: "Product1",
        data: this.generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
          min: 10,
          max: 60,
        }),
      },
      {
        name: "Product2",
        data: this.generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
          min: 10,
          max: 60,
        }),
      },
      {
        name: "Product3",
        data: this.generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
          min: 10,
          max: 60,
        }),
      },
      {
        name: "Product4",
        data: this.generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
          min: 10,
          max: 60,
        }),
      },
    ],
      chart: {
        height: 350,
        type: "bubble",
        toolbar: {
          show: false,
        },
      },
      dataLabels: {
        enabled: false,
      },
      fill: {
        type: "gradient",
      },
      title: {
        text: "3D Bubble Chart",
        style: {
          fontWeight: 500,
        },
      },
      xaxis: {
        tickAmount: 12,
        type: "datetime",
        labels: {
          rotate: 0,
        },
      },
      yaxis: {
        max: 70,
      },
      theme: {
        palette: "palette2",
      },
      colors: colors,
  };
 }
HTML
<apx-chart [series]="simpleBubbleChart.series" [chart]="simpleBubbleChart.chart"
[xaxis]="simpleBubbleChart.xaxis" [fill]="simpleBubbleChart.fill"
[dataLabels]="simpleBubbleChart.dataLabels" [title]="simpleBubbleChart.title"
[yaxis]="simpleBubbleChart.yaxis" [colors]="simpleBubbleChart.colors"></apx-chart>
Pie Charts
Javascript
 simplePieChart: any;
this._simplePieChart('["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger", "--vz-info"]');
Component (Component js)
 private _simplePieChart(colors:any) {
  colors = this.getChartColorsArray(colors);
  this.simplePieChart = {
    series: [44, 55, 13, 43, 22],
    chart: {
      height: 300,
      type: "pie",
    },
    labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
    legend: {
      position: "bottom",
    },
    dataLabels: {
      dropShadow: {
        enabled: false,
      },
    },
    colors: colors,
  };
}
HTML
<apx-chart [series]="simplePieChart.series" [chart]="simplePieChart.chart"
[labels]="simplePieChart.labels" [legend]="simplePieChart.legend"
[dataLabels]="simplePieChart.dataLabels" [responsive]="simplePieChart.responsive"
[colors]="simplePieChart.colors"></apx-chart>
Radialbar Charts
Javascript
basicRadialbarChart: any;
this._basicRadialbarChart('["--vz-success"]');
Component (Component js)
 private _basicRadialbarChart(colors:any) {
  colors = this.getChartColorsArray(colors);
  this.basicRadialbarChart = {
    series: [70],
    chart: {
        height: 350,
        type: "radialBar",
    },
    plotOptions: {
        radialBar: {
            hollow: {
                size: "70%",
            },
        },
    },
    labels: ["Cricket"],
    colors: colors,
  };
}
HTML
<apx-chart [series]="basicRadialbarChart.series" [chart]="basicRadialbarChart.chart"
[plotOptions]="basicRadialbarChart.plotOptions" [labels]="basicRadialbarChart.labels"
[colors]="basicRadialbarChart.colors"></apx-chart>
Radar Charts
Javascript
basicRadarChart: any;
this._basicRadarChart('["--vz-success"]');
Component (Component js)
  private _basicRadarChart(colors:any) {
  colors = this.getChartColorsArray(colors);
  this.basicRadarChart = {
    series: [
      {
        name: "Series 1",
        data: [80, 50, 30, 40, 100, 20],
      },
    ],
    chart: {
      height: 350,
      type: "radar",
      toolbar: {
        show: false,
      },
    },
    stroke: {
      colors: colors,
    },
    xaxis: {
      categories: ["January", "February", "March", "April", "May", "June"],
    },
    colors: colors
  };
}
HTML
<apx-chart [series]="basicRadarChart.series" [chart]="basicRadarChart.chart"
[xaxis]="basicRadarChart.xaxis" [stroke]="basicRadarChart.stroke"></apx-chart>
Polararea Charts
Javascript
basicPolarChart: any;
  this._basicPolarChart('["--vz-primary", "--vz-success", "--vz-warning","--vz-danger", "--vz-info", "--vz-success", "--vz-primary", "--vz-dark", "--vz-secondary"]');
Component (Component js)
 private _basicPolarChart(colors:any) {
  colors = this.getChartColorsArray(colors);
  this.basicPolarChart = {
    series: [14, 23, 21, 17, 15, 10, 12, 17, 21],
    chart: {
      type: "polarArea",
      width: 400,
    },
    labels: [
      "Series A",
      "Series B",
      "Series C",
      "Series D",
      "Series E",
      "Series F",
      "Series G",
      "Series H",
      "Series I",
    ],
    stroke: {
      colors: ["#fff"],
    },
    fill: {
      opacity: 0.8,
    },
    legend: {
      position: "bottom",
    },
    colors: colors,
  };
}
HTML
<apx-chart [series]="basicPolarChart.series" [chart]="basicPolarChart.chart"
[labels]="basicPolarChart.labels" [stroke]="basicPolarChart.stroke"
[fill]="basicPolarChart.fill" [legend]="basicPolarChart.legend"
[colors]="basicPolarChart.colors"></apx-chart>
© Steex.
Design & Develop by Themesbrand