Code in

ATON Charts quickstart

A live chart on your page in two steps.

1. Serve a feed

Answer a GET request with the feed as JSON. The address can name the market and timeframe with {symbol} and {frame}; the chart fills them in, encoded.

2. Put the chart on your page

Each version lives at its own address and never changes, so you can pin it and add its integrity hash (published beside it as SHA384). /sdk/latest/ always points at the newest.

data-mode="terminal" shows the tool bar (timeframes, drawing tools, indicators, layouts, replay, grid). Leave it out for the chart alone.

data-key is your site's embed key from the ATON Charts page of this portal, once you hold a Business licence. The chart checks it with us when it loads, against your page's own address, so the key works only on the site it was bought for. Without a key, or on another site, the chart runs on the free plan.

The chart asks your address without cookies, only over https (http works on localhost while you build), and ignores any reply that is not a feed.

html

<div data-aton-chart-embed
     data-key="ack_your_embed_key_from_the_portal"
     data-feed="https://api.example.com/chart?symbol={symbol}&frame={frame}"
     data-symbol="BTCUSDT"
     data-mode="terminal"
     data-theme="system"
     data-refresh="5"
     style="height: 520px"></div>
<script src="https://charts.aton-network.org/sdk/0.2.0/aton-charts.min.js" defer crossorigin="anonymous"></script>

From your own code

const chart = new AtonCharts.Chart(document.querySelector("#chart"), { theme: "dark" });
chart.setFeed(feed);                       // as often as it comes; zoom and pan are kept
chart.setTick({ t: Date.now(), price: 67180.2 });
chart.setStudies([{ key: "rsi", id: "rsi", params: { length: 14 } }]);
chart.setTool("trend");                    // the next two clicks draw a trend line
chart.destroy();                           // gives back every listener and the GPU context

In React

tsx

import { AtonChart } from "@atheron/aton-charts/react";

export function Position({ feed }) {
  return <div style={{ height: 520 }}><AtonChart feed={feed} theme="system" /></div>;
}

Ask Atlas

AI assistant

Ask anything about Sign in with Atheron, the API or the portal. You get an answer from our docs, with links to the pages it used.