Candlestick Charts in JavaScript
How to graph D3.js-based candlestick charts in javascript. Examples of candlestick charts.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
var trace1 = { x: ['2017-01-04', '2017-01-05', '2017-01-06', '2017-01-09', '2017-01-10', '2017-01-11', '2017-01-12', '2017-01-13', '2017-01-17', '2017-01-18', '2017-01-19', '2017-01-20', '2017-01-23', '2017-01-24', '2017-01-25', '2017-01-26', '2017-01-27', '2017-01-30', '2017-01-31', '2017-02-01', '2017-02-02', '2017-02-03', '2017-02-06', '2017-02-07', '2017-02-08', '2017-02-09', '2017-02-10', '2017-02-13', '2017-02-14', '2017-02-15'], close: [116.019997, 116.610001, 117.910004, 118.989998, 119.110001, 119.75, 119.25, 119.040001, 120, 119.989998, 119.779999, 120, 120.080002, 119.970001, 121.879997, 121.940002, 121.949997, 121.629997, 121.349998, 128.75, 128.529999, 129.080002, 130.289993, 131.529999, 132.039993, 132.419998, 132.119995, 133.289993, 135.020004, 135.509995], decreasing: {line: {color: '#7F7F7F'}}, high: [116.510002, 116.860001, 118.160004, 119.43, 119.379997, 119.93, 119.300003, 119.620003, 120.239998, 120.5, 120.089996, 120.449997, 120.809998, 120.099998, 122.099998, 122.440002, 122.349998, 121.629997, 121.389999, 130.490005, 129.389999, 129.190002, 130.5, 132.089996, 132.220001, 132.449997, 132.940002, 133.820007, 135.089996, 136.270004], increasing: {line: {color: '#17BECF'}}, line: {color: 'rgba(31,119,180,1)'}, low: [115.75, 115.809998, 116.470001, 117.940002, 118.300003, 118.599998, 118.209999, 118.809998, 118.220001, 119.709999, 119.370003, 119.730003, 119.769997, 119.5, 120.279999, 121.599998, 121.599998, 120.660004, 120.620003, 127.010002, 127.779999, 128.160004, 128.899994, 130.449997, 131.220001, 131.119995, 132.050003, 132.75, 133.25, 134.619995], open: [115.849998, 115.919998, 116.779999, 117.949997, 118.769997, 118.739998, 118.900002, 119.110001, 118.339996, 120, 119.400002, 120.449997, 120, 119.550003, 120.419998, 121.669998, 122.139999, 120.93, 121.150002, 127.029999, 127.980003, 128.309998, 129.130005, 130.539993, 131.350006, 131.649994, 132.460007, 133.080002, 133.470001, 135.520004], type: 'candlestick', xaxis: 'x', yaxis: 'y' }; var data = [trace1]; var layout = { dragmode: 'zoom', margin: { r: 10, t: 25, b: 40, l: 60 }, showlegend: false, xaxis: { autorange: true, domain: [0, 1], range: ['2017-01-03 12:00', '2017-02-15 12:00'], rangeslider: {range: ['2017-01-03 12:00', '2017-02-15 12:00']}, title: { text: 'Date' }, type: 'date' }, yaxis: { autorange: true, domain: [0, 1], range: [114.609999778, 137.410004222], type: 'linear' } }; Plotly.newPlot('myDiv', data, layout);d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv', function(err, rows){ function unpack(rows, key) { return rows.map(function(row) { return row[key]; }); } var trace = { x: unpack(rows, 'Date'), close: unpack(rows, 'AAPL.Close'), high: unpack(rows, 'AAPL.High'), low: unpack(rows, 'AAPL.Low'), open: unpack(rows, 'AAPL.Open'), // cutomise colors increasing: {line: {color: 'black'}}, decreasing: {line: {color: 'red'}}, type: 'candlestick', xaxis: 'x', yaxis: 'y' }; var data = [trace]; var layout = { dragmode: 'zoom', showlegend: false, xaxis: { rangeslider: { visible: false } } }; Plotly.newPlot('myDiv', data, layout); }); var trace1 = { x: ['2017-01-17', '2017-01-18', '2017-01-19', '2017-01-20', '2017-01-23', '2017-01-24', '2017-01-25', '2017-01-26', '2017-01-27', '2017-01-30', '2017-01-31', '2017-02-01', '2017-02-02', '2017-02-03', '2017-02-06', '2017-02-07', '2017-02-08', '2017-02-09', '2017-02-10'], close: [120, 119.989998, 119.779999, 120, 120.080002, 119.970001, 121.879997, 121.940002, 121.949997, 121.629997, 121.349998, 128.75, 128.529999, 129.080002, 130.289993, 131.529999, 132.039993, 132.419998, 132.119995], decreasing: {line: {color: '#7F7F7F'}}, high: [120.239998, 120.5, 120.089996, 120.449997, 120.809998, 120.099998, 122.099998, 122.440002, 122.349998, 121.629997, 121.389999, 130.490005, 129.389999, 129.190002, 130.5, 132.089996, 132.220001, 132.449997, 132.940002], increasing: {line: {color: '#17BECF'}}, line: {color: 'rgba(31,119,180,1)'}, low: [118.220001, 119.709999, 119.370003, 119.730003, 119.769997, 119.5, 120.279999, 121.599998, 121.599998, 120.660004, 120.620003, 127.010002, 127.779999, 128.160004, 128.899994, 130.449997, 131.220001, 131.119995, 132.050003], open: [118.339996, 120, 119.400002, 120.449997, 120, 119.550003, 120.419998, 121.669998, 122.139999, 120.93, 121.150002, 127.029999, 127.980003, 128.309998, 129.130005, 130.539993, 131.350006, 131.649994, 132.460007], type: 'candlestick', xaxis: 'x', yaxis: 'y' }; var data = [trace1]; var layout = { dragmode: 'zoom', margin: { r: 10, t: 25, b: 40, l: 60 }, showlegend: false, xaxis: { autorange: true, rangeslider: {range: ['2017-01-17 12:00', '2017-02-10 12:00']}, title: { text: 'Date' }, type: 'date' }, yaxis: { autorange: true, type: 'linear' }, annotations: [ { x: '2017-01-31', y: 0.9, xref: 'x', yref: 'paper', text: 'largest movement', font: {color: 'magenta'}, showarrow: true, xanchor: 'right', ax: -20, ay: 0 } ], shapes: [ { type: 'rect', xref: 'x', yref: 'paper', x0: '2017-01-31', y0: 0, x1: '2017-02-01', y1: 1, fillcolor: '#d3d3d3', opacity: 0.2, line: { width: 0 } } ] }; Plotly.newPlot('myDiv', data, layout);d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv', function(err, rows){ function unpack(rows, key) { return rows.map(function(row) { return row[key]; }); } var trace = { x: unpack(rows, 'Date'), close: unpack(rows, 'AAPL.Close'), high: unpack(rows, 'AAPL.High'), low: unpack(rows, 'AAPL.Low'), open: unpack(rows, 'AAPL.Open'), // cutomise colors increasing: {line: {color: 'black'}}, decreasing: {line: {color: 'red'}}, type: 'candlestick', xaxis: 'x', yaxis: 'y' }; var data = [trace]; var layout = { dragmode: 'zoom', showlegend: false, xaxis: { title: { text: 'Date' }, range: ['2016-06-01 12:00', '2017-01-01 12:00'] }, yaxis: { autorange: true, } }; Plotly.newPlot('myDiv', data, layout); }); d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv', function(err, rows){ function unpack(rows, key) { return rows.map(function(row) { return row[key]; }); } var trace = { x: unpack(rows, 'Date'), close: unpack(rows, 'AAPL.Close'), high: unpack(rows, 'AAPL.High'), low: unpack(rows, 'AAPL.Low'), open: unpack(rows, 'AAPL.Open'), // cutomise colors increasing: {line: {color: 'black'}}, decreasing: {line: {color: 'red'}}, type: 'candlestick', xaxis: 'x', yaxis: 'y' }; var data = [trace]; var layout = { dragmode: 'zoom', showlegend: false, xaxis: { autorange: true, title: { text: 'Date' }, rangeselector: { x: 0, y: 1.2, xanchor: 'left', font: {size:8}, buttons: [{ step: 'month', stepmode: 'backward', count: 1, label: '1 month' }, { step: 'month', stepmode: 'backward', count: 6, label: '6 months' }, { step: 'all', label: 'All dates' }] } }, yaxis: { autorange: true, } }; Plotly.newPlot('myDiv', data, layout); }); 