Introducing ngx-graphs, our open source AngularJS graphing components

We recently released our latest open source library, ngx-graphs. It’s a collection of Angular graphing components, designed to be highly composable. It’s very much still in the alpha stage, and only supports 2 different types of graphs at the moment. In this blog post, I’ll discuss why we felt the need to create (yet another) graphing/charting library for Angular, and the overall aims of ngx-graphs.

Why another graphing library?

We were recently working on an Angular project that needed to display a visualisation of a value over time, and we decided to use a step area chart for this. When I started writing the app, I had a look at what charting libraries were available for Angular. I found there were already several popular libraries, such as ngx-charts and ng2-charts. All the libraries I looked at seemed to provide a lot of components, and were under active development, however there were several problems I encountered with them:

  • The layout required the body of the chart to line up with other elements on the page, and none of the libraries supported this.
  • None of them provided a step area chart component, which was the biggest dealbreaker.

What makes ngx-graphs different?

The standard approach seems to be to have one component per type of graph. Each component usually requires you to either pass it lots of properties, which determine everything about how the graph displays — whether to show the axes, data for the chart legend, and of course data for the graph itself. This isn’t ideal, mainly because it gives you very little control over layout and styling, and you have to do this through the library’s own DSL (domain specific language) rather than using CSS.

  • You can swap out bits of the graph for your own implementation — e.g. you can use your own legend instead of the one provided by ngx-graphs

How do I use ngx-graphs?

The instructions for getting started using the library are on the GitHub page. ngx-graphs isn’t opinionated about how you lay out the individual components, but as mentioned above CSS grid is a good option.

<graph-axis class="y-axis" label="y axis" position="left" [scale]="{min: 0, max: 100, numTicks: 11}"></graph-axis> <step-area-chart [xAxis]="[0,100]" [yAxis]="[0,100]" [data]="[[0, 10], [30, 25], [65, 90], [85, 50]]" colour="#01ABC1" > </step-area-chart> <graph-axis class="x-axis" label="x axis" position="bottom" [scale]="{min: 0, max: 100, numTicks: 11}"></graph-axis>
:host { display: grid; grid-template-columns: 50px 1fr; grid-template-rows: 1fr 50px; height: 500px; } .y-axis { grid-column-start: 1; grid-row-start: 1; } .x-axis { grid-column-start: 2; grid-row-start: 2; } step-area-chart { grid-column-start: 2; grid-row-start: 1; }

Caveats

ngx-graphs is very early in development, and is really only an experiment at this stage. It only provides 2 different chart types at the moment, so isn’t really usable for most cases, although we hope to expand on this in future. While I believe the approach it takes works well, it may not work for all types of graph. For example, pie charts will not work, because they require labels, tooltips, etc. to be laid out in a circle. Also, I’m not aiming to in any way diminish the fantastic work of other library authors, just try and experiment with a new way of doing things.

We make digital products that deliver impact for entrepreneurs, startups and forward thinking organisations. Let’s Make Waves! wemakewaves.digital