SBCHART

#chartWrap1 .sbchart-title { font-size: 18px; } /* 타이틀 폰트 */
#chartWrap1 .sbchart-legend-background { stroke-width: 0 }	/* 범례 outline 제거 */
#chartWrap1 .sbchart-legend-item-text { font-size: 13px } /* 범례 폰트 */
#chartWrap2 .sbchart-title { font-size: 20px; } /* 타이틀 폰트 */
#chartWrap2 .sbchart-axis-x .tick text { font-size: 12px; } /* x축 tick 폰트 */
#chartWrap2 .sbchart-axis-x .tick line { display: none; } /* x축 tick hidden */
#chartWrap2 .sbchart-axis-y .tick text { font-size: 12px; fill: #aaaaaa; } /* y축 tick 폰트, 폰트색 */
#chartWrap2 .sbchart-axis-y .domain { display: none; } /* y축 선 hidden */
#chartWrap2 .sbchart-axis-y .tick line { display: none; }	/* y축 tick 선 hidden */

sb.chart.render("#chartWrap1", {
    global: {
        size: {
            width: 400, 
            height: 250
        }
    },
    data: {
        type: "pie",
        columns: [
            ["US",47],
            ["China", 19],
            ["EU", 10],
            ["Japan", 15],
            ["Korea", 3],
            ["Others", 5]
        ],
    },
    title: { 
        text: "AI Patents by Country (Total:7,319)",
        position: "top-left"
    },
    legend: {
        position: "inset",
        inset: {
            y: 30
        }
    },
    extend: {
        pie: {
            label: {
                format: function(value, ratio, index) {
                    return value;
                }
            }
        }
    }
});
sb.chart.render("#chartWrap2", {
    global: {
        size: {
            width: 400,
            height: 250
        },
        color: {
            pattern: ["#6d9eec"]
        }
    },
    data: {
        type: "bar",
        keys: {
            x: "company",
            value: ["no"]
        },
        json: [
            {company:"IBM", no:2400},
            {company:"Alphabet", no:2100},
            {company:"Microsoft", no:1550},
            {company:"Baidu", no:850},
            {company:"Aibaba", no:800}
        ],
    },
    title: { 
        text: "AI Patents by Company",
        position: "top-left"
    },
    axis: {
        rotated: true,
        x: {
            type: "category",
            tick: {
                outer: false
            }
        },
        y: {
            tick: {
                values: [500, 1000, 1500, 2000],
                outer: false
            }
        }
    },
    legend: {
        show: false
    },
    grid: {
        x: { 
            show: false 
        }
    }
});