Radial Bar Chart rendered differently on Firefox vs. Chrome

[rvergar7]

Hello, thanks in advance for this great library.

I'm currently working on a document where I need to import a Radial Bar Chart via the dataURI method. During this I noticed that the Radial Bar Chart is rendered differently on Firefox vs. Chrome. On Firefox there appears to be some extra whitespace below the chart.

This doesn't cause too much of an issue using a browser but when I'm generating the document, if the user uses Firefox then the formatting is thrown off by this whitespace. I am using several different charts in the document and the Radial Bar Chart is the only one that has this behavior.

Codepen: https://codepen.io/rvergar7/pen/xxbMVjr

Chrome:

Firefox

[junedchhipa]

I checked in Firefox and confirm the bug.
It will be addressed soon.

[cymig]

HI @junedchhipa,

It feels like the bug is still there in apexcharts v3.19.2. There's still some extra whitespace below the chart on Firefox. In addition, Radial Charts have the bottom part cut off on Chrome. Not sure if this is a known bug?

Thanks

On my local project:
Firefox (Version 76.0.1 (64-bit))

Chrome (Version 83.0.4103.61 (Official Build) (64-bit))

This is replicable here on codepen for reference:
https://codepen.io/apexcharts/pen/VEGyGx

[junedchhipa]

@cymig Your codepen link is wrong. Please provide the correct codepen link.

[cymig]

@cymig Your codepen link is wrong. Please provide the correct codepen link.

Hi @junedchhipa,

My apologies for the wrong link. I just set a new demo URL for you to test: https://van-footprint.herokuapp.com/#/results

1. On Firefox, you'll notice some extra white-space below the chart.
2. On Chrome, I suspect the "bottom cut off" bug happens when using a negative value for startAngle: -90,.

plotOptions: {
          radialBar: {
            offsetY: 0,
            startAngle: -90,
            endAngle: 180,
            hollow: {
              margin: 8,
              size: "40%",
              background: "transparent",
              image: undefined
            },
            dataLabels: {
              name: {
                show: false
              },
              value: {
                show: false
              }
            }
          }
        },
        labels: getter,
        legend: {
          show: true,
          floating: true,
          fontSize: "11px",
          fontFamily: "Quicksand",
          position: "top",
          offsetX: -170,
          offsetY: 180,
          labels: {
            useSeriesColors: true
          },
          markers: {
            width: 0
          },
          itemMargin: {
            vertical: 0,
            horizontal: 0
          }
        },
        colors: ["#ABA1A1", "#7FBFD3"]
      };
    }

Thanks

[pierre-alain-b]

I have the same behavior:
FF 88 gives:

Chromium 89 gives:

[pierre-alain-b]

The issue vanished when I added
sparkline: { enabled: true }
in the chart options.

[pierre-alain-b]

I guess this issue can now be closed again.

[digitalmouse]

Noting this here: using apexcharts v3.33.0 in Node with Vue2 and Vuetify

Bottom cutoff still appears in latest Chrome 99.0.4844.51 (Official Build) (64-bit) but not in Firefox 98.0b10 (64-bit).

It seems to revolve around a negative startAngle, as combinations using positive numbers work just fine.

Using startAngle: -180, endAngle: 90 in plotOptions{} :

Oddly enough, the cutoff disappears when I change the endAngle to 103 :

As I experimented with reducing the endAngle back down from 110 to 90, the cutoff gradually gets smaller until around 103-104 it stops 'shrinking'. At least enough that you never notice it. :-)

NOTE: adding the sparkline trick from @pierre-alain-b did not work in my case.