Proactive IR Tools

Proactive Charts

One custom element, <proactive-charts>, loads historical price + volume and draws with Apache ECharts, TradingView Lightweight Charts, Highcharts Stock, or amCharts 5 — pick via chart-engine.

All live charts below use the same Morningstar-style feed: provider="morningstar", exchange="6" (Morningstar only), symbol="III", currency="CA$". Set VITE_MORNINGSTAR_ENDPOINT and VITE_MORNINGSTAR_TOKEN in .env (see .env.example).

Documentation

Full setup, providers, standalone CDN build, styling, and API: README.md in the repository.

Quick start

  1. npm install
  2. cp .env.example .env — add provider host + token (Morningstar, QuoteMedia, Yahoo).
  3. npm run dev — open the URL Vite prints.

Standalone bundle for other sites: npm run build:standalone → dist-standalone/. Ship every proactive-charts*.js file together; load proactive-charts.min.js or proactive-charts.js (same entry). npm run build:standalone:single for one large file.

chart-engine values

echarts
Apache ECharts (default). Range pills + data zoom.
tradingview
TradingView Lightweight Charts (canvas). Range pills.
highcharts
Highcharts Stock — navigator + range selector (pill strip hidden).
amcharts
amCharts 5 XY — line + volume columns; range pills.

Optional chart-display="candlestick" for OHLC candles (ECharts example below; other engines support it too).

Production CDN

Include this before any <proactive-charts> on the page. Self-hosted builds must publish every proactive-charts*.js chunk beside the entry script. 

<script src="https://cdn.proactivedigital.solutions/lib/proactive-charts/proactive-charts.min.js" type="module"></script>

Common attributes (Morningstar demos)

Attribute Role
providermorningstar — historical JSON API.
exchangeMorningstar exchange code only (6 in demos below). Omit for Yahoo / QuoteMedia / demo.
history-yearsYahoo only — years in API path (default 1).
history-rangeQuoteMedia only — history span in API path (default 5).
symbolTicker (III here).
chart-engineecharts | tradingview | highcharts | amcharts
chart-displayOptional candlestick for OHLC candles.
currencyAxis / tooltip prefix (CA$).
linestroke / linefill / barfillPrice line and volume colours.
text-colorChart label text (axes, title). Use with dark fills.
rangeselector-fill / rangeselector-colorHighcharts range button bg / fg (inactive).
navigator-label-shadow-enable / -color / -sizeHighcharts navigator bottom date label outline (disable, color, px size).
heightChart height (px).
axis-x-font-sizeOptional date/time axis tick size in px (e.g. 10).
axis-y-font-sizeOptional price/volume axis tick size in px (e.g. 13).
range-switcher-enablePill ranges; use false with Highcharts (built-in controls).

Live examples

Morningstar charts share one series; colours differ per engine. Optional axis-x-font-size / axis-y-font-size control tick label size on all engines (see axis font demo). A separate Yahoo Finance example uses the v3 historical API. Expand HTML snippet to copy markup.

chart-engine="echarts"

Apache ECharts

Default engine — dual pane, range pills, brush zoom.

HTML snippet 
<script src="https://cdn.proactivedigital.solutions/lib/proactive-charts/proactive-charts.min.js" type="module"></script>

<proactive-charts
  chart-engine="echarts"
  provider="morningstar"
  exchange="6"
  symbol="III"
  currency="CA$"
  title="ECharts · III @ 6"
  subtitle="GET …/v1/historical/6/III/ · Morningstar"
  linestroke="#15803d"
  linefill="#22c55e"
  barfill="#16a34a"
  height="400"
  axis-x-font-size="10"
  axis-y-font-size="12"
  default-range="1y"
  range-switcher-enable="true"
  rangeselector-enable="false"
  navigator-enable="true"
  showcredit="false"
  volumelabel="Volume"
  bgcolor="white"
></proactive-charts>

chart-engine="tradingview"

TradingView Lightweight Charts

Canvas chart — same Morningstar data as the others.

HTML snippet 
<script src="https://cdn.proactivedigital.solutions/lib/proactive-charts/proactive-charts.min.js" type="module"></script>

<proactive-charts
  chart-engine="tradingview"
  provider="morningstar"
  exchange="6"
  symbol="III"
  currency="CA$"
  title="Lightweight Charts · III @ 6"
  subtitle="GET …/v1/historical/6/III/ · Morningstar"
  linestroke="#0369a1"
  linefill="#38bdf8"
  barfill="#64748b"
  height="400"
  default-range="1y"
  range-switcher-enable="true"
  rangeselector-enable="false"
  navigator-enable="false"
  showcredit="false"
  volumelabel="Volume"
  bgcolor="white"
></proactive-charts>

chart-engine="highcharts"

Highcharts Stock

Navigator + range selector — pill range UI is off for this engine.

HTML snippet 
<script src="https://cdn.proactivedigital.solutions/lib/proactive-charts/proactive-charts.min.js" type="module"></script>

<proactive-charts
  chart-engine="highcharts"
  provider="morningstar"
  exchange="6"
  symbol="III"
  currency="CA$"
  title="Highcharts Stock · III @ 6"
  subtitle="GET …/v1/historical/6/III/ · Morningstar"
  linestroke="#c2410c"
  linefill="#fed7aa"
  text-color="#334155"
  rangeselector-fill="#ffffff"
  rangeselector-color="#c2410c"
  rangeselector-active-fill="#c2410c"
  rangeselector-active-color="#ffffff"
  barfill="#f97316"
  height="400"
  default-range="1y"
  range-switcher-enable="false"
  rangeselector-enable="true"
  rangeselector-selected="4"
  navigator-enable="true"
  showcredit="false"
  volumelabel="Volume"
  bgcolor="white"
></proactive-charts>

chart-engine="amcharts"

amCharts 5

@amcharts/amcharts5 — line + column volume.

HTML snippet 
<script src="https://cdn.proactivedigital.solutions/lib/proactive-charts/proactive-charts.min.js" type="module"></script>

<proactive-charts
  chart-engine="amcharts"
  provider="morningstar"
  exchange="6"
  symbol="III"
  currency="CA$"
  title="amCharts 5 · III @ 6"
  subtitle="GET …/v1/historical/6/III/ · Morningstar"
  linestroke="#6b21a8"
  linefill="#c084fc"
  barfill="#9333ea"
  height="400"
  default-range="1y"
  range-switcher-enable="true"
  rangeselector-enable="false"
  navigator-enable="false"
  showcredit="false"
  volumelabel="Volume"
  bgcolor="white"
></proactive-charts>

axis-x-font-size · axis-y-font-size

Axis tick label sizes

Optional px sizes for date (X) and value (Y) ticks. ECharts and amCharts below use 9 / 15 so the difference is easy to spot. chart-engine="tradingview" shares one layout.fontSize (Y wins when both are set).

ECharts — axis-x="9" axis-y="15"

amCharts — axis-x="9" axis-y="15"

HTML snippet 
<proactive-charts
  chart-engine="echarts"
  provider="morningstar"
  exchange="6"
  symbol="III"
  axis-x-font-size="9"
  axis-y-font-size="15"
  title="Axis fonts · ECharts"
  height="360"
  ...
></proactive-charts>

chart-display="candlestick" · chart-engine="echarts"

Apache ECharts — candlestick

Same Morningstar payload; OHLC candles when history rows include open/high/low.

HTML snippet 
<script src="https://cdn.proactivedigital.solutions/lib/proactive-charts/proactive-charts.min.js" type="module"></script>

<proactive-charts
  chart-engine="echarts"
  chart-display="candlestick"
  provider="morningstar"
  exchange="6"
  symbol="III"
  currency="CA$"
  title="ECharts candlestick · III @ 6"
  subtitle="GET …/v1/historical/6/III/ · Morningstar"
  linestroke="#0d9488"
  linefill="#14b8a6"
  barfill="#0f766e"
  height="400"
  default-range="1y"
  range-switcher-enable="true"
  rangeselector-enable="false"
  navigator-enable="false"
  showcredit="false"
  volumelabel="Volume"
  bgcolor="white"
></proactive-charts>

provider="yahoo"

Yahoo Finance historical API

GET …/v3/yahoo/historical/{symbol}/show/{year} with X-AUTHTOKEN. Set VITE_YAHOO_ENDPOINT and VITE_YAHOO_TOKEN in .env. Optional history-years sets calendar years of history (default 1). No exchange attribute.

HTML snippet 
<script src="https://cdn.proactivedigital.solutions/lib/proactive-charts/proactive-charts.min.js" type="module"></script>

<proactive-charts
  chart-engine="echarts"
  provider="yahoo"
  symbol="MTIRF"
  history-years="5"
  currency="US$"
  title="Yahoo Finance · MTIRF"
  subtitle="GET …/v3/yahoo/historical/MTIRF/show/5 · Yahoo"
  linestroke="#be123c"
  linefill="#fb7185"
  barfill="#e11d48"
  height="400"
  default-range="1y"
  range-switcher-enable="true"
  rangeselector-enable="false"
  navigator-enable="true"
  showcredit="false"
  volumelabel="Volume"
  bgcolor="white"
></proactive-charts>

chrome="console" · chart-engine="echarts"

IR-style chart console

Dual-axis price + volume, markers (52w high/low), overlays, range presets, from/to, export, and reset — inspired by classic IR chart toolkits.

HTML snippet 
<script src="https://cdn.proactivedigital.solutions/lib/proactive-charts/proactive-charts.min.js" type="module"></script>

<proactive-charts
  chrome="console"
  chart-engine="echarts"
  provider="morningstar"
  exchange="6"
  symbol="III"
  currency="GBX "
  title="Share price & trade volume"
  linestroke="#702d6a"
  linefill="#a21caf"
  barfill="#1e3a8a"
  height="420"
  default-range="1y"
  range-options="1d,1w,1m,3m,6m,1y,all"
></proactive-charts>