Documentation Show/hide

const token = ''; // Authentication token to gain access to frontgate
const fdsContainer = new FdsComponents('#fdsg-container');
const idNotation = 161766; // daimler
const mdg2Client = fdsContainer.createMdg2Client(token);
const orders = [{
    time: new Date('2021-03-31 14:00:00'),
    price: 75,
    number: 'ORD1',
    type: 'SELL',
    instrumentName: 'Daimler AG',
    wknIsin: 'DE0007100000',
    exchange: 'FRA',
    amount: 200,
    limit: 70,
    limitType: 'PRICE',
    orderAddition: '',
    orderStatus: 'EXECUTED',
    validity: 'Yes',
}];
const props = {
    mdg2Client,
    idNotation,
    id: 0,
    spans: ['intraday', '5d', '10d', '1m', '3m', '6m', '1y', '3y', '5y', '10y', 'max'],
    periods: ['1m', '5m', '10m', '15m', '30m', '1h', '1d', '1w', '30d'],
    showPreviousDayQuote: false,
    isColorblindMode: true,
    news: [{ time: new Date(), id: 0, headline: 'this is not real data' }],
    orders: orders,
};
await mdg2Client.connect();
await fdsContainer.init(props, {
    'onLayoutChanged': (layout) => console.log(layout),
    'onBenchmarksChanged': (benchmarks) => console.log(benchmarks),
    'ready': () => console.log('chart is ready'),
    'benchmark-edit-start': () => console.log('benchmark edit called'),
    'benchmark-add-click': (event) => console.log('add value clicked'),
});

// Props are reactive and can be manipulated later on, for example to turn off color blind mode
props.isColorblindMode = false;
            

fdsContainer.setLanguage('de');
            

const chart = fdsContainer.getChart();

// Export the chart as PNG
const image = await chart.exportPng();

// Add, edit and remove a benchmark
chart.addBenchmark('20735', 'red');
chart.editBenchmark('20735', 'blue');
// Edit benchmark and set line width to 20px
chart.editBenchmark('20735', 'blue', 20);
chart.removeBenchmark('20735');

// Add and remove a custom limit with an icon
const id = 'custom-limit-1';
const price = 202.12;
const color = 'blue'; // or #0000ff
const icon = new Image();
// The image must be available in the same host so that it can show up in the PNG export
icon.src = '/locally-available.png';
chart.addLimit(id, price, color, icon);
chart.removeLimit(id);

// The icon is optional, so the following is possible as well
chart.addLimit('other-id', 12.99, 'blue');

// Set the date range to display
chart.setRange(new Date('2021-01-10'), new Date('2021-01-13'));

// Enable markers
chart.enableNews();
chart.enableDividends();
chart.enableCompanyEvents();
chart.enableOrders();

// Disable markers
chart.disableNews();
chart.disableDividends();
chart.disableCompanyEvents();
chart.disableOrders();

// Import Layout
// The layout can be obtained from the onLayoutChanged event listener
const layout = {}; // You want to use the layout given to you by the chart here
chart.importLayout(layout);

// Studies
const study = chart.addStudy('ATX');
chart.removeStudy(study);

// Selects
chart.hideAllSelects();

// Set span to 1 month
chart.setSpan('1m');

// Set chart scale to percent
chart.setChartScale('percent');