blog-chart

Create a JSON file with the chart type, title, data labels and values, and source metadata, then run the generate_chart_svg.py script with --input and --output flags. The script outputs a complete figure element containing an accessible inline SVG.

It supports seven chart types: horizontal bar, grouped bar, donut, line, lollipop, area, and radar. Choose based on the data pattern, such as donut for parts of a whole or line for trends over time.

Yes, pass --format mdx to the script and it converts attributes to JSX camelCase form, such as textAnchor, fontSize, and strokeWidth, and transforms style strings into JSX style objects.

Charts use fill="currentColor" for text and low-opacity currentColor strokes for grid lines, with a transparent background. A --chart-muted CSS variable switches between #4b5563 on light and #d1d5db on dark backgrounds via prefers-color-scheme.

The fixed 560x380 viewBox limits bar width, so the renderer raises an error when too many groups or series make bars narrower than 2 pixels. Reduce the number of groups or series, or split the data into multiple charts.

Every chart includes role="img", aria-labelledby referencing title and desc elements, a screen-reader description containing all data points and the source, and a semantic figcaption with source attribution.