Vollständiges Transkript anzeigen (2.047 Wörter)
TanStack has done it again. This time solving charts in JavaScript with TanStack Charts. It's promising a smaller bundle size than libraries like Recharts. It's got SVG and Canvas outputs, animations, tooltips, interactions, and like most TanStack libraries, has a framework agnostic core, type safety, and a great developer experience. And despite being so new, you can already build so many types of charts from this. Everything from a basic line chart or a bar chart, up to more complex ones like a Sankey diagram, a treemap, heatmaps, radar charts, donut charts, gauges, and even really cool world maps. It can probably make whatever you need already.
Now, the first thing I want to go through is how TanStack Charts actually approaches charts, because it's in a similar way to a library like ggplot2 in R. It uses a grammar of graphics. This approach doesn't treat a chart as a fixed type. Instead, they're actually a composition of marks, scales, and mappings. So, instead of asking for a bar chart, you specify something like put some bars here, map this variable to x, that variable to y, and apply these scales. And from that description, a chart emerges. It's a very subtle difference, but it's part of what makes this library extremely flexible. I mean, someone tweeted asking if it can make a chart like this, and the answer was yes. This isn't a built-in chart type, the library is just flexible enough to make it.
As for how this works, if we take a look at this bar chart demo here that maps the frequency of English letters, the most important code for this is only 20 lines. It starts out with a chart definition, using the defineChart function, and inside of here, we start with marks. You can think of marks as the stuff that actually gets drawn. So, your lines, dots, or bars. I actually built a demo site trying to use all of the marks available in TanStack Charts, and I think there's about 55 of them. So, this should be a fairly good example of the charts that you can build in TanStack Charts. And there is just so many of them. You are going to have to stick with me here. But you can see we have our normal bar charts, whether you want that horizontal or vertical. The same with things like lines and areas. Then we also have our dot charts here. We have a rule, which is the dotted line going across the chart where you can have that vertical. You can create a tick chart, again, x or y. You have a rectangle, you have a cell, you have bands, you have arrows, you have vector, so you can create a wind field, you have linking, you have hexagon, you have text, so marks can be text to render them wherever you want within the chart. We have frames, we have lines, we have differences, we have linear regression charts, we have boxes, we have violin charts, we have waffle charts, you can make contour maps in this already. By the way, this library's been out a week, it's crazy it has this many features, and the list still goes on. We can create this chart, whatever the hell that is, I don't even know what that's for. We have a treemap chart, we have a sunburst chart, we have Sankey diagrams, we have crosshair, focus guide, we have our radial charts like a pie chart or your donuts, or your radars. And then finally down here, we also have geoshapes if you want your world map charts. As I said, there is just so many of these that you can combine to create pretty much any chart that you need.
Back to our bar chart demo though, the only mark that I need is barY. And inside of this, you then pass your data, which in my case is this array of objects. Then after that, you define what should be the x key and what should be the y key. And this is great because it means you don't have to conform your data to a specific structure. You can simply define it here. It's also type safe, so it means that if I misspell one of these keys, it would let me know immediately. And that is the type safety that we've come to love from TanStack. After we've defined the marks that we want, we then have our x and y axis. For the x axis, this is super simple. I've said that I want spaced band, which is for categories, so our letters get evenly spaced out. I also have some padding between them. For our y axis, I'm using scale linear, which is for numbers. And I also have the nice setting set to true, which just means round the axis to a sensible number instead of stopping at the highest value we have. If I set this to false, you can see that the top of the axis here just ends where the top of the highest bar is. In here, I've also given the axis a label and also a format, just so we can format these numbers as percentages instead of decimal points.
Now all of that definition is the framework agnostic part, but to actually render this in React, all we need to do is import the chart component, pass it our definition, give it a height, and then a label, and this is all we need to make our chart. But the thing I want to make really clear is we have not used a bar chart here. We've defined in our code where we want to render our marks, and it just so happens our end result is a bar chart. But it's a very subtle distinction, but that is the use of grammar of graphics. As an example of the flexibility of this, say I wanted an average line on my bar chart, all I need to do is go into the marks array and add a new mark, this time being ruleY. For another quick example, say I wanted a line chart with dots and an area underneath, well, I can just define all of those as marks and look at that, I now have a graph of our subscriber count, which is the perfect time to tell you to subscribe to stay up to date with AI and developer news like this. If you want to see even more examples of the use of these marks to build out all of those various charts that I showed earlier, you can check out the documentation. They have tons of examples, and it's incredibly detailed.
In fact, I took a few more examples from their documentation here just to show you exactly what TanStack Charts can do. As I don't have time to go over all of the features in depth, that would literally take about 20 hours. But one of the coolest ones is this globe chart, I just really love it. I think it's super cool you can do this in a library that's a week old. But then we also have interactions, which is super cool. So, we have this brush here, we can drag this across our plot and also change the range of it from each side. We have zooming in on our chart, so we can zoom in nicely on this line chart. We have keyed selection plus keyboard selection, so if I hover over one of these and hit space, everything works nicely, and you can see it reads the value of what we've selected down here. Then we also have a crosshair, so as I go along, you can see it's printing what the actual date is that I'm hovering over on the axis down below.
It also has tooltips with tons of configuration. So, you can see at the moment this is set to nearest x, so only horizontal distance counts for which point it's going to pick. But you could also pick a strategy like group x, so it's going to show me all of those values when I hover over any area here. You can also have it so you can pin a tooltip. So, if I hover over these bar charts here, you can see that the tooltip is changing. But if I click on one, that pins the tooltip, and also shows some extra detail. Over here, you can also see that we don't have a tooltip, but it's reading those values directly down below. So you can pull that information out. And here we're rendering a custom tooltip. So if I click to pin, we have a custom close button, all of this is done in React.
This library also has you covered if you want to do some animations. So if I change the values of these bars here, you can see it's animating nicely between those changed values. We can also click replay here, and you can see that we can have a staggered entrance of our bar charts. And if I go ahead and remove some of the bars down here, you can see it animates nicely between adding in or removing those bars. We can even do a streaming animation, so as new data comes in, it's simply shifting that line bar instead of redrawing it.
And just before I move on to how these charts are styled, the last feature I wanted to show off was the export feature. You can see I've got buttons here for download as SVG and PNG, and if I click on these, this is the end result that I get back. So now let's talk about how we theme and style these charts. Because if I remove the styles from this chart here, this is the default base look, because out of the box it has no styles. It simply uses current color for the foreground, and the background is transparent. There's three levels to styling in TanStack Charts, and the first is your CSS variables. These are your categorical colors from six custom properties, and you can override these on any container you like. So if I change these values here, you can see how this chart updates all of its colors. The second level is then on the theme block, which is in the actual chart definition. This is meant for what's called the chart furniture rather than the data, so it's things like your text, your grid lines, your background, and so on. Then the third level is on the marks themselves. So you can set things like fill, stroke, opacity, line cap, dashes, corner radius, fonts, and more. These can also be fixed values or data driven, so you could color a bar by whether it's over a certain target. You can even build out gradients by using your data. As I said, this library is super flexible. It's also super lightweight. In that benchmark full suite, they include things like crosshairs, brushing, zooming, selection, all of it. The bundle size is between 36 and 43 kilobytes. If we compare that to Chart.js or Recharts, Chart.js comes out at 45 to 58 kilobytes, and Recharts 153 to 168 kilobytes. So TanStack Charts is significantly smaller.
Another awesome part about this is that philosophy. They've actually built this for two things. First, people should get polished, responsive charts from a short declaration. And second, AI should be able to compose, inspect, and modify charts without learning an application-specific series model. So they've designed this API so an agent can write charts without having read the docs. And honestly, I used Claude to wire up most of the demos that I did earlier. And while I double checked this, which is pretty rare these days, it mostly aligned with everything I expected, and I had to make very few changes, which is pretty surprising for a brand-new library. So that is TanStack Charts. It is my new favorite charting library, and it is improving rapidly. Let me know what you think in the comments down below. Otherwise, subscribe, and as always see you in the next one.
