Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

336
Visualizações
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

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

enter image description here

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

enter image description here

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 Respostas
Responde à pergunta

0

  1. You can change number of intervals with tickAmount https://apexcharts.com/docs/options/yaxis/#tickAmount

  2. 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>

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda