Heads-Up Display

by sonylnagale

HTML

<link rel="stylesheet" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css">


<div class="chartContainer" style="width:600px;height:400px;position:relative;"></div>
<script src="https://jsfiddle.chartiq.com/chart/examples/data/STX_SAMPLE_DAILY.js"></script>
<script src="https://jsfiddle.chartiq.com/chart/js/chartiq.js"></script>

CSS

.stx_xaxis,
		.ciq-night .stx_xaxis, .ciq-night .stx_xaxis_dark {
			font-size: 24px;
			color: #FF0000;
		}

		.stx_yaxis, .ciq-night .stx_yaxis {
			/* y-axis price styles */
			font-size: 10px;
			font-family: Helvetica, sans-serif;
			color: #00FF00;
		}

JavaScript

window.addEventListener('load', () => {

  const chart = new CIQ.ChartEngine({
    container: document.querySelector('.chartContainer')
  })
	
	CIQ.I18N.setLocale(chart, "pt-BR")

  chart.loadChart('SPY', sampleData)
  
})