lavkach3
1document.addEventListener("DOMContentLoaded", function () {2// Basic Bar Chart -------> BAR CHART3var options_basic = {4series: [5{6data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380],7},8],9chart: {10fontFamily: "inherit",11type: "bar",12height: 350,13toolbar: {14show: false,15},16},17grid: {18borderColor: "transparent",19},20colors: ["var(--bs-primary)"],21plotOptions: {22bar: {23horizontal: true,24},25},26dataLabels: {27enabled: false,28},29xaxis: {30categories: [31"South Korea",32"Canada",33"United Kingdom",34"Netherlands",35"Italy",36"France",37"Japan",38"United States",39"China",40"Germany",41],42labels: {43style: {44colors: "#a1aab2",45},46},47},48yaxis: {49labels: {50style: {51colors: "#a1aab2",52},53},54},55tooltip: {56theme: "dark",57},58};59
60var chart_bar_basic = new ApexCharts(61document.querySelector("#chart-bar-basic"),62options_basic
63);64chart_bar_basic.render();65
66// Stacked Bar Chart -------> BAR CHART67var options_stacked = {68series: [69{70name: "Marine Sprite",71data: [44, 55, 41, 37, 22, 43, 21],72},73{74name: "Striking Calf",75data: [53, 32, 33, 52, 13, 43, 32],76},77{78name: "Tank Picture",79data: [12, 17, 11, 9, 15, 11, 20],80},81{82name: "Bucket Slope",83data: [9, 7, 5, 8, 6, 9, 4],84},85{86name: "Reborn Kid",87data: [25, 12, 19, 32, 25, 24, 10],88},89],90chart: {91fontFamily: "inherit",92type: "bar",93height: 350,94stacked: true,95toolbar: {96show: false,97},98},99grid: {100borderColor: "transparent",101},102colors: [103"var(--bs-primary)",104"var(--bs-secondary)",105"#ffae1f",106"#fa896b",107"#39b69a",108],109plotOptions: {110bar: {111horizontal: true,112},113},114stroke: {115width: 1,116colors: ["#fff"],117},118xaxis: {119categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],120labels: {121formatter: function (val) {122return val + "K";123},124style: {125colors: "#a1aab2",126},127},128},129yaxis: {130title: {131text: undefined,132},133labels: {134style: {135colors: "#a1aab2",136},137},138},139tooltip: {140y: {141formatter: function (val) {142return val + "K";143},144},145theme: "dark",146},147fill: {148opacity: 1,149},150legend: {151position: "top",152horizontalAlign: "left",153offsetX: 40,154labels: {155colors: ["#a1aab2"],156},157},158};159
160var chart_bar_stacked = new ApexCharts(161document.querySelector("#chart-bar-stacked"),162options_stacked
163);164chart_bar_stacked.render();165
166// Reversed Bar Chart -------> BAR CHART167var options_reversed = {168series: [169{170data: [400, 430, 448, 470, 540, 580, 690],171},172],173chart: {174fontFamily: "inherit",175type: "bar",176height: 350,177toolbar: {178show: false,179},180},181grid: {182borderColor: "transparent",183},184colors: ["var(--bs-primary)"],185annotations: {186xaxis: [187{188x: 500,189borderColor: "var(--bs-primary)",190label: {191borderColor: "var(--bs-primary)",192style: {193color: "#fff",194background: "var(--bs-primary)",195},196text: "X annotation",197},198},199],200yaxis: [201{202y: "July",203y2: "September",204label: {205text: "Y annotation",206},207},208],209},210plotOptions: {211bar: {212horizontal: true,213},214},215dataLabels: {216enabled: true,217},218xaxis: {219categories: [220"June",221"July",222"August",223"September",224"October",225"November",226"December",227],228labels: {229style: {230colors: "#a1aab2",231},232},233},234grid: {235xaxis: {236lines: {237show: true,238},239},240borderColor: "transparent",241},242yaxis: {243reversed: true,244axisTicks: {245show: true,246},247labels: {248style: {249colors: "#a1aab2",250},251},252},253tooltip: {254theme: "dark",255},256};257
258var chart_bar_reversed = new ApexCharts(259document.querySelector("#chart-bar-reversed"),260options_reversed
261);262chart_bar_reversed.render();263
264// Patterned Bar Chart -------> BAR CHART265var options_patterned = {266series: [267{268name: "Marine Sprite",269data: [44, 55, 41, 37, 22, 43, 21],270},271{272name: "Striking Calf",273data: [53, 32, 33, 52, 13, 43, 32],274},275{276name: "Tank Picture",277data: [12, 17, 11, 9, 15, 11, 20],278},279{280name: "Bucket Slope",281data: [9, 7, 5, 8, 6, 9, 4],282},283],284chart: {285fontFamily: "inherit",286type: "bar",287height: 350,288colors: "#a1aab2",289stacked: true,290dropShadow: {291enabled: true,292blur: 1,293opacity: 0.25,294},295toolbar: {296show: false,297},298},299grid: {300borderColor: "transparent",301},302colors: ["var(--bs-primary)", "var(--bs-secondary)", "#ffae1f", "#fa896b"],303plotOptions: {304bar: {305horizontal: true,306barHeight: "60%",307},308},309dataLabels: {310enabled: false,311},312stroke: {313width: 2,314},315xaxis: {316categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],317labels: {318style: {319colors: "#a1aab2",320},321},322},323yaxis: {324title: {325text: undefined,326},327labels: {328style: {329colors: "#a1aab2",330},331},332},333tooltip: {334shared: false,335y: {336formatter: function (val) {337return val + "K";338},339},340theme: "dark",341},342fill: {343type: "pattern",344opacity: 1,345pattern: {346style: ["circles", "slantedLines", "verticalLines", "horizontalLines"], // string or array of strings347},348},349states: {350hover: {351filter: "none",352},353},354legend: {355position: "right",356offsetY: 40,357labels: {358colors: "#a1aab2",359},360},361};362
363var chart_bar_patterned = new ApexCharts(364document.querySelector("#chart-bar-patterned"),365options_patterned
366);367chart_bar_patterned.render();368});369