HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
var chart = anychart.cartesian();
3
4
var firstSeries = chart.candlestick([
5
{x: Date.UTC(2017, 7, 28), open: 511.53, high: 514.98, low: 505.79, close: 506.40},
6
{x: Date.UTC(2017, 7, 29), open: 507.84, high: 513.30, low: 507.23, close: 512.88},
7
{x: Date.UTC(2017, 7, 30), open: 512.36, high: 515.40, low: 510.58, close: 511.40},
8
{x: Date.UTC(2017, 7, 31), open: 513.10, high: 516.50, low: 511.47, close: 515.25},
9
{x: Date.UTC(2017, 8, 4), open: 515.02, high: 528.00, low: 514.62, close: 525.15}
10
]);
11
firstSeries.hoverFallingHatchFill("zigZag");
12
13
var secondSeries = chart.candlestick([
14
{x: Date.UTC(2017, 7, 28), open: 522.95, high: 523.10, low: 519.50, close: 520.52},
15
{x: Date.UTC(2017, 7, 29), open: 522.60, high: 524.69, low: 515.27, close: 517.55},
16
{x: Date.UTC(2017, 7, 30), open: 522.49, high: 522.91, low: 522.38, close: 522.61},
17
{x: Date.UTC(2017, 7, 31), open: 522.81, high: 523.83, low: 520.51, close: 521.73},
18
{x: Date.UTC(2017, 8, 4), open: 523.30, high: 524.50, low: 523.20, close: 523.97}
19
]);
20
21
// Hovers series.
22
firstSeries.hover();
23
secondSeries.hover();
24
25
// Get falling hatch fill in hover mode.
26
var hoverFallingHatchFill = firstSeries.hoverFallingHatchFill();
27
28
secondSeries.hoverFallingHatchFill(hoverFallingHatchFill);
29
30
chart.title("Get and use hover falling hatch fill");
31
chart.container("container");
32
chart.draw();
33
});