0
173
VistasApexcharts: cómo cambiar el valor de tamaño de paso del eje y y la información sobre herramientas que no muestra una cadena
Estoy usando apexcharts.js . Estoy usando el siguiente código en mi página. tengo dos problemas
- ¿Cómo cambiar el valor del tamaño de paso del eje y? A partir de ahora, está hablando de 20.
- En la información sobre herramientas, no obtengo la cadena. Solo muestra el número.
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>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Puede cambiar la cantidad de intervalos con
tickAmounthttps://apexcharts.com/docs/options/yaxis/#tickAmountUtilice el
formattertooltiphttps://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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta