Ngx-charts: [Feature] Show X and Y axis (the actual line)

Created on 5 Jan 2017  路  4Comments  路  Source: swimlane/ngx-charts

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, the line chart is always drawn without the lines or arrows indicating the X and Y axis. While this looks just awesome, modern and fresh, I (and my business department) sometimes need the X and Y axis because it helps us to read the diagram. For instance, the lines allow us to align a triangle ruler.

Expected behavior
I'd like to contribute a pull request adding the option to draw the X and/or the Y axis. Of course, the lines should remain invisible by default in order to maintain backward compatibility.

Reproduction of the problem
Draw a line chart with ngx-charts :).

What is the motivation / use case for changing the behavior?

  • Tradition ("Line charts always used to have and x and y axis")
  • Useful for special cases, such as usings a triangle ruler to read the values more precisely
  • and it's a matter of taste.

Please tell us about your environment:
not relevant - this is about ngx-charts itself

  • ngx-charts version: x.x.x
    3.0.3

  • Angular version: 2.x.x
    not relevant - this is about ngx-charts itself

  • Browser: [all]
    not relevant - this is about ngx-charts itself

  • Language: [all]
    not relevant - this is about ngx-charts itself

Enhancement Accept PRs Easy Backlog

All 4 comments

This shouldn't be hard to add. XAxisComponent and XAxisComponent would need to be modified by adding the lines to them.

I'm not sure if this should be an input or just something that can be done by overriding CSS. I would make them invisible by default, and users would be able to override the CSS to make them visible. This is open for discussion though.

@marjan-georgiev Can you please elaborate on your answer? How can i modify the XAxisComponent and if you have just a piece of code on how to integrate this? Thank you

anybody got this working? Please provide a sample code for this.

@ErvinLlojku After a long pause, I've returned to D3.js programming. No promises, but chances are I'll submit my pull request soon.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ronybarbosa picture ronybarbosa  路  3Comments

cfremgen picture cfremgen  路  3Comments

DZDomi picture DZDomi  路  4Comments

Jacquers picture Jacquers  路  3Comments

tobigit picture tobigit  路  4Comments