Skip to content

Customization

The ORTEX mark, on and off

What the mark looks like without a license, and what a paid key changes.

The ORTEX mark, on and off@ortex-charts/core
Loading the ortex mark, on and off…
What the mark looks like without a license, and what a paid key changes.

What this example is for

The ORTEX mark sits in the corner of the first pane until a licence with the whitelabel feature, which every paid plan carries, says otherwise. This example installs a key in the browser and the mark comes off, live. Reach for it when you want to see exactly what a paid licence changes before you buy one; the answer is this and nothing else.

branding.ts
import { clearLicense, createFinancialChart, hasFeature, licenseGate, licenseStatus, setLicenseKey } from "@ortex-charts/financial";

const options = { theme, timeZone: TIME_ZONE, resolution: "1D", volume: false, data: bars };

// Left: the default. Licensed, the mark is drawn in the corner.
const marked = createFinancialChart(columns[0].box, { ...options, branding: { visible: true } });
// Right: the same chart asking for the mark to be hidden, which the key
// on this page allows because it grants `whitelabel`.
const white = createFinancialChart(columns[1].box, { ...options, branding: { visible: false } });

/**
 * Installing a key. `setLicenseKey` checks the expiry and the domain
 * synchronously and the Ed25519 signature through WebCrypto, then resolves
 * with the final state; every chart on the page repaints itself. This is
 * the whole call: the key is issued for the domain the page is served
 * from, which is what your own application does too.
 */
async function install(): Promise<string> {
    const state = await setLicenseKey(DEMO_LICENSE_KEY);
    // `licenseGate().blocked` is false from here and both charts have
    // already repainted: the right one without the mark.
    return `License ${state.state}${state.verified ? ", signature verified in the browser" : `: ${state.message}`}`;
}

/** Clearing it. On this host the gate closes: both charts paint the notice instead of their content. */
function clear(): string {
    clearLicense();
    const gate = licenseGate();
    return gate.blocked ? `No key set: the gate is closed (${gate.reason}), so neither chart draws.` : `No key set, but ${location.hostname} is a development host: the charts draw with the mark on.`;
}

More customization examples