Goshtoso Charts

Add your first chart

Render a static SVG chart in an existing Goshtoso application, then add the local browser runtime only if the chart needs interaction.

1. Install the module

Add Goshtoso Charts to an existing Go and templ application.

bash

go get github.com/araihu/goshtoso-charts

2. Mount chart assets

Shared controls and interactive charts use versioned assets embedded in the module. Mount the handler at its exported prefix; the handler removes that prefix itself.

import chartassets "github.com/araihu/goshtoso-charts/assets"

mux.Handle("GET "+chartassets.Prefix, chartassets.Handler())

3. Render a static chart

Static/vector components render on the server and need no browser chart runtime.

templ

@line.Line(line.Config{
  Label: "Request latency",
  Labels: []string{"Mon", "Tue", "Wed"},
  Series: []line.Series{{Name: "p95 (ms)", Values: []float64{42, 47, 44}}},
})

4. Add interactive dependencies

For interactive charts, render the dependency component once in the document head before chart initialization. Local vendored delivery is the default.

templ

import "github.com/araihu/goshtoso-charts/components/dependencies"

templ Layout() {
  <head>
    @dependencies.Dependencies()
  </head>
}

Third-party delivery is explicit: use dependencies.WithCDN() only when the application accepts that network and CSP boundary.

5. Render an interactive chart

Interactive examples focus on visual behavior, exploration, and composition.

templ

import interactivebar "github.com/araihu/goshtoso-charts/components/interactive/bar"

@interactivebar.Bar(interactivebar.Config{
  Label: "Deployments",
  XAxis: []string{"Mon", "Tue", "Wed"},
  Series: []interactivebar.Series{{
    Name: "Production",
    Data: []interactivebar.Data{{Value: 3}, {Value: 5}, {Value: 4}},
  }},
})

6. Choose delivery and wrapper behavior

Static/vector and interactive charts solve different jobs. Use the static/vector and interactive guide to choose delivery, then configure shared controls and an initial enabled, disabled, hidden, or omitted wrapper state with the chart controls guide.

Browse categorized static/vector, interactive Cartesian, and relationship charts. The Live availability example shows a current status snapshot.

See it in action

Server-rendered SVG

Static charts render on the server as ordinary SVG. They work well for reports, email, print, and pages where the first meaningful paint matters more than browser exploration.

Explore in the browser

Interactive charts

Interactive charts add browser-side exploration when zoom, hover detail, or live updates justify the runtime. The frame is local and does not depend on a third-party CDN.

Higher-dimensional data

Three-dimensional line chart

Use the 3D family for a deliberate spatial comparison. Keep the surrounding explanation and exact values available so the visual does not carry the entire interpretation.