Search code examples
reactjschartsgoogle-visualizationreact-google-charts

Remove Y Axis and its grid lines


Im using react-google-charts

This is my chart code

<Chart
  chartType="Bar"
  loader={<div>Loading Chart</div>}
  data={[
    ["", "Credit", "Debit"],
    [
      "AVERAGE",
      avg_credit,
      avg_debit,
    ],
    [
      "30 Days",
      sum_values[0].CREDIT,
      sum_values[0].DEBIT,
    ],
    [
      "60 Days",
      sum_values[1].CREDIT,
      sum_values[1].DEBIT,
    ],
    [
      "90 Days",
      sum_values[2].CREDIT,
      sum_values[2].DEBIT,
    ],
  ]}
  options={{
    legend: { position: "none" },
    hAxis: {
      baselineColor: "none",
      ticks: [],
    },
  }}
/>

I have added the hAxis option there because I would like to completely remove the Y-axis (It's bar, it's numbering, and it's grid lines going horizontally through the graph), but they don't seem to have any effect, what can I do to achieve it? Thanks


Solution

  • Try this. It will remove axis and text of that axis

    hAxis: { textPosition: "none", gridlines: { count: 0 } },
      vAxis: { textPosition: "none", gridlines: { count: 0 } },
      baselineColor:"transparent",