Im getting 10 ticks on Y scale when there is no data, instead of specified 4 value in options #4339

zee0786 · 2024-03-20T07:33:40Z

zee0786
Mar 20, 2024

Im getting2 issues

10 ticks on Y-axis scale when there is no data instead of 3 specified in options.
another issue is Im getting duplicate Y axis labels for very low value.

Am I doing some thing wrong?

I'm attaching 3 screenshots for reference.

with no data
with low value data
with multiple data

Answered by rosco54

Mar 29, 2024

Push request #4363, hopefully, addresses the default grid question.

View full answer

rosco54 · 2024-03-20T09:58:07Z

rosco54
Mar 20, 2024

When there's no data, ApexCharts puts up a default grid with 10 lines. It does this also when you collapse all data series. You could try adding showAlways: true to [at least one of] your yaxis config.

ApexCharts doesn't draw the grid according to the label's displayed string, but the real underlying value. The labels appear duplicated because they're rounded to integers. Set decimalsInFloats: 1 in your yaxis config and I suspect you'll see the values change to 0, 0.5, 1.0, 1.5. Normally this is automatic but if your data is all integers it will round the tick labels integers as well.

2 replies

zee0786 Mar 21, 2024
Author

Apologies @rosco54, but setting showAlways to true didn't help. Will provide you a link soon to verify, once I recreate it on a PEN

zee0786 Mar 25, 2024
Author

@rosco54. Can you please go through this link

https://codepen.io/zee9786/pen/JjVRPVv?editors=0010

rosco54 · 2024-03-26T02:57:01Z

rosco54
Mar 26, 2024

When I suggested to try showAlways, I was guessing and wasn't suggesting it should work.

After looking at the code, yaxis.showAlways is specifically targeting series visibility controlled via the legend. When series are collapsed/hidden via the legend, their yaxis will/should remain visible if showAlways: true (the default is false), together with show: true (default is true).

I see this chart. When I play around with it, it doesn't seem to be running any version of ApexCharts I configure, eg, the number of ticks displayed for no data is 5, not 10. It behaves as though it's running version 3.45.2 even after I set apexcharts@3.48.0 explicitly.

Again looking at the code in detail wrt these issues, I'm reasonably sure the behaviour that you're expecting can't be achieved [through config options]. Here is what is designed to happen in your case:

no data or data is all nulls, hide the yaxis.
no remaining visible axes, display a default axis

2 replies

zee0786 Mar 26, 2024
Author

@rosco54 Can you please check the link now again. It was a miss from my end. it had an older version of code.
I have updated it now

rosco54 Mar 27, 2024

First, I'm working on some changes that, if accepted, will address the 10-ticks issue.

Second, I removed most of the apexcharts config from your PEN (obviously not permanently) that isn't needed to demonstrate the original issues, then commented out the series data to leave just the empty data:[] to see what default grid it puts up. I also copied your config (stripped down) to a raw HTML file and ran it without React straight into ApexCharts 3.48.0.

The PEN is definitely not running 3.48.0. With no data I get 5 ticks, which is what 3.45.2 used to put up. Since 3.46.0 it's been 10 ticks. The scaling is also from 3.45.2.

I put in some data points to see what it did with the scaling of the Y axis. Here are comparisons using identical ApexCharts configs:

The PEN version (notice the uneven tick increments: 4,3,4):

The PEN version with labels to 3 decimals:

The straight ApexCharts 3.48.0 version:

Here's the HTML, so you can put it in a file and run it yourself.

<!DOCTYPE html>
<html lang="en">

<head>
<script src=https://cdn.jsdelivr.net/npm/apexcharts@3.48.0></script>

</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-10">
        <div id="chart"></div>
      </div>
    </div>
  </div>

<script>

const currentDate = new Date();

  // Set the date to the first day of the current month
  const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);

  // Set the date to the last day of the current month
  const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
  const onMouseMove = () => { };

  const handleChartEvent = (event, chartContext, config) => {
    if (config?.dataPointIndex > -1) {
      const series = chartContext.w.config.series[config.seriesIndex]?.data;
      onMouseMove(series[config.dataPointIndex]);
    }
  };

const options = {
    series: [
    {
      name: 'Weight',
      type: 'area',
      data: [
        {"x":"2024-03-12T18:30:00.000Z","y":1},
        {"x":"2024-03-13T18:30:00.000Z","y":2},
        {"x":"2024-03-14T18:30:00.000Z","y":5},
        {"x":"2024-03-15T18:30:00.000Z","y":7},
        {"x":"2024-03-16T18:30:00.000Z","y":6},
        {"x":"2024-03-17T18:30:00.000Z","y":4},
        {"x":"2024-03-18T18:30:00.000Z","y":8},
        {"x":"2024-03-19T18:30:00.000Z","y":11},
      ]
    },
    ],
    chart: {
      id: 'chart',
      type: 'area',
      height: 200,
      width: 550
    },
    grid: {
      xaxis: {
        lines: {
          show: false, // Show vertical grid lines on the X-axis
        },
      },
      yaxis: {
        lines: {
          show: true, // Hide the horizontal grid lines on the Y-axis
        },
      },
    },
    dataLabels: {
      enabled: false,
    },
    xaxis: {
      type: 'datetime',
      min: firstDayOfMonth.getTime(),
      max: lastDayOfMonth.getTime(),
    },
    yaxis: {
      min: 0,
      tickAmount: 3,
    },
  };

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

chart.render();
</script>

</body>

</html>

rosco54 · 2024-03-29T08:42:32Z

rosco54
Mar 29, 2024

Push request #4363, hopefully, addresses the default grid question.

1 reply

zee0786 Apr 5, 2024
Author

Thanks for your humble reply @rosco54 . Will be waiting for th enext release :)

Uh oh!

Im getting 10 ticks on Y scale when there is no data, instead of specified 4 value in options #4339

Uh oh!

Uh oh!

zee0786 Mar 20, 2024

Replies: 3 comments · 5 replies

Uh oh!

rosco54 Mar 20, 2024

Uh oh!

zee0786 Mar 21, 2024 Author

Uh oh!

zee0786 Mar 25, 2024 Author

Uh oh!

Uh oh!

rosco54 Mar 26, 2024

Uh oh!

zee0786 Mar 26, 2024 Author

Uh oh!

Uh oh!

rosco54 Mar 27, 2024

Uh oh!

rosco54 Mar 29, 2024

Uh oh!

zee0786 Apr 5, 2024 Author

zee0786
Mar 20, 2024

Replies: 3 comments 5 replies

rosco54
Mar 20, 2024

zee0786 Mar 21, 2024
Author

zee0786 Mar 25, 2024
Author

rosco54
Mar 26, 2024

zee0786 Mar 26, 2024
Author

rosco54
Mar 29, 2024

zee0786 Apr 5, 2024
Author