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