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:

• There were some strict styling requirements for the page, and none of the libraries gave me enough control over the styling.
• 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.

Therefore, given these difficulties, I decided I had to make my own graphing components instead. Once these components were complete, and we’d done some dogfooding with them, we open sourced them as ngx-graphs.

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.

I think this is because up until recently, CSS wasn’t powerful enough to allow the layouts that charts require, so you had to do the layout manually in SVG. However, with CSS grid, it’s now possible to do the layout for most charts in pure CSS. For example, you can do this layout in CSS grid:

This is very important, because it allows you to split a chart up into simpler and more focused components. This makes the components much more flexible, and it allows you to leave layout concerns to higher order components. This is the approach that ngx-graphs takes.

The main aim of ngx-graphs is to be highly composable. This gives you the maximum amount of flexibility over how you use the library. The individual components know as little about the overall layout as possible, and you are free to lay them out as you see fit. This has a couple of major benefits:

• It gives you lots of control over the styling and layout of the graph — and it can all be done using CSS, rather than a DSL specific for the charting library you’re using.
• 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.

Let’s run through a basic example. Say you just want to display a step area graph with axes. You’ll need 3 components: the X axis, Y axis, and the step area graph itself. Your template might look like this:

<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>

And your CSS something like this:

: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; }

This will give you a graph looking like this:

You can then use pure CSS to tweak the height of the graph, the margins for the axes, etc. You can also use the *ngIf core Angular directive to determine whether to show the axes.

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.

https://github.com/uvd/ngx-graphs

Originally published at www.uvd.co.uk on December 5, 2017.