$(function() {
	"use strict";



// chart 1
var options = {
    series: [{
        name: "Users",
        data: [450, 650, 440, 160, 350, 414, 555, 257, 400, 555, 257]
    }],
    chart: {
        foreColor: '#9a9797',
        type: "bar",
        //width: 130,
        height: 270,
        toolbar: {
            show: !1
        },
        zoom: {
            enabled: !1
        },
        dropShadow: {
            enabled: 0,
            top: 3,
            left: 14,
            blur: 4,
            opacity: .12,
            color: "#3461ff"
        },
        sparkline: {
            enabled: !1
        }
    },
    markers: {
        size: 0,
        colors: ["#3461ff", "#12bf24"],
        strokeColors: "#fff",
        strokeWidth: 2,
        hover: {
            size: 7
        }
    },
    plotOptions: {
        bar: {
            horizontal: !1,
            columnWidth: "40%",
            endingShape: "rounded"
        }
    },
	legend: {
        show: false,
        position: 'top',
        horizontalAlign: 'left',
        offsetX: -20
    },
    dataLabels: {
        enabled: !1
    },
    grid: {
        show: false,
        // borderColor: '#eee',
        // strokeDashArray: 4,
    },
    stroke: {
        show: !0,
       // width: 3,
        curve: "smooth"
    },
    colors: ["#12bf24"],
    xaxis: {
        categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    },
    tooltip: {
        theme: 'dark',
        y: {
            formatter: function (val) {
                return "" + val + ""
            }
        }
    }
  };

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


// chart 2
var options = {
    series: [{
        name: "Users",
        data: [450, 650, 440, 160]
    }],
    chart: {
        foreColor: '#9a9797',
        type: "bar",
        //width: 130,
        height: 270,
        toolbar: {
            show: !1
        },
        zoom: {
            enabled: !1
        },
        dropShadow: {
            enabled: 0,
            top: 3,
            left: 14,
            blur: 4,
            opacity: .12,
            color: "#12bf24"
        },
        sparkline: {
            enabled: !1
        }
    },
    markers: {
        size: 0,
        colors: ["#12bf24"],
        strokeColors: "#fff",
        strokeWidth: 2,
        hover: {
            size: 7
        }
    },
    plotOptions: {
        bar: {
            horizontal: 1,
            columnWidth: "20%",
            columnHeight: "20%",
            endingShape: "rounded"
        }
    },
	legend: {
        show: false,
        position: 'top',
        horizontalAlign: 'left',
        offsetX: -20
    },
    dataLabels: {
        enabled: !1
    },
    grid: {
        show: false,
        // borderColor: '#eee',
        // strokeDashArray: 4,
    },
    stroke: {
        show: !0,
       // width: 3,
        curve: "smooth"
    },
    //colors: ["#12bf24"],
    xaxis: {
        categories: ["Visitors", "Subscribers", "Contributor", "Author"]
    },
    tooltip: {
        theme: 'dark',
        y: {
            formatter: function (val) {
                return "" + val + ""
            }
        }
    }
  };

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






// chart 3
  
var options = {
    series: [89, 45, 35, 62],
    chart: {
    width: 340,
    type: 'donut',
  },
  labels: ["Visitors", "Subscribers", "Contributor", "Author"],
  colors: ["#3361ff", "#e72e2e", "#12bf24", "#ff6632"],
  legend: {
    show: false,
    position: 'top',
    horizontalAlign: 'left',
    offsetX: -20
  },
  responsive: [{
    breakpoint: 480,
    options: {
      chart: {
        height: 260
      },
      legend: {
        position: 'bottom'
      }
    }
  }]
  };

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



	
	// chart 4
	
	var options = {
        series: [68],
        chart: {
            foreColor: '#9ba7b2',
        height: 280,
        type: 'radialBar',
      },
    plotOptions: {
        radialBar: {
            //startAngle: -130,
            //endAngle: 130,
            hollow: {
                margin: 0,
                size: '82%',
                //background: '#fff',
                image: undefined,
                imageOffsetX: 0,
                imageOffsetY: 0,
                position: 'front',
                dropShadow: {
                    enabled: false,
                    top: 3,
                    left: 0,
                    blur: 4,
                    color: 'rgba(0, 169, 255, 0.15)',
                    opacity: 0.65
                }
            },
            track: {
                background: '#dfecff',
                //strokeWidth: '67%',
                margin: 0, // margin is in pixels
                dropShadow: {
                    enabled: false,
                    top: -3,
                    left: 0,
                    blur: 4,
                    color: 'rgba(0, 169, 255, 0.85)',
                    opacity: 0.65
                }
            },
            dataLabels: {
                showOn: 'always',
                name: {
                    offsetY: -25,
                    show: true,
                    color: '#6c757d',
                    fontSize: '16px'
                },
                value: {
                    formatter: function (val) {
                        return val + "%";
                    },
                    color: '#000',
                    fontSize: '45px',
                    show: true,
                    offsetY: 10,
                }
            }
        }
    },
    fill: {
        type: 'gradient',
        gradient: {
            shade: 'dark',
            type: 'horizontal',
            shadeIntensity: 0.5,
            gradientToColors: ['#3361ff'],
            inverseColors: false,
            opacityFrom: 1,
            opacityTo: 1,
            stops: [0, 100]
        }
    },
    colors: ["#3361ff"],
      labels: ['mc'],
      };

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

// chart 5

var optionsLine = {
    chart: {
        foreColor: '#9ba7b2',
        height: 275,
        type: 'line',
        toolbar: {
            show: !1
        },
        zoom: {
            enabled: false
        },
        dropShadow: {
            enabled: true,
            top: 3,
            left: 2,
            blur: 4,
            opacity: 0.1,
        }
    },
    stroke: {
        curve: 'smooth',
        width: 4
    },
    colors: ["#32bfff", '#ff6632'],
    series: [{
        name: "Posts",
        data: [1, 15, 56, 20, 33, 27, 15]
    }, {
        name: "Comments",
        data: [30, 33, 21, 42, 30, 33, 21]
    }],
    markers: {
        size: 0,
        strokeWidth: 0,
        hover: {
            size: 7
        }
    },
    grid: {
        show: true,
        borderColor: '#ededed',
        strokeDashArray: 4,
    },
    xaxis: {
        //type: 'datetime',
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
    },
    legend: {
        position: 'top',
        horizontalAlign: 'right',
        offsetY: -20
    }
}
var chartLine = new ApexCharts(document.querySelector('#chart5'), optionsLine);
chartLine.render();





});