---
source_url: https://www.pubnub.com/docs/sdks/eon-chart
title: EON Chart API & SDK Docs 1.1.0
updated_at: 2026-05-22T11:06:29.760Z
---

> Documentation Index
> For a curated overview of PubNub documentation, see: https://www.pubnub.com/docs/llms.txt
> For the full list of all documentation pages, see: https://www.pubnub.com/docs/llms-full.txt


# EON Chart API & SDK Docs 1.1.0

:::warning Unsupported SDK
PubNub no longer supports this SDK.
Use the [JavaScript SDK](https://www.pubnub.com/docs/sdks/javascript) with modern charting libraries like [Chart.js](https://www.chartjs.org/), [Recharts](https://recharts.org/) (React), [Apache ECharts](https://echarts.apache.org/), or [D3.js](https://d3js.org/). Subscribe to PubNub channels and update your charts in real-time using the SDK's message listeners.
:::

## Get code

### Hotlink

```html
<script src="https://pubnub.github.io/eon/v/eon/1.1.0/eon.js"></script>
<link rel="stylesheet" href="https://pubnub.github.io/eon/v/eon/1.1.0/eon.css"/>
```

### Bower

:::warning Bower Deprecated
Bower has been deprecated since 2017. Use npm instead for new projects.
:::

```bash
bower install eon-chart --save
```

### NPM

```bash
npm install eon-chart --save
```

Check out our [webpack example](https://github.com/pubnub/eon-chart-webpack).

## Hello World

Plug your normal C3 config into the `generate` param. Supply an array of PubNub channels in the `channels` param. `eon.chart` returns the normal C3 chart object.

:::note Required UUID
Always set the `UUID` to uniquely identify the user or device that connects to PubNub. This `UUID` should be persisted, and should remain unchanged for the lifetime of the user or the device. If you don't set the `UUID`, you won't be able to connect to PubNub.
:::

```html
<div data-id="chart"></div>
<script>
    let pubnub = new PubNub({
        publishKey:   'demo', // replace with your own pub-key
        subscribeKey: 'demo' // replace with your own sub-key
    });

    eon.chart({
        pubnub: pubnub,
        channels: ["c3-spline"],
        generate: {
            bindto: '#chart',
            data: {
                labels: true
            }
        }
    });
</script>
```

That's it! Now you can publish messages to the same `channel` and they'll render in the graph.

### Example

:::note Required UUID
Always set the `UUID` to uniquely identify the user or device that connects to PubNub. This `UUID` should be persisted, and should remain unchanged for the lifetime of the user or the device. If you don't set the `UUID`, you won't be able to connect to PubNub.
:::

```javascript
let pubnub = new PubNub({
    publishKey:   'demo', // replace with your own pub-key
    subscribeKey: 'demo' // replace with your own sub-key
});

setInterval(function(){
    pubnub.publish({
        channel: 'c3-spline',
        message: {
            eon: {
                'Austin': Math.floor(Math.random() * 99),
                'New York': Math.floor(Math.random() * 99),
                'San Francisco': Math.floor(Math.random() * 99),
                'Portland': Math.floor(Math.random() * 99)
            }
        }
    });

}, 1000);
```

All chart data must exist within an object called `eon`. Also notice how the `channel` and `channels` match in both examples.