Remove space on bar ZingChart

Question

I'm making a chart here and I have a little problem with removing the distance between the boxes

 var myConfig = {
            type: 'bar',
            legend: {
                layout: "x4",
                overflow : "page",
                shadow : false,
                align : "left",
                alpha :0.05,
                "adjust-layout": true,
                marker : {
                    type : "circle",
                    size : "7px",
                    "border-color" :"none"
                }
            },
            scaleX: {
                // convert text on scale indices
                labels: ['Automotive', 'Retail', 'Wholesale']
            },
            plot: {
                barWidth:"50%",
                animation: {
                    effect: 'ANIMATION_EXPAND_BOTTOM',
                    method: 'ANIMATION_STRONG_EASE_OUT',
                    sequence: 'ANIMATION_BY_NODE',
                    speed: 275,
                }
            },
            series: [
                {
                    // plot 1 values, linear data
                    values: [23, 20, 27],
                    text: 'Sum of target Premi',
                    backgroundColor: '#fa6383',
                    borderRadius: 5,
                },
                {
                    // plot 2 values, linear data
                    values: [35, 42, 33],
                    text: 'Sum of premi Leads',
                    backgroundColor: '#fb9f40',
                    borderRadius: 5,
                },
                {
                    // plot 2 values, linear data
                    values: [15, 22, 13],
                    text: 'Sum of premi Activity',
                    backgroundColor: '#fdcd55',
                    borderRadius: 5,
                },
                {
                    // plot 2 values, linear data
                    values: [15, 22, 13],
                    text: 'Sum of premi Booking',
                    backgroundColor: '#4bc0c1',
                    borderRadius: 5,
                }
            ]
        };

for my settings like this. there are suggestions so there can be no space ?

i have try documentation but does not work. https://www.zingchart.com/docs/chart-types/bar

score 0 · Answer 1 · answered Aug 07 '20 at 15:36

I'm not sure that I correctly understood your problem but probably you can try to use "barsOverlap" in "plot" configuration to achieve the desired result.

 var myConfig = {
            type: 'bar',
            legend: {
                layout: "x4",
                overflow : "page",
                shadow : false,
                align : "left",
                alpha :0.05,
                "adjust-layout": true,
                marker : {
                    type : "circle",
                    size : "7px",
                    "border-color" :"none"
                }
            },
            scaleX: {
                // convert text on scale indices
                labels: ['Automotive', 'Retail', 'Wholesale']
            },
            plot: {
                barWidth:"50%",
                barsOverlap: '50%',
                animation: {
                    effect: 'ANIMATION_EXPAND_BOTTOM',
                    method: 'ANIMATION_STRONG_EASE_OUT',
                    sequence: 'ANIMATION_BY_NODE',
                    speed: 275,
                }
            },
            series: [
                {
                    // plot 1 values, linear data
                    values: [23, 20, 27],
                    text: 'Sum of target Premi',
                    backgroundColor: '#fa6383',
                    borderRadius: 5,
                },
                {
                    // plot 2 values, linear data
                    values: [35, 42, 33],
                    text: 'Sum of premi Leads',
                    backgroundColor: '#fb9f40',
                    borderRadius: 5,
                },
                {
                    // plot 2 values, linear data
                    values: [15, 22, 13],
                    text: 'Sum of premi Activity',
                    backgroundColor: '#fdcd55',
                    borderRadius: 5,
                },
                {
                    // plot 2 values, linear data
                    values: [15, 22, 13],
                    text: 'Sum of premi Booking',
                    backgroundColor: '#4bc0c1',
                    borderRadius: 5,
                }
            ]
        };

Remove space on bar ZingChart

1 Answers1