Quick Setup

<div id="chart"></div>
<script src="http://www.simplestockcharts.com/Assets/Js/min.simplestockcharts.js"></script>
<script>
window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.draw();
});
</script>

SimpleStockChart.draw

Call SimpleStockChart.draw after you have set all properties. Required to draw chart.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.draw();
});

SimpleStockChart.element(node)

Sets chart element.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.draw();
});

SimpleStockChart.ticker(string)

Sets chart ticker. Google Finance powers the chart, ticker names have to conform to Google Finance ticker names.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.draw();
});

SimpleStockChart.skin(string)

Sets chart skin. Accepted values are dark and light.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.skin = 'light';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.draw();
});

SimpleStockChart.style.width(string)

Sets chart width in pixels.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.draw();
});

SimpleStockChart.style.height(string)

Sets chart height in pixels.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.draw();
});

SimpleStockChart.style.padding(string)

Sets chart padding in pixels.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.style.padding = '20px';
    chart.draw();
});

SimpleStockChart.style.margin(string)

Sets chart margin in pixels.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.style.margin = '20px';
    chart.draw();
});

SimpleStockChart.style.border(string)

Sets chart border. Use CSS.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.style.border = '4px solid #e5e5e5';
    chart.draw();
});

SimpleStockChart.style.background(string)

Sets chart background. Use CSS.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.style.background = 'linear-gradient(180deg, #eee, #fff)';
    chart.draw();
});

SimpleStockChart.style.boxSizing(string)

Sets chart boxSizing. Use CSS.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.style.boxSizing = 'border-box';
    chart.draw();
});

SimpleStockChart.area.fill(string)

Sets chart area fill color.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.area.fill = '#e5e5e5';
    chart.draw();
});

SimpleStockChart.chart.fill(string)

Sets chart fill color.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.chart.fill = '#e5e5e5';
    chart.draw();
});

SimpleStockChart.chart.stroke(string)

Sets chart stroke color.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.chart.stroke = '#e5e5e5';
    chart.draw();
});

SimpleStockChart.font.fontFamily(string)

Sets chart font font family.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.font.fontFamily = 'Calibri';
    chart.draw();
});

SimpleStockChart.font.fontSize(string)

Sets chart font font size.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.font.fontSize = '16';
    chart.draw();
});

SimpleStockChart.font.fill(string)

Sets chart font color.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.font.fill = '#e5e5e5';
    chart.draw();
});

SimpleStockChart.majorAxis.fill(string)

Sets chart major axis color.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.majorAxis.fill = '#e5e5e5';
    chart.draw();
});

SimpleStockChart.minorAxis.fill(string)

Sets chart minor axis color.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.minorAxis.fill = '#e5e5e5';
    chart.draw();
});

SimpleStockChart.minorAxis.count(int)

Sets chart minor axis count.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.minorAxis.count = 6;
    chart.draw();
});

SimpleStockChart.pointer.fill(string)

Sets chart tooltip pointer fill.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.pointer.fill = '#e5e5e5';
    chart.draw();
});

SimpleStockChart.pointer.r(int)

Sets chart tooltip pointer radius.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.pointer.r = 6;
    chart.draw();
});

SimpleStockChart.pointer.stroke(string)

Sets chart tooltip pointer stroke.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.pointer.stroke = '#e5e5e5';
    chart.draw();
});

SimpleStockChart.volume.fill(string)

Sets volume fill.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.volume.fill = '#e5e5e5';
    chart.draw();
});

SimpleStockChart.volume.stroke(string)

Sets volume stroke.

window.addEventListener('load', function () {
    var chart = new SimpleStockChart();
    chart.element = document.getElementById('chart');
    chart.ticker = 'MSFT';
    chart.style.width = '1020px';
    chart.style.height = '420px';
    chart.volume.stroke = '#e5e5e5';
    chart.draw();
});