Back

Candlestick series type

Euro / USD: 2014.01.01 - 2015.03.14

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

        <div id="demo"></div>

CSS

CSS 
.DVSL-info-right, .DVSL-info-left, .DVSL-info-center {
            border-radius: 0;
            background-color: rgba(30,30,30,0.5);
            border-bottom: 0;
            width: 20%;
        }

        .DVSL-bar-left > li a, .DVSL-bar-right > li a {
            color: #FFFFFF;
        }

            .DVSL-bar-left > li a:hover, .DVSL-bar-right > li a:hover {
                opacity: 0.8;
            }

        .DVSL-bar-left li > a, .DVSL-bar-right li > a {
            height: 37px;
        }

        .DVSL-info-left tr:nth-child(2n), .DVSL-info-right tr:nth-child(2n), .DVSL-info-center tr:nth-child(2n) {
            background-color: rgba(52, 52, 52, 0.5);
        }

        .DVSL-info-right strong, .DVSL-info-left strong, .DVSL-info-center strong {
            color: #D9D4D2;
            border-radius: 0;
            border-bottom: 0;
            background-color: rgba(12, 12, 12, 0.5);
        }

        .DVSL-info-left table > tbody > tr:nth-child(1) > td:nth-child(2),
        .DVSL-info-right table > tbody > tr:nth-child(1) > td:nth-child(2),
        .DVSL-info-center table > tbody > tr:nth-child(1) > td:nth-child(2) {
            color: #51718C;
        }

        .DVSL-info-left table > tbody > tr:nth-child(2) > td:nth-child(2),
        .DVSL-info-right table > tbody > tr:nth-child(2) > td:nth-child(2),
        .DVSL-info-center table > tbody > tr:nth-child(2) > td:nth-child(2) {
            color: #968B82;
        }

        .DVSL-info-left table > tbody > tr:nth-child(3) > td:nth-child(2),
        .DVSL-info-right table > tbody > tr:nth-child(3) > td:nth-child(2),
        .DVSL-info-center table > tbody > tr:nth-child(3) > td:nth-child(2) {
            color: #968B82;
        }

        .DVSL-info-left table > tbody > tr:nth-child(4) > td:nth-child(2),
        .DVSL-info-right table > tbody > tr:nth-child(4) > td:nth-child(2),
        .DVSL-info-center table > tbody > tr:nth-child(4) > td:nth-child(2) {
            color: #F65472;
        }

        .DVSL-info-left table > tbody > tr > td,
        .DVSL-info-right table > tbody > tr > td,
        .DVSL-info-center table > tbody > tr > td {
            padding: 12px 0;
        }

JavaScript

JavaScript 

        var t = new TimeChart(
            {
                container: document.getElementById("demo"),
                navigation: {
                    initialDisplayUnit: "1 d",
                    initialDisplayPeriod: "1420122329000 > 1426291200000"
                },
                area: {
                    style: {
                        fillColor: "#1b2327",
                        selection: {
                            "lineColor": "#000000",
                            "fillColor": "rgba(142,142,142,0.15)"
                        },
                        selectionLabel: {
                            "fillColor": "#FFFFFF"
                        },
                        zoomHighlight: {
                            "fillColor": "rgba(142,142,142,0.15)"
                        },
                        zoomHighlightInactive: {
                            "fillColor": "rgba(142,142,142,0.15)"
                        }
                    }
                },
                currentTime: { enabled: false },
                data: {
                    units: ["d"],
                    timestampInSeconds: true,
                    url: "/dvsl/data/time-chart/eur-usd-from2014.json"

                },
                valueAxisDefault: {
                    minValue: 1,
                    style: {
                        hgrid: { lineColor: "rgba(84,82,84,0.5)" },
                        valueLabel: { fillColor: "#838283" }
                    }
                },
                timeAxis: {
                    style: {
                        dateHolidays: {
                            fillColor: "rgba(31,32,46,0.2)"
                        },
                        minorTimeLabel: { fillColor: "#838283" },
                        majorTimeLabel: { fillColor: "#838283" }
                    }
                },
                info: {
                    valueFormatterFunction: infoContents
                },
                series: [
                    {
                        id: "cs",
                        name: "Eur/Usd last year",
                        type: "candlestick",
                        data: {
                            high: 2,
                            low: 3,
                            open: 1,
                            close: 4
                        },
                        style: {
                            increase: {
                                candlestick: {
                                    fillColor: "#57B852",
                                    lineColor: "#57B852"
                                }
                            },
                            decrease: {
                                candlestick: {
                                    fillColor: "#F65472",
                                    lineColor: "#F65472"
                                }
                            }
                        }
                    }
                ]
            }
        );

        function infoContents(values, series) {
            if (!values) {
                return "No data";
            }
            return values.sum.toFixed(5);
        }

Data

Data 
//Data too large to output
Download Data