SBCHART

var chart = sb.chart.render("#chartWrap", {
    data: {
        type: "plot",
        json : [
		{ "country" : "Japan",                life : 84.3, GDP : 40704, population : 12536 },
		{ "country" : "Switzerland",          life : 83.4, GDP : 93515, population : 871 },
		{ "country" : "South Korea",          life : 83.3, GDP : 35195, population : 5166 },
		{ "country" : "Singapore",            life : 83.2, GDP : 66263, population : 590 },
		{ "country" : "Spain",                life : 83.2, GDP : 30536, population : 4674 },
		{ "country" : "Australia",            life : 83.0, GDP : 62618, population : 2578 },
		{ "country" : "Israel",               life : 82.6, GDP : 49840, population : 934 },
		{ "country" : "France",               life : 82.5, GDP : 45028, population : 6542 },
		{ "country" : "Luxembourg",           life : 82.4, GDP : 131300, population : 63 },
		{ "country" : "Sweden",               life : 82.4, GDP : 58639, population : 1016 },
		{ "country" : "Canada",               life : 82.2, GDP : 52791, population : 3806 },
		{ "country" : "Malta",                life : 81.9, GDP : 31996, population : 49 },
		{ "country" : "Netherlands",          life : 81.8, GDP : 57714, population : 1717 },
		{ "country" : "Germany",              life : 81.7, GDP : 50787, population : 8390 },
		{ "country" : "Finland",              life : 81.6, GDP : 54522, population : 554 },
		{ "country" : "Portugal",             life : 81.6, GDP : 24457, population : 1016 },
		{ "country" : "Belgium",              life : 81.4, GDP : 50412, population : 1150 },
		{ "country" : "United Kingdom",       life : 81.4, GDP : 46200, population : 6820 },
		{ "country" : "Denmark",              life : 81.3, GDP : 67919, population : 581 },
		{ "country" : "Slovenia",             life : 81.3, GDP : 28929, population : 209 },
		{ "country" : "Kuwait",               life : 81.0, GDP : 27927, population : 488 },
		{ "country" : "Costa Rica",           life : 80.8, GDP : 11860, population : 512 },
		{ "country" : "United States",        life : 78.4, GDP : 69375, population : 33291 },
		{ "country" : "China",                life : 77.4, GDP : 11891, population : 144421 },
		{ "country" : "Iran",                 life : 77.3, GDP : 12725, population : 8414 },
		{ "country" : "Qatar",                life : 77.2, GDP : 61790, population : 293 },
		{ "country" : "United Arab Emirates", life : 76.1, GDP : 43537, population : 991 },
		{ "country" : "Mexico",               life : 76.0, GDP : 9967, population : 13026 },
		{ "country" : "Latvia",               life : 75.4, GDP : 19538, population : 190 },
		{ "country" : "Bulgaria",             life : 75.1, GDP : 11331, population : 691 },
		{ "country" : "Malaysia",             life : 74.7, GDP : 11124, population : 3293 },
		{ "country" : "Saudi Arabia",         life : 74.3, GDP : 23762, population : 3476 },
		{ "country" : "Russia",               life : 73.2, GDP : 11273, population : 14591 },
		{ "country" : "South Africa",         life : 65.3, GDP : 6004, population : 5962 },
        ],
        keys : {
            x : "GDP",
            value : [ { plotX : "GDP", plotY : "life", plotR : "population", title : "country", label : "country" } ]
        }
    },
    axis : {
        x : {
            min : 0,
            max : 150000,
            noUsePadding : true,
            tick : {
                fit : false,
            },
        },
        y : {
            min : 50,
            max : 90,
            noUsePadding : true,
        }
    },
    grid : {
        x : {
            show : false,
        },
        y : {
            show : false,
        },
    },
    title : {
        text : "2020년 나라별  GDP 대비 기대수명",
    },
    tooltip : {
    },
    extend : {
        plot : {
            useMultiTooltip : true,
            noChangeOpacityOnTooltip : false,
            centerLine : {
                show : true,
                showVertical : true,
                showHorizontal : true,
                type : "dotted",
                width : 1,
                color : "silver",
                opacity : 1,
                // strokeWidth : 1,
                // strokeColor : "red",
            },
            circle : {
                opacity : 0.5,
            },
            radius : {
                min : 4,
                max : 40,
            },
            label : {
                show : false,
                // moveX : -20,
                // moveY : -40,
                // fontSize : 24,
                // fontWeight : "bold",
                // fontColor : "grey",
            },
        }
    }
});

// useMultiTooltip
document.getElementById("chkUseMultiTooltip").onchange = function() {
    chart.extend({
        plot : {
            useMultiTooltip : this.checked
        }
    }).render();
};