Data Visualization Test.
Table of Contents
SVG Line Chart (Hugo Native)
This line chart is generated entirely by Hugo templates at build time. It renders as a scalable SVG, uses the theme’s CSS variables for colors (so it supports Dark Mode!), and requires zero client-side JavaScript.
Simple CSS Bar Chart
This chart is generated at build time from a simple shortcode, using zero JavaScript libraries.
How it works
The data is passed directly in the markdown:
| |
Chart.js Integration
This section demonstrates the hugo-chart component, which renders interactive charts using Chart.js (v4).
Bar Chart
A standard bar chart comparing values.
Line Chart
Useful for showing trends over time.
Doughnut Chart
Great for showing proportional data.
Radar Chart
Effective for comparing multiple variables.
Mermaid Diagrams
Mermaid diagrams are rendered using a native Hugo render hook. Just use a code block with the language mermaid.
Flowchart
graph TD
A[Start] --> B{Is it working?}
B -- Yes --> C[Great!]
B -- No --> D[Debug]
D --> B
Sequence Diagram
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
Gantt Chart
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
Class Diagram
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}