Standard Graphs

Prerequisites

• All charts are located in src/lib/components/charts/.
• Each standalone chart has its own folder, src/lib/components/charts/custom/ChartXY
  • Country-specific charts are loaded via the environment variable from index.svelte.

Standard charts are:

• chartBar.svelte
• chartDots.svelte
• chartLine.svelte

Parameters

Bar Chart

• data
• sort = ''
• source = ''
• label = ''
• lines = []
• visualisation = 'standard' (default: 'standard', 'stacked', 'grouped')
• xAxixInterval = 1
• unit = ''
• show0ValuesInLegend = false
• freezeYAxis = false

Dots Chart

• data
• radius = 5
• colors = ['#313695', '#a50026']
• unit = ''
• yLabel = ''

Line/Area Chart

• data
• keys = []
• labels = []
• visualisation (default: not stacked, 'stacked')
• colors
• showLegend = true
• unit = ''
• showAreas = false
• showDots = false
• showTotal = true
• lineWidth = 3
• circleRadius = 5
• marginLeft = 20
• xTicksInterval = 10
• minValue = 0

Usage

<script>
    import LineChart from '../chartLine.svelte';

    const keys   = ['energy', 'industry', 'agriculture'];
    const labels = ['Energie', 'Industrie', 'Landwirtschaft'];
    const colors = ['#BD3737', '#373949', '#65987D'];

    $: dataset = rawData?.map((entry, i) => {
        return {
            x: i,
            label: entry.year,
            energy:      25,
            industry:    70,
            agriculture: 5,
        };
    });
</script>

{#if dataset.length > 0}
    <LineChart
       showAreas={true}
       data={dataset}
       {keys}
       {labels}
       {colors}
       lineWidth="2"
       xTicksInterval={chartWidth > 600 ? 10 : 50}
       visualisation="stacked"
       unit=" Mio t CO2eq"
    />
{/if}