Dashboard

var options__candidate = {
        series: [
          {
            name: "candidate",
            data: [100, 200, 300, 400, 300, 500, 400],
          },
        ],
        chart: {
          height: 400,
          width: "100%",
          type: "area",
          id: 'weekly',
          toolbar: {
            show: false,
          },
          animations: {
            enabled: true,
            easing: 'easeinout',
            speed: 800,
            animateGradually: {
                enabled: true,
                delay: 150
            },
            dynamicAnimation: {
                enabled: true,
                speed: 350
            }
          },
colors: [],

          fontFamily: '"Plus Jakarta Sans", sans-serif',

        },
        grid: {
          show: true,
          borderColor: "#7D8087",
          strokeDashArray: 3,
          position: "back",
          yaxis: {
            lines: {
              show: true,
            },
          },
        },
        dataLabels: {
          enabled: false,
        },
        stroke: {
          curve: "smooth",
        },
        xaxis: {
          type: "day",
          categories: [
            "Sat",
            "Sun",
            "Mon",
            "Tue",
            "Wed",
            "Thu",
            "Fri",
          ],
          labels:{
            show: true,
            offsetY: 2,
            style:{
              fontSize: '14px',
              fontWeight: 500,
              cssClass: 'apexcharts-xaxis-label',
            },
          },
        },
        yaxis: {
          labels:{
            show: true,
            style:{
              fontSize: '14px',
              fontWeight: 500,
              cssClass: 'apexcharts-xaxis-label',
            },
          }
        },
        tooltip: {
          enabled: true,
          x: {
            format: "dd/MM/yy",
          },
        },
        fill: {
          type: "gradient",
          gradient: {
            opacityFrom: 1,
            opacityTo: 0,
            stops: [0, 46, 100],
            type: "vertical",
            colorStops:[
              {
                offset: 0,
                color: "#FEF2EB",
                opacity: 1
              },
              {
                offset: 50,
                color: "#F1F1F1",
                opacity: 0.5
              },
              {
                offset: 100,
                color: "#E4E0EA",
                opacity: 0.9
              }
            ],
          },
        },
        responsive: [
          {
            breakpoint: 1800,
            options: {
              chart: {
                height: "550",
                width: "100%",
              },
            },
          },
          {
            breakpoint: 1400,
            options: {
              chart: {
                height: "400",
                width: "100%",
              },
            },
          },
        ],
      };
      var chart = new ApexCharts(
        document.querySelector("#spline__chart__candidate"), options__candidate);
      chart.render();
Was this page helpful?

Leave a Reply

Your email address will not be published. Required fields are marked *