kobzarvs/plotly-candlestick.html

## plotly-candlestick.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CandleStick Chart</title>

  <style>
    #chart {
      border: 1px solid red;
      padding: 0;
      margin: 0;
    }
    .hoverlayer > .hovertext > path {
      fill: rgba(250, 250, 250, .85) !important;
    }
    .hoverlayer > .axistext > path {
      fill: rgb(250, 250, 250) !important;
    }
  </style>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
<button id="button-draw" onclick="handlers.draw()">Draw</button>
<div id="chart"></div>
<div id="chart2"></div>

<script>
  const handlers = {}

  window.addEventListener('DOMContentLoaded', () => {
    const myPlot = document.getElementById('chart')

    handlers.draw = () => {
      console.log('draw')
      const data = [{
        x: d3.range(N),
        y: d3.range(N).map(d3.random.normal()),
        type: 'scatter',
      }]
      Plotly.animate('chart', [{ data }], {
        mode: 'immediate',
        transition: {
          easing: 'elastic-in',
        },
      })
    }

    Plotly.plot('chart', {
      data: [{
        line: { 'width': 1 },
        type: 'candlestick',
        x: ['time', '1', '2', 3, 4, 5, 6, 7, 8, 9, 10],
        low: ['low', '7', '10', '19', '14', '15', '10', '15', '10', '1', '0'],
        high: ['high', '15', '25', '23', '28', '30', '32', '22', '20', '10', '5'],
        open: ['open', '10', '15', '20', '21', '25', '23', '19', '15', '5', '1'],
        close: ['close', '9', '18', '22', '19', 25, '27', '21', '16', '8', 0],
        'increasing': { 'line': { 'width': 1 } },
        'decreasing': { 'line': { 'width': 1 } },
        // 'hoverinfo': 'x+y+text',
        // 'hoverlabel': { 'align': 'auto' },
      }],

      layout: {
        // title: 'Title message',
        'xaxis': {
          'side': 'bottom',
          'type': 'linear',
          // 'range': [0.5, 10.296766743648961],
          'anchor': 'y',
          'domain': [0, 1],
          'autorange': true,
          'fixedrange': true,
          rangeslider: {
            visible: false,
          },
          // 'showspikes': true,
        },
        'yaxis': {
          'side': 'left',
          // 'range': [-15, 35],
          'title': { 'text': 'Click to enter Y axis title' },
          'anchor': 'x',
          'domain': [0, 1],
          'autorange': true,
          'showspikes': false,
          'fixedrange': true,
        },
        'meta': ['name', 'name 1', 'name 2', 'name 1', 'name 2', 'name 1', 'name 2', 'name 1', 'name 2', 'name 1', 'name 2'],
        'clickmode': 'event',
        'hovermode': 'x',
        'hoverlabel': {
          'font': { 'size': 12, 'color': '#000' },
          'bgcolor': 'transparent',//'rgb(230, 239, 247)',
          'bordercolor': 'rgba(0, 0, 0, 0.25)',
        },
        'showlegend': false,
      },
      config: {
        displayModeBar: false,
        responsive: true,
      },
    })

    myPlot.on('plotly_click', function (data) {
      console.log(data.points)
    })

  })
</script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>CandleStick Chart</title>

	<style>
	#chart {
	border: 1px solid red;
	padding: 0;
	margin: 0;
	}
	.hoverlayer > .hovertext > path {
	fill: rgba(250, 250, 250, .85) !important;
	}
	.hoverlayer > .axistext > path {
	fill: rgb(250, 250, 250) !important;
	}
	</style>
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
	</head>

	<body>
	<button id="button-draw" onclick="handlers.draw()">Draw</button>
	<div id="chart"></div>
	<div id="chart2"></div>

	<script>
	const handlers = {}

	window.addEventListener('DOMContentLoaded', () => {
	const myPlot = document.getElementById('chart')

	handlers.draw = () => {
	console.log('draw')
	const data = [{
	x: d3.range(N),
	y: d3.range(N).map(d3.random.normal()),
	type: 'scatter',
	}]
	Plotly.animate('chart', [{ data }], {
	mode: 'immediate',
	transition: {
	easing: 'elastic-in',
	},
	})
	}

	Plotly.plot('chart', {
	data: [{
	line: { 'width': 1 },
	type: 'candlestick',
	x: ['time', '1', '2', 3, 4, 5, 6, 7, 8, 9, 10],
	low: ['low', '7', '10', '19', '14', '15', '10', '15', '10', '1', '0'],
	high: ['high', '15', '25', '23', '28', '30', '32', '22', '20', '10', '5'],
	open: ['open', '10', '15', '20', '21', '25', '23', '19', '15', '5', '1'],
	close: ['close', '9', '18', '22', '19', 25, '27', '21', '16', '8', 0],
	'increasing': { 'line': { 'width': 1 } },
	'decreasing': { 'line': { 'width': 1 } },
	// 'hoverinfo': 'x+y+text',
	// 'hoverlabel': { 'align': 'auto' },
	}],

	layout: {
	// title: 'Title message',
	'xaxis': {
	'side': 'bottom',
	'type': 'linear',
	// 'range': [0.5, 10.296766743648961],
	'anchor': 'y',
	'domain': [0, 1],
	'autorange': true,
	'fixedrange': true,
	rangeslider: {
	visible: false,
	},
	// 'showspikes': true,
	},
	'yaxis': {
	'side': 'left',
	// 'range': [-15, 35],
	'title': { 'text': 'Click to enter Y axis title' },
	'anchor': 'x',
	'domain': [0, 1],
	'autorange': true,
	'showspikes': false,
	'fixedrange': true,
	},
	'meta': ['name', 'name 1', 'name 2', 'name 1', 'name 2', 'name 1', 'name 2', 'name 1', 'name 2', 'name 1', 'name 2'],
	'clickmode': 'event',
	'hovermode': 'x',
	'hoverlabel': {
	'font': { 'size': 12, 'color': '#000' },
	'bgcolor': 'transparent',//'rgb(230, 239, 247)',
	'bordercolor': 'rgba(0, 0, 0, 0.25)',
	},
	'showlegend': false,
	},
	config: {
	displayModeBar: false,
	responsive: true,
	},
	})

	myPlot.on('plotly_click', function (data) {
	console.log(data.points)
	})

	})
	</script>
	</body>

	</html>