Next gen
charting library

import { ema } from '@chart-on/ta'; const regime: IndicatorDef<{ length: number }> = {  id: 'trend-regime',  name: 'Trend regime',  placement: 'overlay',  inputs: [{ id: 'length', type: 'number', default: 21, min: 2 }],  plots: [    // Each bar takes a palette colour from the 'trend' output.    { id: 'avg', type: 'line', lineWidth: 2, palette: ['#22a06b', '#e5484d', '#8b93a7'], colorOutput: 'trend', lastValueLabel: false },    { id: 'tint', type: 'background', palette: ['rgba(34, 160, 107, 0.08)', 'rgba(229, 72, 77, 0.08)'] },  ],  compute(src, { length }) {    const avg = ema(src.close, length);    // 0 rising, 1 falling, 2 flat (also the first 8 bars): the change over 8 bars against 0.6% of the price.    const trend = avg.map((v, i) => {      const change = (v - avg[i - 8]) / v;      return Number.isNaN(change) || Math.abs(change) < 0.006 ? 2 : Number(change < 0);    });    return { avg, trend, tint: trend };  },}; chart.indicators.add(regime);

// Your users' fills, at the price they traded.chart.annotations.setMarkers([  { time: buy.time, shape: 'label', position: 'atPrice', price: buy.price, color: '#3d8bd9', text: 'Buy 2', tooltip: 'Bought 2' },  { time: sell.time, shape: 'label', position: 'atPrice', price: sell.price, color: '#f5a524', text: 'Sell 1', tooltip: 'Sold 1' },]); // The open position's levels, labelled on the price axis.chart.annotations.addPriceLine({ price: buy.price, title: 'Entry', color: '#3d8bd9' });chart.annotations.addPriceLine({ price: stop, title: 'Stop', color: '#e5484d', lineStyle: 'dashed' });chart.annotations.addPriceLine({ price: target, title: 'Target', color: '#22a06b', lineStyle: 'dashed' });

// A range your own code found, boxed between its first and last bar.chart.annotations.addPriceZone({  from: range.low,  to: range.high,  fromTime: range.start,  toTime: range.end,  color: 'rgba(61, 139, 217, 0.12)',  label: 'Range',}); // An event window: the two days after earnings, shaded below the candles.chart.annotations.addTimeBand({ from: earnings, to: earnings + 47 * HOUR, label: 'Earnings' });

const bubbles: CustomSeriesDef<{ time: number; price: number; size: number; up: boolean }> = {  type: 'bubbles',  priceRange: (p) => [p.price, p.price],  // Plain Canvas 2D, with the chart's scales and theme.  draw(ctx, view) {    for (const { item, x } of view.items) {      ctx.beginPath();      ctx.arc(x, view.priceToY(item.price), 3 + 9 * item.size, 0, Math.PI * 2);      ctx.fillStyle = withAlpha(item.up ? view.theme.up : view.theme.down, 0.3);      ctx.fill();    }  },}; // Volume spikes: the top tenth of bars by volume.chart.addCustomSeries(bubbles, { title: 'Volume spikes' }).setData(  spikes.map((b) => ({ time: b.time, price: b.close, size: Math.sqrt(b.volume / maxVolume), up: b.close >= b.open })),);

// Only the keys you pass change; custom series read them from view.theme.chart.applyOptions({  theme: {    background: '#0f1729',    grid: '#1b2640',    text: '#c3cde6',    textMuted: '#7b88a8',    up: '#2dd4bf',    down: '#f472b6',  },});