JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.jqchart.com/documentation/demos/js/jquery.jqChart.min.js"></script>
<link rel="stylesheet" href="http://www.jqchart.com/documentation/demos/css/jquery.jqChart.css">
<html>
<head>
</head>
<body>
<div id="jqChart" style="width: 800px; height: 550px;" />
</body>
</html>
JavaScript
function round(d) {
return Math.round(100 * d) / 100;
}
var data = [];
var date = new Date(2010, 0, 1);
var high = Math.random() * 40;
var close = high - Math.random();
var low = close - Math.random();
var open = (high - low) * Math.random() + low;
data.push([date, round(high), round(low), round(open), round(close)]);
for (var day = 2; day <= 12; day++) {
date = new Date(2010, 0, day);
high = open + Math.random();
close = high - Math.random();
low = close - Math.random();
var oldOpen = open;
open = (high - low) * Math.random() + low;
if (low > oldOpen) {
low = oldOpen;
}
data.push([date, round(high), round(low), round(open), round(close)]);
}
$(document).ready(function () {
$('#jqChart').jqChart({
title: { text: 'Candlestick Chart' },
legend: { visible: false },
// labelsOptions : { visible: false },
axes: [
{
type: 'linear',
location: 'left',
reversed: true
},
{
type: 'category',
location: 'bottom',
categories: [
'Category 1', 'Category 2', 'Category 3',
'Category 4', 'Category 5', 'Category 6',
'Category 7', 'Category 8', 'Category 9',
'Category 10', 'Category 11', 'Category...