Back

Candlestick chart with conditional formatting

Candlestick chart that shows changes in currency exchange rate over time. Achieved with 'candlestick' series type. Green color applied to positive changes and red for negative by using different fillColor values for 'increase' and 'decrease' under 'style'.

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