2014-09-04

Co.Labs

Chartist Is An Elegant Solution To Responsive Infographics

Chartist simplifies what has so far been a fairly laborious process.



On Tuesday, the editor-in-chief of The Verge tweeted that he deleted his site’s iPhone app (which won’t be updated any longer) in favor of using the new responsive website. Beyond the surprise that such a recently built website wasn't responsive in the first place, it proved once again that all news organizations must build websites that scale to different device sizes.

Part of having a responsive site, however, is making sure all the items on the site are responsive as well. Just scaling down the size of pictures and charts, which is what most sites do now, doesn't solve the problem. Take a look at the chart in this Wonkblog article about wages, for example. Resize your browser window smaller and most of the page adjusts to fit and still be readable--but the chart resizes in a way that makes it practically unreadable.

An open source solution to this problem emerged recently. It's called Chartist (the developer chose the name both because it sounded good and refers to the working class election reform movement of the 1830s). Chartist is noteworthy because it doesn't just make existing charts smaller or bigger, it changes the the way the data is displayed so that it makes sense on whichever size screen it's being viewed on.

A chart showing each of the 12 months along its x axis when displayed in a full-width browser window, for example, will change to show only six months along that axis when the window is reduced in size. The chart is smaller, and the labels are collapsed, but it is no less clear than the larger version in communicating the results.

Chartist's re-rendering solution is not wholly new, there are other libraries that can do the same thing with various amounts of effort. Chart.js is one option, and D3 can also be made to create responsive axes (here's a good example of how that works). And Highcharts, from the Norwegian firm Highsoft AS, appears to be the Cadillac of chart-building tools (with pricing to match).

Part of Chartist's appeal is that it does one thing, and one thing well--draws simple charts. There is missing functionality, notably hover effects, but that can be added with CSS and JavaScript by the developer in the context of the specific chart.

“Most libraries just miss the point that they are libraries (and not applications) and should try to focus on a specific problem rather than trying to solve everything on their own,” says Chartist developer Gion Kunz. “Libraries get used by developers and developers produce applications.”

Kunz recently gave a Lightning Talk at the Frontend Conference in Zurich in which he quickly--a timed five-minute talk--details the basics of Chartist and shows off some powerful functionally in the simple package.

Chartist is Kunz’s first large open source project, and he felt that it was right to open it up to the community to help give it life (you can find the GitHub repo here). Since Chartist is brand new it still has the opinionated feel of one developer.

"I hope this changes soon as I have a few people now who like to contribute and get into the source code of Chartist to enhance it with requests from the community," Kunz says. He's also eager to address problems that arise from situations he hasn't encountered yet.

[Web designer: baranq via Shutterstock]




Add New Comment

0 Comments