SBCHART

var chart = sb.chart.render("#chartWrap", {
    data: {
        type: "candlestick",
        json : [
            { date : "2021-05-03", openprc : 81000, closeprc : 81700, lowprc : 81000, highprc : 82400 },
            { date : "2021-05-04", openprc : 81900, closeprc : 82600, lowprc : 81800, highprc : 82600 },
            { date : "2021-05-06", openprc : 81700, closeprc : 82300, lowprc : 81700, highprc : 82300 },
            { date : "2021-05-07", openprc : 81800, closeprc : 81900, lowprc : 81500, highprc : 82100 },
            { date : "2021-05-10", openprc : 82300, closeprc : 83200, lowprc : 81800, highprc : 83500 }, 
            { date : "2021-05-11", openprc : 82500, closeprc : 81200 lowprc : 81100, highprc : 82600  },
            { date : "2021-05-12", openprc : 80800, closeprc : 80000 lowprc : 79800, highprc : 81200  },
            { date : "2021-05-13", openprc : 78900, closeprc : 78500 lowprc : 78400, highprc : 79600  },
            { date : "2021-05-14", openprc : 79000, closeprc : 80100 lowprc : 78900, highprc : 80300  },
            { date : "2021-05-17", openprc : 80800, closeprc : 79600 lowprc : 79200, highprc : 80900  },
            { date : "2021-05-18", closeprc : 79600, openprc : 79600, highprc : 80000, lowprc : 79100 },
            { date : "2021-05-20", closeprc : 79500, openprc : 79400, highprc : 79700, lowprc : 79100 },
            { date : "2021-05-21", closeprc : 80100, openprc : 80100, highprc : 81500, lowprc : 79800 },
            { date : "2021-05-24", closeprc : 79700, openprc : 80100, highprc : 80400, lowprc : 79500 },
            { date : "2021-05-25", closeprc : 79900, openprc : 80000, highprc : 80400, lowprc : 79800 },
            { date : "2021-05-26", closeprc : 79800, openprc : 80400, highprc : 80500, lowprc : 79700 },
            { date : "2021-05-27", closeprc : 79600, openprc : 80000, highprc : 80000, lowprc : 79100 },
            { date : "2021-05-28", closeprc : 80100, openprc : 79800, highprc : 80400, lowprc : 79400 },
            { date : "2021-05-31", closeprc : 80500, openprc : 80300, highprc : 80600, lowprc : 79600 },
            { date : "2021-06-01", closeprc : 80600, openprc : 80500, highprc : 81300, lowprc : 80100 },
            { date : "2021-06-02", closeprc : 80800, openprc : 80400, highprc : 81400, lowprc : 80300 },
            { date : "2021-06-03", closeprc : 82800, openprc : 81300, highprc : 83000, lowprc : 81100 },
        ],
        keys : {
            x : "time",
            value : [ { open : "openprc", close : "closeprc", low : "lowprc", high : "highprc" } ]
        }
    },
    axis : {
        y : {
            min : 78000
        }
    },
    extend : {
        candlestick : {
            marker : {
                show : true,
                min : {
                    format : function(d) {
                        return d.low.toLocaleString()+"원";
                    },
                    position : {
                        y : 10
                    }
                },
                max : {
                    format : function(d) {
                        return d.high.toLocaleString()+"원";
                    },
                    position : {
                        y : -2
                    }
                }
            }
        }
    }
});

// auto
document.getElementById("chkAuto").onchange = function() {
    chart.extend({
        candlestick : {
            auto : this.checked
        }
    }).render();
};

// inColor
document.getElementById("txtInColor").onchange = function() {
    chart.extend({
        candlestick : {
            inColor : this.value == "" ? undefined : this.value
        }
    }).render();
}

// deColor
document.getElementById("txtDeColor").onchange = function() {
    chart.extend({
        candlestick : {
            deColor : this.value == "" ? undefined : this.value
        }
    }).render();
}

// marker show
document.getElementById("chkMarkerShow").onchange = function() {
    chart.extend({
        candlestick : {
            marker : {
                show : this.checked	
            }
        }
    }).render();
}

// marker color
document.getElementById("txtMarkerColor").onchange = function() {
    chart.extend({
        candlestick : {
            marker : {
                color : this.value == "" ? undefined : this.value
            }
        }
    }).render();
}

// marker format
document.getElementById("chkMarkerFormat").onchange = function() {
    chart.extend({
        candlestick : {
            marker : {
                min : {
                    format : this.checked ? function(d) {
                        return d.low.toLocaleString()+"원";
                    } : undefined,
                },
                max : {
                    format : this.checked ? function(d) {
                        return d.high.toLocaleString()+"원";
                    } : undefined,
                }
            }
        }
    }).render();
}

// marker position x
document.getElementById("chkMarkerPositionX").onchange = function() {
    chart.extend({
        candlestick : {
            marker : {
                min : {
                    position : {
                        x : this.checked ? 10 : 0
                    }
                },
                max : {
                    position : {
                        x : this.checked ? -2 : 0
                    }
                }
            }
        }
    }).render();
}

// marker position y
document.getElementById("chkMarkerPositionY").onchange = function() {
    chart.extend({
        candlestick : {
            marker : {
                min : {
                    position : {
                        y : this.checked ? 10 : 0
                    }
                },
                max : {
                    position : {
                        y : this.checked ? -2 : 0
                    }
                }
            }
        }
    }).render();
}