Bar Chart

Short Description

The Bar Chart Display Module uses vertical bars to show comparisons among categories. Several options are available to customize the appearance of the chart.

Example Code

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

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

    <script class="plastic-display" data-module="discrete-bar-chart" type="application/json">
        {
            "staggerLabels": false,
            "tooltips": false,
            "showValues": 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.

Possible Options

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

<script class="plastic-display" data-module="discrete-bar-chart" type="application/json>
    {
        "staggerLabels": false
        "tooltips": true
        "showValues": true
        "transitionDuration": 350
    }
</script>

Properties details:

Label Staggering

DescriptionToo many bars and not enough room? Try staggering labels.
KeywordstaggerLabels
Typeboolean
"staggerLabels": false

Tooltips

DescriptionShow tooltips
Keywordtooltips
Typeboolean
Defaulttrue
"tooltips": true

Display Values

DescriptionShow the bar value right on top of each bar.
KeywordshowValues
Typeboolean
Defaulttrue
"showValues": true

Transition Duration

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