SBCHART

svg { font-family: AppleSDGothicNeo-Regular,Malgun Gothic,"sans-serif"; }
.sbchart-title { font-size: 18px; line-height: 21px; font-weight: bold; }
.sbchart-legend .sbchart-legend-item { font-size: 12px; line-height: 15px; }
.sbchart-tooltip { width: 200px; } 

sb.chart.render("#chartWrap", {
    global : {
        color : {
            pattern : ["#142664", "#00E6B3"]
        }
    },
    data : {
        types : {
            openprc : "candlestick-open", closeprc : "candlestick-close",
            lowprc : "candlestick-low", highprc : "candlestick-high",
            trdvolume : "spline"
        },
        json : [
            { date:"2021-05-03", closeprc : 81700, openprc : 81000, highprc : 82400, lowprc : 81000, trdvolume : 15710336 },
            { date:"2021-05-04", closeprc : 82600, openprc : 81900, highprc : 82600, lowprc : 81800, trdvolume : 12532550 },
            { date:"2021-05-06", closeprc : 82300, openprc : 81700, highprc : 82300, lowprc : 81700, trdvolume : 17047511 },
            { date:"2021-05-07", closeprc : 81900, openprc : 81800, highprc : 82100, lowprc : 81500, trdvolume : 14154882 },
            { date:"2021-05-10", closeprc : 83200, openprc : 82300, highprc : 83500, lowprc : 81800, trdvolume : 19385027 },
            
            { date:"2021-05-11", closeprc : 81200, openprc : 82500, highprc : 82600, lowprc : 81100, trdvolume : 28996680 },
            { date:"2021-05-12", closeprc : 80000, openprc : 80800, highprc : 81200, lowprc : 79800, trdvolume : 35812268 },
            { date:"2021-05-13", closeprc : 78500, openprc : 78900, highprc : 79600, lowprc : 78400, trdvolume : 31490096 },
            { date:"2021-05-14", closeprc : 80100, openprc : 79000, highprc : 80300, lowprc : 78900, trdvolume : 16450920 },
            { date:"2021-05-17", closeprc : 79600, openprc : 80800, highprc : 80900, lowprc : 79200, trdvolume : 17740855 },
            
            { date:"2021-05-18", closeprc : 79600, openprc : 79600, highprc : 80000, lowprc : 79100, trdvolume : 17494407 },
            { date:"2021-05-20", closeprc : 79500, openprc : 79400, highprc : 79700, lowprc : 79100, trdvolume : 16541828 },
            { date:"2021-05-21", closeprc : 80100, openprc : 80100, highprc : 81500, lowprc : 79800, trdvolume : 20961714 },
            { date:"2021-05-24", closeprc : 79700, openprc : 80100, highprc : 80400, lowprc : 79500, trdvolume : 13398666 },
            { date:"2021-05-25", closeprc : 79900, openprc : 80000, highprc : 80400, lowprc : 79800, trdvolume : 13628942 },
            
            { date:"2021-05-26", closeprc : 79800, openprc : 80400, highprc : 80500, lowprc : 79700, trdvolume : 11984359 },
            { date:"2021-05-27", closeprc : 79600, openprc : 80000, highprc : 80000, lowprc : 79100, trdvolume : 23198510 },
            { date:"2021-05-28", closeprc : 80100, openprc : 79800, highprc : 80400, lowprc : 79400, trdvolume : 12360199 },
            { date:"2021-05-31", closeprc : 80500, openprc : 80300, highprc : 80600, lowprc : 79600, trdvolume : 13321324 },
            { date:"2021-06-01", closeprc : 80600, openprc : 80500, highprc : 81300, lowprc : 80100, trdvolume : 14058401 },
            
            { date:"2021-06-02", closeprc : 80800, openprc : 80400, highprc : 81400, lowprc : 80300, trdvolume : 16414644 },
            { date:"2021-06-03", closeprc : 82800, openprc : 81300, highprc : 83000, lowprc : 81100, trdvolume : 29546007 },
        ],
        keys : {
            x : "date",
            value : [ "trdvolume", { open : "openprc", close : "closeprc", low : "lowprc", high : "highprc" } ]
        },
        legends : { openprc : "S전자", trdvolume : "거래량" }
    },
    axis : {
        axes : {
            y2 : ["trdvolume"]
        },
        x : {
            type : "category",
            tick : {
                multiline : false,
                format : function(i, v) {
                    var date = v.split("-");
                    return date[1]+"/"+date[2];
                }
            },
        },
        y : {
            min : 78000,
            tick : {
                format : function(d) {
                    return (d/10000).toFixed(2);
                },
                count : 6
            },
            label : {
                text : "단위:만원"
            }
        },
        y2 : {
            min : 10000000,
            tick : {
                format : function(d) {
                    return Math.ceil(d/10000);
                },
                values : [10000000, 15000000, 20000000, 25000000, 30000000, 35000000]
            },
            label : {
                text : "단위:만주"
            }
        }
    },
    grid : {
        y : {
            ticks : 6
        }
    },
    title : {
        text : "S전자 Stock Price"
    },
    legend : {
        padding : 30
    },
    tooltip : {
        format : {
            value : function(v, ratio, id, index) {
                var formatStr = {
                    open : "시가",
                    close : "종가",
                    low : "저가",
                    high : "고가"
                };
                var returnVal = {};
	
                if( typeof v == "object" ) {
                    Object.keys(formatStr).forEach( function(d, i) {
                        returnVal[d] = {
                            key : formatStr[d],
                            value : v[i].toLocaleString()+"원"
                        };
                    });
                }
                else
                    returnVal = v.toLocaleString()+"주";
	                  
                return returnVal;
            }
        }
    },
    extend : {
        candlestick : {
            inColor : "#00E6B3",
            deColor : "#FF2E93",
            marker : {
                show : true,
                color : "#FFA500",
                max : {
                    format : function(d) {
                        return "최고가격 "+d.high.toLocaleString();
                    },
                },
                min : {
                    format : function(d) {
                        return "최저가격 "+d.low.toLocaleString();
                    },
                },
            }
        }
    }
});