Ngx-charts: [Feature] Show X or Y gridlines individually

[kyleledbetter]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here

Current behavior
Currently you can only hide or show both gridlines with showGridLines

What is the motivation / use case for changing the behavior?
It would be nice to be able to hide/show each gridline invidiually like:

• showXAxisGrid
• showYAxisGrid

showXAxisGrid

showYAxisGrid

[amcdnl]

I like it. The grid lines also don't align all the time which drives me bonkas.

[mikecabana]

Any update on this?

[stephengardner]

Update please?

[stephengardner]

In the meantime, heres a SCSS attribute (directive syntax) you can add to your <ngx-charts...> element to hide x and y axis ticks

[hideXAxisTicks] {
  [ngx-charts-x-axis-ticks] {
    > g {
      ~ g {
        display: none;
      }
    }
  }
}
[hideYAxisTicks] {
  [ngx-charts-y-axis-ticks] {
    > g {
      ~ g {
        display: none;
      }
    }
  }
}

Example: <ngx-charts-line-chart hideXAxisTicks ... ></ngx-charts-line-chart>

[bobbyg603]

@stephengardner we're having trouble integrating your sample. is there any way you could provide us with the full directive? thanks!

[kkumor]

Hey @bobbyg603, I also wanted to hide the vertical lines in the chart. In my case, it simply worked to add a css in the component.
:: ng-deep .gridline-path-vertical {      display: none; }

[omidfarhang]

@stephengardner worked perfectly for me.

"@swimlane/ngx-charts": "^13.0.2",
"@angular/core": "~9.0.1",
"@ng-bootstrap/ng-bootstrap": "^5.2.2",

[dasco144]

Is there any reason the above PR has not been merged in yet?