Ngx-charts: Second Y-Axis with its own scale, width, tooltips, ...

[hgoebl]

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
A line-chart or bar-chart can only show lines/bars in one dimension, let's say an amount of money.
If one would like to show the number of purchased items (as an example), this isn't possible.

Expected behavior
By adding input properties like 'y2Axis', 'y2Scale', ... it should be possible to visualize lines/bars in a second dimension.

Reproduction of the problem

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

Please tell us about your environment:

• ngx-charts version: 4.0.x
  

• Angular version: 2.3.x
  

• Browser: [all]
  

• Language: [all]

Question

How is this library meant to be used? Should we just use the "outer", high-level components like ngx-charts-line-chart, or would it also be ok to build own components by composing "low-level" components/directives like they are used in ngx-charts-line-chart. And do you think one should extend your components (with TypeScript / ES6 class extensions mechanisms, or fork / copy and adapt components? BTW is there a mailing list, a google group or the like where such questions can be discussed?

[marjan-georgiev]

This is a good use case for a custom chart. Our high level components provide the most commonly used charts ready to use out-of-the-box. They have a lot of features and cover most of the common use cases for data visualization.
However, if you want custom functionality, you can use the framework to easily build them. All of the low level components (axis, line-series, circle-series, bars, tooltips, legends, etc) are exported and accessible through NgxChartsModule.

Here's an example of a simple custom bar chart built inside an angular-cli app: https://github.com/marjan-georgiev/Angular-CLI-NG2D3-Demo/tree/master/src/app/custom-chart

We have a gitter chat for questions and discussions: https://gitter.im/swimlane/ngx-charts

[hgoebl]

I think you're closing this feature request quite fast. Don't you think providing a second y-scale is a very commonly used case and some users might vote for this feature?

The example is not really extending something. In case of a second Y-axis there are so many aspects which must be adopted (e.g. calculating width) so really many changes have to be made in lots of places. I regard this not a case every consumer of ngx-charts should do by it's own.

Or maybe I misunderstood the intention of ngx-charts and the provided ready-to-use charts are more or less only examples how to build own charts? Thanks anyway.

[marjan-georgiev]

Adding a second scale introduces another dimension to the chart and adds another level of complexity, which is very hard to implement in a generic way that would fit all use cases, but much easier to implement as a custom chart that solves a particular use case.

There are several questions that would need to be answered here:

• What would be the base chart? Bar, line, area, anything?
• How would the second dimension be visualized? By a bar, line, area, anything?
• What happens when someone wants another layer on top of these 2?

We would have to account for all of these possible combinations (line on top of bars, bars on top of line, lines on top of area, etc.), and yet there will still be a case where someone would need something extra added or modified.

The simplest approach is to build a custom chart. You can start by copying the chart you would like to extend, and modify it in any way you like. You only need to solve your own use case, so it should be way simpler.

Again, the out-of-the-box charts that we provide solve many of the most common use cases, and we offer them as ready-made components. For edge cases or cases not covered by them, custom charts are the way to go. This is why we also expose all of the building-block components through the main module.

Edit: I'm reopening the issue in case someone else wants to comment on it.

[marjan-georgiev]

A combination of bar and line chart has been implemented as a demo and can be seen here: https://github.com/swimlane/ngx-charts/tree/master/demo/combo-chart

The code for the custom chart can be found here: https://github.com/swimlane/ngx-charts/tree/master/demo/combo-chart

[cole21771]

@hgoebl Did you ever create a custom chart with two yAxis'? If so, I would really appreciate it if you could provide me with the code for the custom chart.

[hgoebl]

@cole21771 we decided not to use this library, it was not a good fit for our use cases.

[cole21771]

@hgoebl Just curious, what library did you switch to & are you still using Angular 2+?

[hgoebl]

@cole21771 We use now plotly.js with Angular 5 and wrap the library through own hand-crafted components. Works well, but plotly might be overkill for quite many use-cases.