Bar Charts

														
<div id="bar_chart_1"></div>
													

														
<!-- Apex JS -->
<script src="vendors/apexcharts/dist/apexcharts.min.js"></script>
<script src="dist/js/bar-chart-init.js"></script>
/*Basic Chart*/
var options = {
    series: [{
        data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
    }],
    chart: {
        type: 'bar',
        height: 350
    },
    plotOptions: {
        bar: {
            horizontal: true,
        }
    },
    dataLabels: {
        enabled: false
    },
    xaxis: {
        categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
            'United States', 'China', 'Germany'
        ],
    }
};

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

														
<div id="bar_chart_2"></div>
													

														
/*Grouped Chart*/
var options1 = {
	series: [{
		data: [44, 55, 41, 64, 22, 43, 21]
	}, {
		data: [53, 32, 33, 52, 13, 44, 32]
	}],
	chart: {
		type: 'bar',
		height: 430
	},
	plotOptions: {
		bar: {
			horizontal: true,
			dataLabels: {
				position: 'top',
			},
		}
	},
	dataLabels: {
		enabled: true,
		offsetX: -6,
		style: {
			fontSize: '12px',
			colors: ['#fff']
		}
	},
	stroke: {
		show: true,
		width: 1,
		colors: ['#fff']
	},
	xaxis: {
		categories: [2001, 2002, 2003, 2004, 2005, 2006, 2007],
	},
};

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

														
<div id="line_chart_3"></div>
													

														
/*Stacked Chart*/
var options2 = {
	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]
	}, {
		name: 'Reborn Kid',
		data: [25, 12, 19, 32, 25, 24, 10]
	}],
	chart: {
		type: 'bar',
		height: 350,
		stacked: true,
	},
	plotOptions: {
		bar: {
			horizontal: true,
		},
	},
	stroke: {
		width: 1,
		colors: ['#fff']
	},
	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
	},
	legend: {
		position: 'top',
		horizontalAlign: 'left',
		offsetX: 40
	}
};

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

														
<div id="bar_chart_4"></div>
													

														
/*Bar with negative Value*/
var options3 = {
	series: [{
			name: 'Males',
			data: [0.4, 0.65, 0.76, 0.88, 1.5, 2.1, 2.9, 3.8, 3.9, 4.2, 4, 4.3, 4.1, 4.2, 4.5,
				3.9, 3.5, 3
			]
		},
		{
			name: 'Females',
			data: [-0.8, -1.05, -1.06, -1.18, -1.4, -2.2, -2.85, -3.7, -3.96, -4.22, -4.3, -4.4,
				-4.1, -4, -4.1, -3.4, -3.1, -2.8
			]
		}
	],
	chart: {
		type: 'bar',
		height: 440,
		stacked: true
	},
	colors: ['#008FFB', '#FF4560'],
	plotOptions: {
		bar: {
			horizontal: true,
			barHeight: '80%',

		},
	},
	dataLabels: {
		enabled: false
	},
	stroke: {
		width: 1,
		colors: ["#fff"]
	},
	yaxis: {
		min: -5,
		max: 5,
		title: {
			// text: 'Age',
		},
	},
	tooltip: {
		shared: false,
		x: {
			formatter: function(val) {
				return val
			}
		},
		y: {
			formatter: function(val) {
				return Math.abs(val) + "%"
			}
		}
	},
	xaxis: {
		categories: ['85+', '80-84', '75-79', '70-74', '65-69', '60-64', '55-59', '50-54',
			'45-49', '40-44', '35-39', '30-34', '25-29', '20-24', '15-19', '10-14', '5-9',
			'0-4'
		],
		title: {
			text: 'Percent'
		},
		labels: {
			formatter: function(val) {
				return Math.abs(Math.round(val)) + "%"
			}
		}
	},
};

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

														
<div id="bar_chart_5"></div>
													

														
/*Reversed Bar*/
var options4 = {
	series: [{
		data: [400, 430, 448, 470, 540, 580, 690]
	}],
	chart: {
		type: 'bar',
		height: 350
	},
	annotations: {
		xaxis: [{
			x: 500,
			borderColor: '#00E396',
			label: {
				borderColor: '#00E396',
				style: {
					color: '#fff',
					background: '#00E396',
				},
				text: 'X annotation',
			}
		}],
		yaxis: [{
			y: 'July',
			y2: 'September',
			label: {
				text: 'Y annotation'
			}
		}]
	},
	plotOptions: {
		bar: {
			horizontal: true,
		}
	},
	dataLabels: {
		enabled: true
	},
	xaxis: {
		categories: ['June', 'July', 'August', 'September', 'October', 'November', 'December'],
	},
	yaxis: {
		reversed: true,
		axisTicks: {
			show: true
		}
	}
};

var chart4 = new ApexCharts(document.querySelector("#bar_chart_5"), options4);
chart4.render();
													

														
<div id="bar_chart_6"></div>
													

														
/*Custom DataLabels*/
var options5 = {
	series: [{
		data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
	}],
	chart: {
		type: 'bar',
		height: 380
	},
	plotOptions: {
		bar: {
			barHeight: '100%',
			distributed: true,
			horizontal: true,
			dataLabels: {
				position: 'bottom'
			},
		}
	},
	colors: ['#ff0000', '#008FFB', '#e92990', '#c02ff3', '#7429f8', '#00b0ff', '#29e1b3', '#00d67f',
        '#ffc400', '#954d15'
    ],
	dataLabels: {
		enabled: true,
		textAnchor: 'start',
		style: {
			colors: ['#fff']
		},
		formatter: function(val, opt) {
			return opt.w.globals.labels[opt.dataPointIndex] + ":  " + val
		},
		offsetX: 0,
		dropShadow: {
			enabled: true
		}
	},
	stroke: {
		width: 1,
		colors: ['#fff']
	},
	xaxis: {
		categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
			'United States', 'China', 'India'
		],
	},
	yaxis: {
		labels: {
			show: false
		}
	},
};

var chart5 = new ApexCharts(document.querySelector("#bar_chart_6"), options5);
chart5.render();