/ Widgets / Charts / Advanced Chart / Demos / Basic area chart

Basic area chart

If you just want to have a basic financial chart for the general user, it makes sense not to overload the widget with extra options. You may also want to make it an Area chart, which is the most basic charting type - and looks great without taking up too much space. If it’s still too much, take a look at our Market Overview and Symbol Overview widgets.

Embed code

HTML React 
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container" style="height:100%;width:100%">
    <div id="basic-area-chart-demo" style="height:calc(100% - 32px);width:100%"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
    <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
    <script type="text/javascript">
    new TradingView.widget(
    {
        "container_id": "basic-area-chart-demo",
        "width": "100%",
        "height": "100%",
        "autosize": true,
        "symbol": "AAPL",
        "interval": "D",
        "timezone": "exchange",
        "theme": "light",
        "style": "3",
        "hide_top_toolbar": true,
        "save_image": false,
        "locale": "en"
    }
    );
    </script>
</div>
<!-- TradingView Widget END -->
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container" style="height:100%;width:100%">
    <div id="basic-area-chart-demo" style="height:calc(100% - 32px);width:100%"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
    <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
    <script type="text/javascript">
    new TradingView.widget(
    {
        "container_id": "basic-area-chart-demo",
        "width": "100%",
        "height": "100%",
        "autosize": true,
        "symbol": "AAPL",
        "interval": "D",
        "timezone": "exchange",
        "theme": "light",
        "style": "3",
        "hide_top_toolbar": true,
        "save_image": false,
        "locale": "en"
    }
    );
    </script>
</div>
<!-- TradingView Widget END -->
// TradingViewWidget.jsx

import React, { useEffect, useRef } from 'react';

let tvScriptLoadingPromise;

export default function TradingViewWidget() {
const onLoadScriptRef = useRef();

useEffect(
() => {
    onLoadScriptRef.current = createWidget;

    if (!tvScriptLoadingPromise) {
    tvScriptLoadingPromise = new Promise((resolve) => {
        const script = document.createElement('script');
        script.id = 'tradingview-widget-loading-script';
        script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js';
        script.type = 'text/javascript';
        script.onload = resolve;

        document.head.appendChild(script);
    });
    }

    tvScriptLoadingPromise.then(() => onLoadScriptRef.current && onLoadScriptRef.current());

    return () => onLoadScriptRef.current = null;

    function createWidget() {
    if (document.getElementById('basic-area-chart-demo') && 'TradingView' in window) {
        new window.TradingView.widget({
        container_id: "basic-area-chart-demo",
        width: "100%",
        height: "100%",
        autosize: true,
        symbol: "AAPL",
        interval: "D",
        timezone: "exchange",
        theme: "light",
        style: "3",
        hide_top_toolbar: true,
        save_image: false,
        locale: "en"
        });
    }
    }
},
[]
);

return (
<div className='tradingview-widget-container' style={{ height: "100%", width: "100%" }}>
    <div id='basic-area-chart-demo' style={{ height: "calc(100% - 32px)", width: "100%" }} />
    <div className="tradingview-widget-copyright">
    <a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span className="blue-text">Track all markets on TradingView</span></a>
    </div>
</div>
);
}

// TradingViewWidget.jsx

import React, { useEffect, useRef } from 'react';

let tvScriptLoadingPromise;

export default function TradingViewWidget() {
const onLoadScriptRef = useRef();

useEffect(
() => {
    onLoadScriptRef.current = createWidget;

    if (!tvScriptLoadingPromise) {
    tvScriptLoadingPromise = new Promise((resolve) => {
        const script = document.createElement('script');
        script.id = 'tradingview-widget-loading-script';
        script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js';
        script.type = 'text/javascript';
        script.onload = resolve;

        document.head.appendChild(script);
    });
    }

    tvScriptLoadingPromise.then(() => onLoadScriptRef.current && onLoadScriptRef.current());

    return () => onLoadScriptRef.current = null;

    function createWidget() {
    if (document.getElementById('basic-area-chart-demo') && 'TradingView' in window) {
        new window.TradingView.widget({
        container_id: "basic-area-chart-demo",
        width: "100%",
        height: "100%",
        autosize: true,
        symbol: "AAPL",
        interval: "D",
        timezone: "exchange",
        theme: "light",
        style: "3",
        hide_top_toolbar: true,
        save_image: false,
        locale: "en"
        });
    }
    }
},
[]
);

return (
<div className='tradingview-widget-container' style={{ height: "100%", width: "100%" }}>
    <div id='basic-area-chart-demo' style={{ height: "calc(100% - 32px)", width: "100%" }} />
    <div className="tradingview-widget-copyright">
    <a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span className="blue-text">Track all markets on TradingView</span></a>
    </div>
</div>
);
}