コンポーネント詳細

Chart (Line)

Line chart for visualizing trends over time or continuous values.

サンプル

参照情報

テンプレート
templates/components/chart.html
ゴールデン
N/A

Go(Marionette)サンプル

この実装例は Go の Marionette を使っています。ソース: docs/site-astro/public/examples/go/chart-line.go

package goexamples

import (
	mb "github.com/YoshihideShirai/marionette/backend"
	mf "github.com/YoshihideShirai/marionette/frontend"
)

func RegisterChartLineExample(app *mb.App) {
	app.Page("/chart-line", func(ctx *mb.Context) mf.Node {
		return mf.Chart(mf.ChartProps{
			Type:   mf.ChartTypeLine,
			Title:  "Onboarding trend",
			Labels: []string{"Jan", "Feb", "Mar"},
			Datasets: []mf.ChartDataset{
				{Label: "Starts", Data: []float64{8, 14, 18}, BorderColor: "#2563eb", BackgroundColor: "rgba(37, 99, 235, 0.14)", Fill: true, Tension: 0.35},
			},
		})
	})
}