Bar chart

									
var options = {
      series: [{
      data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
    }],
      chart: {
      type: 'bar',
      height: 350,
      toolbar:{
        tools: {
          download: '<svg
										xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M336 256C336 229.5 357.5 208 384 208C410.5 208 432 229.5 432 256C432 282.5 410.5 304 384 304C357.5 304 336 282.5 336 256zM176 256C176 229.5 197.5 208 224 208C250.5 208 272 229.5 272 256C272 282.5 250.5 304 224 304C197.5 304 176 282.5 176 256zM112 256C112 282.5 90.51 304 64 304C37.49 304 16 282.5 16 256C16 229.5 37.49 208 64 208C90.51 208 112 229.5 112 256z"/></svg>'
        },
      },
    },
    plotOptions: {
      bar: {
        borderRadius: 4,
        horizontal: true,
      }
    },
    dataLabels: {
      enabled: false
    },
    xaxis: {
      categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
        'United States', 'China', 'Germany'
      ],
    },
    title: {
      text: 'Example title'
    },
    colors: ['#7B61FF']
    };

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

var options2 = {
  series: [{
  data: [44, 55, 41, 64, 22, 43, 21]
}, {
  data: [53, 32, 33, 52, 13, 44, 32]
}],
  chart: {
  type: 'bar',
  height: 430,
  toolbar:{
    tools: {
      download: '<svg
										xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M336 256C336 229.5 357.5 208 384 208C410.5 208 432 229.5 432 256C432 282.5 410.5 304 384 304C357.5 304 336 282.5 336 256zM176 256C176 229.5 197.5 208 224 208C250.5 208 272 229.5 272 256C272 282.5 250.5 304 224 304C197.5 304 176 282.5 176 256zM112 256C112 282.5 90.51 304 64 304C37.49 304 16 282.5 16 256C16 229.5 37.49 208 64 208C90.51 208 112 229.5 112 256z"/></svg>'
    },
  },
},
plotOptions: {
  bar: {
    horizontal: true,
    dataLabels: {
      position: 'top',
    },
  }
},
dataLabels: {
  enabled: true,
  offsetX: -6,
  style: {
    fontSize: '12px',
    colors: ['#fff']
  }
},
stroke: {
  show: true,
  width: 1,
  colors: ['#fff']
},
title: {
  text: 'Example title'
},
tooltip: {
  shared: true,
  intersect: false
},
xaxis: {
  categories: [2001, 2002, 2003, 2004, 2005, 2006, 2007],
},
colors: ['#7B61FF', '#F65F18']
};

var chart = new ApexCharts(document.querySelector("#grouped-chart"), options2);
chart.render();


var options3 = {
  series: [{
  name: 'Marine Sprite',
  data: [44, 55, 41, 37, 22, 43, 21]
}, {
  name: 'Striking Calf',
  data: [53, 32, 33, 52, 13, 43, 32]
}, {
  name: 'Tank Picture',
  data: [12, 17, 11, 9, 15, 11, 20]
}, {
  name: 'Bucket Slope',
  data: [9, 7, 5, 8, 6, 9, 4]
}],
  chart: {
  type: 'bar',
  height: 350,
  stacked: true,
  toolbar:{
    tools: {
      download: '<svg
										xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M336 256C336 229.5 357.5 208 384 208C410.5 208 432 229.5 432 256C432 282.5 410.5 304 384 304C357.5 304 336 282.5 336 256zM176 256C176 229.5 197.5 208 224 208C250.5 208 272 229.5 272 256C272 282.5 250.5 304 224 304C197.5 304 176 282.5 176 256zM112 256C112 282.5 90.51 304 64 304C37.49 304 16 282.5 16 256C16 229.5 37.49 208 64 208C90.51 208 112 229.5 112 256z"/></svg>'
    },
  },
},
plotOptions: {
  bar: {
    horizontal: true,
  },
},
stroke: {
  width: 1,
  colors: ['#fff']
},
title: {
  text: 'Fiction Books Sales'
},
xaxis: {
  categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
  labels: {
    formatter: function (val) {
      return val + "K"
    }
  }
},
yaxis: {
  title: {
    text: undefined
  },
},
tooltip: {
  y: {
    formatter: function (val) {
      return val + "K"
    }
  }
},
fill: {
  opacity: 1
},
colors: ['#7B61FF', '#F65F18', '#19A070', '#FFA41B']
};

var chart = new ApexCharts(document.querySelector("#stacked-chart"), options3);
chart.render();