Apexcharts Different options for charts

linkaiyi
Follow

Donut

var options = {
    chart: {
        type: 'donut',
        width: 380
    },
    colors: ['#1b55e2', '#009688', '#e7515a', '#e2a03f'],
    dataLabels: {
      enabled: false
    },
    legend: {
        position: 'bottom',
        horizontalAlign: 'center',
        fontSize: '14px',
        markers: {
          width: 10,
          height: 10,
        },
        itemMargin: {
          horizontal: 0,
          vertical: 8
        }
    },
    plotOptions: {
      pie: {
        donut: {
          size: '65%',
          background: 'transparent',
          labels: {
            show: true,
            name: {
              show: true,
              fontSize: '15px',
              fontFamily: 'Nunito, sans-serif',
              color: undefined,
              offsetY: -10
            },
            value: {
              show: true,
              fontSize: '26px',
              fontFamily: 'Nunito, sans-serif',
              color: '20',
              offsetY: 16,
              formatter: function (val) {
                if(parseInt(val) >= 1000000){
                  return (val / 1000000).toLocaleString('en') + 'M';
                } else if (parseInt(val) >= 1000) {
                  return (val / 1000).toLocaleString('en') + 'K';
                } else {
                  return val.toLocaleString('en');
                }
              }
            },
            total: {
              show: true,
              showAlways: true,
              label: gettext('Total'),
              color: '#888ea8',
              formatter: function (w) {
                var val = w.globals.seriesTotals.reduce( function(a, b) {
                  return a + b
                }, 0);
                if(parseInt(val) >= 1000000){
                  return (val / 1000000).toLocaleString('en') + 'M';
                } else if (parseInt(val) >= 1000) {
                  return (val / 1000).toLocaleString('en') + 'K';
                } else {
                  return val.toLocaleString('en');
                }
              }
            }
          }
        }
      }
    },
    stroke: {
      show: true,
      width: 25,
    },
    series: sales_list,
    labels: headers,
    responsive: [{
        breakpoint: 1439,
        options: {
            chart: {
                width: '250px',
                height: '390px'
            },
            legend: {
                position: 'bottom'
            },
            plotOptions: {
              pie: {
                donut: {
                  size: '65%',
                }
              }
            }
        },
    }]
  };
Object has 0 attachments

Was this article helpful?

This article is viewed 15 times!

0 Comments

Leave a Comment

Support