Skip to main content
Skip to main content

Let's play with Exeria charts

Tune colors, switch themes, and explore the live chart—updates apply instantly.

  1. Choose the preset colors

  2. Switch between light and dark

  3. Customize your chart

    Chart element

    Canvas and axis background behind candles and indicators.

  4. Play with the chart

    Add indicators, try drawing tools, and open full-screen mode from the toolbar. Then scroll to Use this chart in your app below to copy the code.

Loading chart preview…

Use this chart in your app

You do not need to understand every line below. Tune the chart above, then copy the code into your own project.

Install the packages

Open your terminal, go to your project folder, and run this command. You need Node.js 18+.

npm install @efixdata/exeria-chart @efixdata/exeria-chart-ui-react

Copy the theme code

This matches the colors you picked in the panel on the left. Start with Full example if you are new to coding.

Best place to start. Copy this into a new React file after you install the packages.

import { createChart } from "@efixdata/exeria-chart";
import { ChartUI } from "@efixdata/exeria-chart-ui-react";

const runtimeTheme = {
  "colors": {
    "accent": {
      "dark": "#D97706",
      "light": "#b66b13"
    },
    "primaryTextColor": {
      "dark": "#FFFFFF",
      "light": "#08111B"
    },
    "disabledTextColor": {
      "dark": "rgba(255, 255, 255, 0.52)",
      "light": "rgba(8, 17, 27, 0.42)"
    },
    "handlerColor": {
      "dark": "rgba(203, 213, 225, 0.16)",
      "light": "rgba(80, 95, 113, 0.12)"
    },
    "iconColor": {
      "dark": "#D97706",
      "light": "#08111B"
    },
    "backgroundColor": {
      "dark": "#1E222D",
      "light": "#eceff3"
    },
    "timeAxisBackground": {
      "dark": "#1E222D",
      "light": "#eceff3"
    },
    "priceAxisBackground": {
      "dark": "#1E222D",
      "light": "#eceff3"
    },
    "timeAxisTextColor": {
      "dark": "#CBD5E1",
      "light": "#505f71"
    },
    "priceAxisTextColor": {
      "dark": "#CBD5E1",
      "light": "#505f71"
    },
    "gridColor": {
      "dark": "#253558",
      "light": "#d8dbe1"
    },
    "chartZeroColor": {
      "dark": "#D97706",
      "light": "#b66b13"
    },
    "chartRed": {
      "dark": "#B91C1C",
      "light": "#b21c1f"
    },
    "chartGreen": {
      "dark": "#2E7D52",
      "light": "#29764d"
    },
    "chartGreenBackground": {
      "dark": "#296046",
      "light": "#60987b"
    },
    "chartGray": {
      "dark": "#7d8490",
      "light": "#a1aab5"
    },
    "chartGrayPrimary": {
      "dark": "#9ba3af",
      "light": "#8b96a2"
    },
    "chartRedStroke": {
      "dark": "#B91C1C",
      "light": "#f2d6d6"
    },
    "chartGreenStroke": {
      "dark": "#2E7D52",
      "light": "#d9e8e0"
    },
    "chartFill": {
      "dark": "rgba(217, 119, 6, 0.22)",
      "light": "rgba(182, 107, 19, 0.14)"
    },
    "chartStroke": {
      "dark": "#D97706",
      "light": "#b66b13"
    },
    "buyColor": {
      "dark": "#2E7D52",
      "light": "#29764d"
    },
    "sellColor": {
      "dark": "#B91C1C",
      "light": "#b21c1f"
    },
    "exitAllColor": {
      "dark": "#7d8490",
      "light": "#a1aab5"
    },
    "defaultToolColor": {
      "dark": "#D97706",
      "light": "#7d5f3c"
    },
    "defaultToolTextColor": {
      "dark": "#FFFFFF",
      "light": "#FFFFFF"
    },
    "crosshairColor": {
      "dark": "#D97706",
      "light": "#976126"
    },
    "crosshairTextColor": {
      "dark": "#FFFFFF",
      "light": "#FFFFFF"
    },
    "crosshairInnerColor": {
      "dark": "#1E222D",
      "light": "#eceff3"
    },
    "crosshairInnerTextColor": {
      "dark": "#FFFFFF",
      "light": "#08111B"
    },
    "tipBackground": {
      "dark": "#403126",
      "light": "#e4e1df"
    },
    "tipTextColor": {
      "dark": "#FFFFFF",
      "light": "#08111B"
    },
    "tipUnderline": {
      "dark": "rgba(255, 255, 255, 0.12)",
      "light": "rgba(8, 17, 27, 0.12)"
    },
    "indicatorMarker": {
      "dark": "#24314f",
      "light": "#dee1e7"
    },
    "hitColor": {
      "dark": "rgba(255, 255, 255, 0.72)",
      "light": "rgba(8, 17, 27, 0.54)"
    },
    "darkTextColor": {
      "dark": "#08111B",
      "light": "#08111B"
    },
    "overlay": {
      "dark": "#7d8490",
      "light": "#a1aab5"
    },
    "legendLabelColor": {
      "dark": "rgba(255, 255, 255, 0.72)",
      "light": "rgba(8, 17, 27, 0.62)"
    },
    "legendValueColor": {
      "dark": "#FFFFFF",
      "light": "#08111B"
    },
    "legendLineBackground": {
      "dark": "transparent",
      "light": "transparent"
    },
    "fibonacciRetracementLine": {
      "dark": "rgba(255, 255, 255, 0.12)",
      "light": "rgba(8, 17, 27, 0.08)"
    }
  },
  "fonts": {
    "title": {
      "dark": "600 12px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "600 12px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "text": {
      "dark": "11px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "11px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "price": {
      "dark": "600 12px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "600 12px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "priceSubscript": {
      "dark": "600 10px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "600 10px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "time": {
      "dark": "600 11px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "600 11px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "legend": {
      "dark": "12px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "12px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "legendSubscript": {
      "dark": "10px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "10px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "fontName": {
      "dark": "Inter",
      "light": "Inter"
    }
  }
};

const uiThemes = {
  "dark": {
    "surroundBackground": "#1A1E28",
    "gap": 8,
    "accentColor": "#D97706",
    "border": {
      "inner": "1px solid #334155",
      "radius": 8
    },
    "buttons": {
      "color": "#7B8A9A",
      "activeColor": "#FFFFFF",
      "hoverColor": "#CBD5E1",
      "hoverBackground": "rgba(255, 255, 255, 0.12)",
      "activeBackground": "#262B36"
    },
    "radioButton": {
      "background": "rgba(255, 255, 255, 0.06)",
      "buttons": {
        "color": "#7B8A9A",
        "activeColor": "#FFFFFF",
        "hoverColor": "#CBD5E1",
        "hoverBackground": "rgba(255, 255, 255, 0.12)",
        "activeBackground": "#262B36"
      }
    },
    "toolbar": {
      "background": "#1A1E28",
      "buttons": {
        "color": "#7B8A9A",
        "activeColor": "#FFFFFF",
        "hoverColor": "#CBD5E1",
        "hoverBackground": "rgba(255, 255, 255, 0.12)",
        "activeBackground": "#262B36"
      },
      "topMenuPosition": "right",
      "showCurrency": false
    },
    "subMenu": {
      "background": "#1E222D",
      "buttons": {
        "color": "#7B8A9A",
        "activeColor": "#FFFFFF",
        "hoverColor": "#CBD5E1",
        "hoverBackground": "rgba(255, 255, 255, 0.12)",
        "activeBackground": "#262B36"
      }
    },
    "splitButton": {
      "openBackground": "#1E222D",
      "hoverBackground": "#1E222D",
      "openColor": "#CBD5E1",
      "hoverColor": "#CBD5E1",
      "arrowHoverBackground": "rgba(255, 255, 255, 0.08)",
      "arrowColor": "#7B8A9A",
      "arrowOpenColor": "#CBD5E1"
    },
    "dialog": {
      "backgroundColor": "#1E222D",
      "titleColor": "#CBD5E1",
      "textColor": "#CBD5E1",
      "dividerColor": "rgba(255, 255, 255, 0.12)",
      "itemTitleColor": "#CBD5E1",
      "itemSubTitleColor": "#7B8A9A",
      "itemHoverBackgroundColor": "rgba(255, 255, 255, 0.08)"
    },
    "inputs": {
      "backgroundColor": "#262B36",
      "textColor": "#CBD5E1",
      "labelColor": "#CBD5E1",
      "placeholderColor": "#7B8A9A"
    },
    "scrollBar": {
      "trackColor": "rgba(255, 255, 255, 0.08)",
      "thumbColor": "rgba(255, 255, 255, 0.22)",
      "thumbHoverColor": "rgba(255, 255, 255, 0.34)"
    }
  },
  "light": {
    "surroundBackground": "#eceff2",
    "gap": 8,
    "accentColor": "#ba6c11",
    "border": {
      "inner": "1px solid #E0E3EB",
      "radius": 8
    },
    "buttons": {
      "color": "#5D718B",
      "activeColor": "#ba6c11",
      "hoverColor": "#162133",
      "hoverBackground": "rgba(19, 23, 34, 0.06)",
      "activeBackground": "rgba(186, 108, 17, 0.14)"
    },
    "radioButton": {
      "background": "rgba(19, 23, 34, 0.05)",
      "buttons": {
        "color": "#5D718B",
        "activeColor": "#ba6c11",
        "hoverColor": "#162133",
        "hoverBackground": "rgba(19, 23, 34, 0.06)",
        "activeBackground": "rgba(186, 108, 17, 0.14)"
      }
    },
    "toolbar": {
      "background": "#eceff2",
      "buttons": {
        "color": "#5D718B",
        "activeColor": "#ba6c11",
        "hoverColor": "#162133",
        "hoverBackground": "rgba(19, 23, 34, 0.06)",
        "activeBackground": "rgba(186, 108, 17, 0.14)"
      },
      "topMenuPosition": "right",
      "showCurrency": false
    },
    "subMenu": {
      "background": "#eff0f0",
      "buttons": {
        "color": "#5D718B",
        "activeColor": "#ba6c11",
        "hoverColor": "#162133",
        "hoverBackground": "rgba(19, 23, 34, 0.06)",
        "activeBackground": "rgba(186, 108, 17, 0.14)"
      }
    },
    "splitButton": {
      "openBackground": "#eff0f0",
      "hoverBackground": "#eff0f0",
      "openColor": "#162133",
      "hoverColor": "#162133",
      "arrowHoverBackground": "rgba(19, 23, 34, 0.06)",
      "arrowColor": "#5D718B",
      "arrowOpenColor": "#162133"
    },
    "dialog": {
      "backgroundColor": "#eff0f0",
      "titleColor": "#162133",
      "textColor": "#162133",
      "dividerColor": "rgba(19, 23, 34, 0.12)",
      "itemTitleColor": "#162133",
      "itemSubTitleColor": "#5D718B",
      "itemHoverBackgroundColor": "rgba(19, 23, 34, 0.06)"
    },
    "inputs": {
      "backgroundColor": "#e5e6e7",
      "textColor": "#162133",
      "labelColor": "#162133",
      "placeholderColor": "#5D718B"
    },
    "scrollBar": {
      "trackColor": "rgba(19, 23, 34, 0.06)",
      "thumbColor": "rgba(19, 23, 34, 0.18)",
      "thumbHoverColor": "rgba(19, 23, 34, 0.32)"
    }
  }
};

const themeVariant = "dark";
const uiTheme = uiThemes[themeVariant];

const interval = {
  "symbol": "1h",
  "milis": 3600000
};

const chart = createChart({
  container,
  instrument,
  theme: runtimeTheme,
  themeVariant,
});

chart.init();
await chart.setMainSeriesData(candles, interval);

<ChartUI chart={chart} theme={uiTheme}>
  <div ref={containerRef} />
</ChartUI>;

Match what is on your chart

Add indicators or switch to line mode in the chart toolbar. The code below updates automatically so you can copy the same setup into your app.

On your chart now: Loading…

// Chart is still loading…

Where to go next

The playground is for trying things out. When you are ready to build a real app, pick one of these pages.

Vanilla quickstartNo React yet? Start with a plain HTML page.Custom theme tutorialStep-by-step guide for colors and light/dark mode.Crypto terminal starterDownload a full app with live prices and a trade panel.Chart API referenceLook up every chart method when you need details.

Examples and ideas

Nine distinct chart setups — indexed compares, strategy stacks, news markers, and trading terminals. Click a card to load it into the live chart above.