/ 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, memo } from 'react';

	function TradingViewWidget() {
	  const container = useRef();

	  useEffect(
		() => {
		  const script = document.createElement("script");
		  script.src = "https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js";
		  script.type = "text/javascript";
		  script.async = true;
		  script.innerHTML = `
			{
			  "autosize": true,
			  "symbol": "NASDAQ:AAPL",
			  "interval": "D",
			  "timezone": "Etc/UTC",
			  "theme": "light",
			  "style": "3",
			  "hide_top_toolbar": true,
			  "save_image": false,
			  "support_host": "https://www.tradingview.com"
			}`;
		  container.current.appendChild(script);
		},
		[]
	  );

	  return (
		<div className="tradingview-widget-container" ref={container} style={{ height: "100%", width: "100%" }}>
		  <div className="tradingview-widget-container__widget" style={{ height: "calc(100% - 32px)", width: "100%" }}></div>
		  <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>
	  );
	}

	export default memo(TradingViewWidget);

// TradingViewWidget.jsx
	import React, { useEffect, useRef, memo } from 'react';

	function TradingViewWidget() {
	  const container = useRef();

	  useEffect(
		() => {
		  const script = document.createElement("script");
		  script.src = "https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js";
		  script.type = "text/javascript";
		  script.async = true;
		  script.innerHTML = `
			{
			  "autosize": true,
			  "symbol": "NASDAQ:AAPL",
			  "interval": "D",
			  "timezone": "Etc/UTC",
			  "theme": "light",
			  "style": "3",
			  "hide_top_toolbar": true,
			  "save_image": false,
			  "support_host": "https://www.tradingview.com"
			}`;
		  container.current.appendChild(script);
		},
		[]
	  );

	  return (
		<div className="tradingview-widget-container" ref={container} style={{ height: "100%", width: "100%" }}>
		  <div className="tradingview-widget-container__widget" style={{ height: "calc(100% - 32px)", width: "100%" }}></div>
		  <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>
	  );
	}

	export default memo(TradingViewWidget);