handleman
5/24/2016 - 5:06 PM

Round corners of c3.js bar chart http://jsfiddle.net/5hzxegxx/27/

Round corners of c3.js bar chart http://jsfiddle.net/5hzxegxx/27/

// --------------- Overrides to get rounded corner is bar charts ------------------
c3.chart.internal.fn.additionalConfig = {
    bar_radiusAll: false,
    bar_radius: 5,
    tooltip_format_color: undefined

};

c3.chart.internal.fn.isOrderDesc = function () {
    var config = this.config;
    if(this.isFunction(config.data_order)) {
        return false;
    }else {
        return config.data_order && config.data_order.toLowerCase() === 'desc';
    }
};

c3.chart.internal.fn.isOrderAsc = function () {
    var config = this.config;
    if(this.isFunction(config.data_order)) {
        return false;
    }else {
        return config.data_order && config.data_order.toLowerCase() === 'asc';
    }
};

c3.chart.internal.fn.generateDrawBar = function (barIndices, isSub) {
    var $$ = this, config = $$.config,
        getPoints = $$.generateGetBarPoints(barIndices, isSub);
    return function (d, i) {
        // 4 points that make a bar
        var points = getPoints(d, i),
            groups = config.data_groups,
            path = '';

        // switch points if axis is rotated, not applicable for sub chart
        var indexX = config.axis_rotated ? 1 : 0;
        var indexY = config.axis_rotated ? 0 : 1;
        var bar_radius = config.bar_radius;
        var bar_radiusAll = config.bar_radiusAll;
        if(groups && groups.length>0) {
            var lastGrps = [];
            groups.forEach(function(group){
                lastGrps.push(group[group.length-1]);
            });
            //if(points[0][1] < points[1][1] || points[0][0] > points[1][0] ) {
            //	bar_radius = bar_radius*-1;
            //}
            if((points[0][1] === points[1][1]) && (points[1][1]=== points[2][1]) && (points[2][1] === points[3][1]) ||
                (points[0][0] === points[1][0]) && (points[1][0]=== points[2][0]) && (points[2][0] === points[3][0])){
                path = 'M ' + points[0][indexX] + ',' + points[0][indexY] + ' ' +
                'L' + points[1][indexX] + ',' + (points[1][indexY]) + ' ' +
                'L' + (points[2][indexX]) + ',' + points[2][indexY] + ' ' +
                'L' + points[3][indexX] + ',' + points[3][indexY] + ' ' +
                'z';
                return path;
            }
            if(lastGrps.indexOf(d.id) > -1 && (config.data_order === null)) {
                if(config.axis_rotated) {
                    path = 'M ' + points[0][indexX] + ',' + points[0][indexY] + ' ' +
                    'L' + (points[1][indexX]-bar_radius) + ',' + points[1][indexY] + ' ' +
                    'Q' + points[1][indexX] + ',' + points[1][indexY] + ' ' + points[1][indexX] + ',' + (points[1][indexY]+bar_radius) + ' ' +
                    'L' + points[2][indexX] + ',' + (points[2][indexY]-bar_radius) + ' ' +
                    'Q' + points[2][indexX] + ',' + points[2][indexY] + ' ' + (points[2][indexX]-bar_radius) + ',' + points[2][indexY] + ' ' +
                    'L' + points[3][indexX] + ',' + points[3][indexY] + ' ' +
                    'z';
                }else {
                    path = 'M ' + points[0][indexX] + ',' + points[0][indexY] + ' ' +
                    'L' + points[1][indexX] + ',' + (points[1][indexY]+bar_radius) + ' ' +
                    'Q' + points[1][indexX] + ',' + points[1][indexY] + ' ' + (points[1][indexX]+bar_radius) + ',' + points[1][indexY] + ' ' +
                    'L' + (points[2][indexX]-bar_radius) + ',' + points[2][indexY] + ' ' +
                    'Q' + points[2][indexX] + ',' + points[2][indexY] + ' ' + points[2][indexX] + ',' + (points[2][indexY]+bar_radius) + ' ' +
                    'L' + points[3][indexX] + ',' + points[3][indexY] + ' ' +
                    'z';
                }
            }else {
                if(bar_radiusAll) {
                    path = 'M ' + points[0][indexX] + ',' + points[0][indexY] + ' ' +
                    'L' + (points[1][indexX]+bar_radius) + ',' + (points[1][indexY]) + ' ' +
                    'Q' + points[1][indexX] + ',' + points[1][indexY] + ' ' + (points[1][indexX]) + ',' + (points[1][indexY]+bar_radius) + ' ' +
                    'L' + (points[2][indexX]) + ',' + (points[2][indexY]-bar_radius) + ' ' +
                    'Q' + points[2][indexX] + ',' + points[2][indexY] + ' ' + (points[2][indexX]+bar_radius) + ',' + (points[2][indexY]) + ' ' +
                    'L' + points[3][indexX] + ',' + points[3][indexY] + ' ' +
                    'z';
                }else {
                    path = 'M ' + points[0][indexX] + ',' + points[0][indexY] + ' ' +
                    'L' + points[1][indexX] + ',' + (points[1][indexY]) + ' ' +
                    'L' + (points[2][indexX]) + ',' + points[2][indexY] + ' ' +
                    'L' + points[3][indexX] + ',' + points[3][indexY] + ' ' +
                    'z';
                }
            }
        }else {
            /*path = 'M ' + points[0][indexX] + ',' + points[0][indexY] + ' ' +
             'L' + points[1][indexX] + ',' + (points[1][indexY]) + ' ' +
             'L' + (points[2][indexX]) + ',' + points[2][indexY] + ' ' +
             'L' + points[3][indexX] + ',' + points[3][indexY] + ' ' +
             'z';*/
            if(config.axis_rotated) {
                path = 'M ' + points[0][indexX] + ',' + points[0][indexY] + ' ' +
                'L' + (points[1][indexX]-bar_radius) + ',' + points[1][indexY] + ' ' +
                'Q' + points[1][indexX] + ',' + points[1][indexY] + ' ' + points[1][indexX] + ',' + (points[1][indexY]+bar_radius) + ' ' +
                'L' + points[2][indexX] + ',' + (points[2][indexY]-bar_radius) + ' ' +
                'Q' + points[2][indexX] + ',' + points[2][indexY] + ' ' + (points[2][indexX]-bar_radius) + ',' + points[2][indexY] + ' ' +
                'L' + points[3][indexX] + ',' + points[3][indexY] + ' ' +
                'z';
            }else {
                path = 'M ' + points[0][indexX] + ',' + points[0][indexY] + ' ' +
                'L' + points[1][indexX] + ',' + (points[1][indexY]+bar_radius) + ' ' +
                'Q' + points[1][indexX] + ',' + points[1][indexY] + ' ' + (points[1][indexX]+bar_radius) + ',' + points[1][indexY] + ' ' +
                'L' + (points[2][indexX]-bar_radius) + ',' + points[2][indexY] + ' ' +
                'Q' + points[2][indexX] + ',' + points[2][indexY] + ' ' + points[2][indexX] + ',' + (points[2][indexY]+bar_radius) + ' ' +
                'L' + points[3][indexX] + ',' + points[3][indexY] + ' ' +
                'z';
            }
        }
        return path;
    };
};

// ----------------------------- End -------------------------------



var chart = c3.generate({
    bindto: '#chart',
	padding: {
		left: 200,
		right: 100,
		top: 20,
		bottom: 20
	},
	data: {
        x: 'x',
        labels: true,
        columns: [
            ['data1',40, 30, 200, 100, 400, 150, 250, 50, 100, 250,67,190,48,123,76,54,254],
            ['x','Travel and Hospitality','Life Science and Pharma', 'Saas and Cloud', 'Hi-tech Manufacturing', 'Software', 'Business Services', 'Govt/Public Sector', 'Energy', 'Manufacturing', 'Healthcare','Media','Internet','Retail','Biotech','Automobile','Consumer Goods','Financial Services']
        ],
        type: 'bar'
    },
    axis: {
        rotated: true,
        x: {
            type: 'category',
            tick:{
                multiline: false
            }
        }
    },
    legend: {
        show: false
    },
    tooltip: {
        show: false
    },
	bar: {
		width: {
			ratio: .7
		},
		spacing: 2
	}
});