SBCHART

var chart = sb.chart.render("#chartWrap", {
    data: {
        type: "boxplot",
        json : [
			{ date : "2021-05-03", openprc : 81000, closeprc : 81700, avgprc : 81200, standardprc : 81400, lowprc : 81000, highprc : 82400 },
			{ date : "2021-05-04", openprc : 81900, closeprc : 82600, avgprc : 82200, standardprc : 82400, lowprc : 81800, highprc : 82600 },
			{ date : "2021-05-06", openprc : 81700, closeprc : 82300, avgprc : 81900, standardprc : 81700, lowprc : 81700, highprc : 82300 },
			{ date : "2021-05-07", openprc : 81800, closeprc : 81900, avgprc : 81800, standardprc : 81600, lowprc : 81500, highprc : 82100 },
			{ date : "2021-05-10", openprc : 82300, closeprc : 83200, avgprc : 82500, standardprc : 82700, lowprc : 81800, highprc : 83500 }, 
			{ date : "2021-05-11", openprc : 81200, closeprc : 81200, avgprc : 82200, standardprc : 82400, lowprc : 81100, highprc : 82600 },
			{ date : "2021-05-12", openprc : 80000, closeprc : 80000, avgprc : 80400, standardprc : 80600, lowprc : 79800, highprc : 81200 },
			{ date : "2021-05-13", openprc : 78500, closeprc : 78500, avgprc : 78700, standardprc : 78500, lowprc : 78400, highprc : 79600 },
			{ date : "2021-05-14", openprc : 80100, closeprc : 80100, avgprc : 79800, standardprc : 79600, lowprc : 78900, highprc : 80300 },
			{ date : "2021-05-17", openprc : 79600, closeprc : 79600, avgprc : 80100, standardprc : 80300, lowprc : 79200, highprc : 80900 }, 
			{ date : "2021-05-18", openprc : 79600, closeprc : 79600, avgprc : 79600, standardprc : 79400, lowprc : 79100, highprc : 80000 },
			{ date : "2021-05-20", openprc : 79500, closeprc : 79500, avgprc : 79400, standardprc : 79600, lowprc : 79100, highprc : 79700 },
			{ date : "2021-05-21", openprc : 80100, closeprc : 80100, avgprc : 80100, standardprc : 80300, lowprc : 79800, highprc : 81500 },
			{ date : "2021-05-24", openprc : 79700, closeprc : 79700, avgprc : 80000, standardprc : 80200, lowprc : 79500, highprc : 80400 },
			{ date : "2021-05-25", openprc : 79900, closeprc : 79900, avgprc : 80000, standardprc : 80200, lowprc : 79800, highprc : 80400 }, 
			{ date : "2021-05-26", openprc : 79800, closeprc : 79800, avgprc : 80200, standardprc : 80400, lowprc : 79700, highprc : 80500 },
			{ date : "2021-05-27", openprc : 79600, closeprc : 79600, avgprc : 80000, standardprc : 80200, lowprc : 79100, highprc : 80000 },
			{ date : "2021-05-28", openprc : 80100, closeprc : 80100, avgprc : 79900, standardprc : 79700, lowprc : 79400, highprc : 80400 },
			{ date : "2021-05-31", openprc : 80500, closeprc : 80500, avgprc : 80400, standardprc : 80600, lowprc : 79600, highprc : 80600 },
			{ date : "2021-06-01", openprc : 80600, closeprc : 80600, avgprc : 80500, standardprc : 80300, lowprc : 80100, highprc : 81300 }, 
			{ date : "2021-06-02", openprc : 80800, closeprc : 80800, avgprc : 80600, standardprc : 80400, lowprc : 80300, highprc : 81400 },
			{ date : "2021-06-03", openprc : 82800, closeprc : 82800, avgprc : 81500, standardprc : 81700, lowprc : 81100, highprc : 83000 },
        ],
        keys : {
            x : "time",
            value : [ { open : "openprc", close : "closeprc", avg : "avgprc", standard : "standardprc", low : "lowprc", high : "highprc" } ]
        }
    },
    axis : {
        y : {
            min : 78000
        }
    },
    extend : {
        boxplot : {
            outlier : {
                useFullWidth : false,
                width : 1,
                color : "red",
                opacity : 1,
            }
            avg : {
                width : 2,
                color : "black",
                opacity : 1,
            }
        }
    }
});

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

// outlier width
document.getElementById("txtOutlierWidth").onchange = function() {
    chart.extend({
        boxplot : {
            outlier : {
                width : this.value	
            }
        }
    }).render();
}

// outlier color
document.getElementById("txtOutlierColor").onchange = function() {
    chart.extend({
        boxplot : {
            outlier : {
                color : this.value
            }
        }
    }).render();
}