0

I am currently working on a bar chart component using ReactApexChart(react-apexcharts: ^1.3.9) library to visualize some data. The chart contains a set of categories (countries) and their corresponding values. The issue I am facing is that when one category (e.g., "US") has a significantly higher value than others, the bars for other categories become invisible in the UI.

I would like to find a solution that allows all bars to be visible on the chart, regardless of their values. I understand that adjusting the tickAmount property can be a potential solution, but I'm unsure of the best way to approach this problem.

Here's a simplified version of my component code:

const BarChart = ({ labels, series, colors, width, name, tickAmount }) => {
  return (
    <ReactApexChart
      options={{
        xaxis: {
          categories: labels,
          tickAmount: tickAmount === true ? labels?.length / 2 : labels?.length
        },
        yaxis: {
          labels: {
            formatter: function (value) {
              const intValue = parseInt(value, 10);
              return intValue ? formatNumber(intValue) : 0;
            }
          }
        },
        colors: colors,
        grid: {
          xaxis: {
            lines: {
              show: false
            }
          },
          yaxis: {
            lines: {
              show: false
            }
          }
        },
        tooltip: {
          x: {
            show: true
          }
        },
        dataLabels: {
          enabled: false
        },
        chart: {
          type: "bar",
          height: 200,
          toolbar: {
            show: false
          }
        },
        legend: {
          show: true,
          showForSingleSeries: true
        },
        plotOptions: {
          bar: {
            barHeight: "50%",
            borderRadius: 10,
            columnWidth: width || "20px",
            dataLabels: {
              position: "bottom"
            }
          }
        }
      }}
      series={[
        {
          name: name || "Page Views",
          data: series
        }
      ]}
      type="bar"
      width="100%"
      height={250}
    />
  );
};

const labels = [ "US", "CA", "NO", "GB", "AU", "DE", "MX", "IN", "JP", "IE", "IT", "SE", "FR", "NZ", "PH" ];

const series = [ 33190, 67, 36, 27, 23, 18, 15, 14, 14, 12, 12, 10, 9, 9, 7 ];

I have tried adjusting the tickAmount property in the x-axis options, but it doesn't seem to work as expected. I would greatly appreciate any insights or alternative approaches to ensure all bars are visible on the chart.

Thank you in advance for your help!

  • You are looking for a logarithmic chart. You can figure out how to make that – Muhammad Waqar Anwar Aug 02 '23 at 10:14
  • Thanks, I think I found the solution! I managed to resolve the issue by adding `logarithmic: true` to the y-axis configuration. This modification effectively plotted the y-axis on a logarithmic scale, which solved the problem I was facing. – Muthukumar M Aug 02 '23 at 11:06

0 Answers0