Line Chart

Short Description

The Line Chart displays one or multiple data series as a line in a grid. An interactive guideline helps to read the exact value.

Example Code

<div class="plastic-js" style="height: 400px">

    <script class="plastic-data" type="application/json" data-url="/docs/_static/data/countriesComparison.json" data-format="sparql-json"></script>

    <script class="plastic-display" data-module="line-chart" type="application/json">
        {
            "useInteractiveGuideline": true
        }
    </script>

</div>

Live Example

Example Data

Link to the JSON file - click here.

Dependencies

Note

plastic.js manages the dependencies automatically. There is no need to include them manually, but you can do so if you want.

Available Options

This example snippet contains all available options with their default values:

<script class="plastic-display" data-module="line-chart" type="application/json>
    {
        "useInteractiveGuideline": true
        "transitionDuration": 350
        "showLegend": true
        "marginLeft": true
    }
</script>

Properties details:

Interactive Guideline

DescriptionShow the interactive Guideline.
KeyworduseInteractiveGuideline
Typeboolean
Defaulttrue
"useInteractiveGuideline": true

Transition Duration

DescriptionDuration of the animation in milliseconds.
KeywordtransitionDuration
Typenumber
Default350
"transitionDuration": 350

Display Legend

DescriptionShow the legend, allowing users to turn on/off line series.
KeywordshowLegend
Typeboolean
Defaulttrue
"showLegend": true

Left Margin

DescriptionAdjust chart margins to give the x-axis some breathing room.
KeywordmarginLeft
Typeboolean
Defaulttrue
"marginLeft": true