D3 Examples - low barrel

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="Layout.js"></script>
<script src="d3-financial-components.js"></script>
<script src="tooltip.js"></script>
<link href="d3-financial-components.css" rel="stylesheet"/>
<style>
body {
    font: 16px sans-serif;
}
.main-row>td {
    height: 240px;
}
.volume-row>td {
    height: 160px;
    padding-bottom: 20px;
}
.navigator-row>td {
    height: 80px;
}
.chart {
    width: 640px;
}
svg {
    width: 100%;
    height: 100%;
}
span {
    display:block;
    transform: rotate(90deg);
}
​
​
rect.background {
    fill: none;
    stroke: #C0C0C0;
}
.gridlines line {
    stroke: #C0C0C0;
    stroke-width: 0.5px;
}
.candlestick.up rect {
    fill: #fff;
}
.candlestick.down rect {
    fill: #7CB5EC;
}
rect.extent {
    fill: rgba(128, 179, 236, 0.3);
    stroke: #C0C0C0;
    stroke-width: 1px;
}
.line {
    stroke: rgba(128, 179, 236, 1);
    stroke-width: 1px;
}
.area {
    fill: rgba(128, 179, 236, 0.05);
}
.crosshairs .vertical {
    stroke: #C0C0C0;
    stroke-width: 1px;
}
.crosshairs .horizontal {
    display: none;
}
.crosshairs .info {
    font: 10px sans-serif;
}
.crosshairs .info rect {
    fill: rgba(249, 249, 249, 0.85);
    stroke: rgba(124, 181, 236, 1);
    stroke-width: 1px;
}
​
​
</style>
​
<table id="low-barrel">
    <tr class="main-row">
        <td class="chart">
            <svg class="main"></svg>
        </td>
        <td>
            <span>OHLC</span>
        </td>
    </tr>
    <tr class="volume-row">
        <td class="chart">
            <svg class="volume"></svg>
        </td>
        <td>
            <span>Volume</span>
        </td>
    </tr>
    <tr class="navigator-row">
        <td class="chart">
            <svg class="navigator"></svg>
        </td>
        <td></td>
    </tr>
</table>
<script src="low-barrel.js"></script>
</body>
</html>
    