Question

0

331

Views

Apexcharts - How to change the y-axis step size value and tooltip not showing string

I am using apexcharts.js. I am using the below code on my page. I have two issues

How to change the y-axis step size value? As of now, it's talking 20.

In the tooltip, I am not getting the string. It's only displaying the number.

var options = {
  series: [{
    data: ["30 lac", "40 lac", "35 lac", "50 lac", "49 lac", "60 lac", "70 lac", "91 lac", "125 lac"]
  }],
  chart: {
    height: 350,
    type: 'bar',
    events: {
      click: function(chart, w, e) {
        // console.log(chart, w, e)
      }
    }
  },
  //colors: colors,
  plotOptions: {
    bar: {
      columnWidth: '45%',
      distributed: true,
    }
  },
  dataLabels: {
    enabled: false
  },
  legend: {
    show: false
  },
  xaxis: {
    categories: [10, 20, 30, 40, 50, 60, 70, 80, 90],
    labels: {
      style: {
        // colors: colors,
        fontSize: '12px'
      }
    }
  },
  yaxis: {
    min: 0,
    max: 200
  }
};

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

#chart {
  max-width: 650px;
  margin: 35px auto;
}

<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T20:38:21.175Z

You can change number of intervals with tickAmount https://apexcharts.com/docs/options/yaxis/#tickAmount
Use tooltip formatter https://apexcharts.com/docs/options/tooltip/#yformatter

      var options = {
    series: [{
      data: ["30 lac", "40 lac", "35 lac", "50 lac", "49 lac", "60 lac", "70 lac", "91 lac", "125 lac"]
    }],
    chart: {
      height: 350,
      type: 'bar',
      events: {
        click: function (chart, w, e) {
          // console.log(chart, w, e)
        }
      }
    },
    //colors: colors,
    plotOptions: {
      bar: {
        columnWidth: '45%',
        distributed: true,
      }
    },
    dataLabels: {
      enabled: false
    },
    legend: {
      show: false
    },
    tooltip: {
      y: {
        formatter: function (value, {dataPointIndex, w}) {
          return w.config.series[0].data[dataPointIndex]
          //or you can judt add 'lac' to value
          //return `${value} lac`
        }
      }
    },
    xaxis: {
      categories: [10, 20, 30, 40, 50, 60, 70, 80, 90],
      labels: {
        style: {
          // colors: colors,
          fontSize: '12px'
        }
      }
    },
    yaxis: {
      min: 0,
      max: 200,
      tickAmount: 4,
    }
  };

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

#chart {
  max-width: 650px;
  margin: 35px auto;
}

<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

0

331

Apexcharts - How to change the y-axis step size value and tooltip not showing string

1 answers

0

Find remote jobs

Andres GPT