https://github.com/koaning/justcharts

Just charts. Really.
https://github.com/koaning/justcharts

Last synced: 15 days ago
JSON representation

Just charts. Really.

• Host: GitHub
• URL: https://github.com/koaning/justcharts
• Owner: koaning
• Created: 2021-04-04T14:49:14.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-09-03T10:10:50.000Z (about 1 year ago)
• Last Synced: 2024-10-03T10:34:35.370Z (about 1 month ago)
• Language: HTML
• Homepage: https://calmcode.io/labs/justcharts.html
• Size: 39.1 KB
• Stars: 21
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-vega - justcharts - Vega-Lite charts in an HTML file. (Vega and Vega-Lite / Packages)

README

        


# justcharts

> Just charts. Really.

The goal of this project is to make it incredibly easy to hack together a [vegalite](https://vega.github.io/vega-lite/) dashboard declaratively. The goal is that anything made in the [vegalite editor](https://vega.github.io/editor/#/) can be copied into a static file with ease.

## include 

You can use [jsDelivr](https://www.jsdelivr.com/?docs=gh) to deliver the `justcharts.js` file via CDN. Note

that you'll also need to have some vega dependencies around.

```html

```

## usage

There are two main ways you can create just charts. 

### schema 

You can create a vega based chart directly in html. 

```html

```

### inline 

Alternatively, you can also declare the vegalite-json definition inline in the `vegachart` component. 

```html

    {

        "data":{

            "url": "https://cdn.jsdelivr.net/gh/koaning/justcharts/bigmac.csv",

            "format": {

                "type": "csv"

            }

        },

        "mark": "line",

        "encoding": {

            "x": {"field": "date", "type": "temporal"},

            "y": {"field": "local_price", "type": "quantitative"},

            "color": {"field": "currency_code", "type": "nominal"}

        },

        "width": "container",

        "title": "hello there"

    }

```

Note the `"width":"container"` setting. By doing this you're able to set the width/height of the chart directly from the `` html-style property. This is great for containers with relative widths.

## demo 

You can find a demo [here](https://koaning.github.io/justcharts/).