Back to labs main.

Calmcode Labs Presents

justcharts logojustcharts.

Just get that chart in your HTML.

You should see a chart being rendered below.

{ "data":{ "url": "", "format": { "type": "csv" } }, "mark": "line", "encoding": { "x": {"field": "date", "type": "temporal"}, "y": {"field": "dollar_price", "type": "quantitative"}, "color": {"field": "currency_code", "type": "nominal"} }, "width": "container", "title": "this is a simple demo" }

It is generated with the following code:

<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>

<vegachart style="width: 100%">
            "url": "",
            "format": {
                "type": "csv"
        "mark": "line",
        "encoding": {
            "x": {"field": "date", "type": "temporal"},
            "y": {"field": "dollar_price", "type": "quantitative"},
            "color": {"field": "currency_code", "type": "nominal"}
        "width": "container",
        "title": "this is a simple demo"

The <vegachart> element is generated by a small library called justcharts.js. You can give it a json object as contents and the <vegachart> element will parse it to create a vegalite chart. You can learn more about the vegalite json specification on the documentation page but you can also explore it interactively.

Note that you can also use the .to_json() output from altair to generate the json for these chart elements.

It's meant to make it easy to hack together html-dashboards. It doesn't need a build tool in node, it merely needs an html file. This is great when you want to rapid prototype a dashboard or if you want to make a public dashboard with github pages.

If you're interested to learn more, feel free to check out the github repository.

Back to labs main.