Company
Date Published
Author
Paul Scanlon
Word count
1628
Language
English
Hacker News points
None

Summary

This post demonstrates how to create a time series chart using Astro on the server-side, displaying tag usage from blog posts published on a site. The data is sourced from Contentful and handled by Astro's client-side JavaScript library. The author created a time series function that groups each tag, creates an object with full arrays of months for each year, and calculates the maximum value to determine the ratio of lines used to represent count values. The chart is then populated using SVG elements, including polyline points, guides, x-axis dates, y-axis values, and chart title. Finally, a checkbox list on the left side allows users to interactively select and deselect tags, displaying or hiding corresponding polyline elements.