ExtraStatic: powerful and easy publishing

Skip to content

Charts

Chris Dawson requested to merge add_charts into main

This uses layercake to add charts.

See it live here: https://20691__use_radar_chart__kidtime.x.extrastatic.io/2019-02-17-review-monument-valley-the-most-brilliant-game-there-is-but-for-kids

This will permit you to send an email like this:

radar: The 5 Characteristics
Intrinsic Motivation: 9
Self-confidence: 9
Teamwork: 7
Age Appropriate: 8
Freespace: 7

My review is that this is a fantastic game.

That will generate this Svelte component in your Markdown:

---
published: true
title: 'A chart'
---

<script>
import Radar from '../lib/Radar.svelte';
</script>

<div class="chart">
<Radar 
    xKey={ ['Intrinsic Motivation', 'Self-confidence', 'Teamwork', 'Age Appropriate', 'Freespace'] }
    data={[{
    fastball: 10,
                'Intrinsic Motivation': 9,
                'Self-confidence': 9,
                'Teamwork': 7,
               'Age Appropriate': 8,
 'Freespace': 7
    }]}/>
</div>

<style>
.chart {
  min-height: 200px;
  height: 200px;
  width: 100%;
  display: flex;
}
</style>

This renders as:

chart

Edited by Chris Dawson

Merge request reports