Space between bars

Adhoc
, , ,
#1

Hello. I am using helical insight version 4.1 EE. I have created certain axis charts, but I want a customization that the bars should have some space between them. They should not stick together. How can I achieve that? I did not see any such kind of customization.

I want space like show in below chart

image

Whereas right now it is getting generated like this
image

Thanks

#2

Hi, as this is not a very commonly used requirement we have not created a UI driven option to do that. However by putting this below code in the JSeditor of helical insight adhoc editor you can achieve that.

hi_container.set("postExecution", function () {
    d3.selectAll(".c3-target-sum-source-id")
    .selectAll(".c3-bar")
    .attr("transform", "translate(-10, 0)");
});

NOTE : By inspecting we need to find class name of 1 of the bar
for example above case my bar class name is .c3-target-sum-source-id. Simply the measure name will come in the highlighted red portion.

NOTE : for more than 2 bars you need to add additional attribute. In the below sample also, the measure names which can be replaced with your measure names like sum-destinatin-id is name of measure:

hi_container.set("postExecution", function () {
    d3.selectAll(".c3-target-sum-source-id")
    .selectAll(".c3-bar")
    .attr("transform", "translate(-10, 0)");
   d3.selectAll(".c3-target-sum-destination-id-1")
    .selectAll(".c3-bar")
    .attr("transform", "translate(10, 0)"); 
});

image

Thanks.

#3

This can be implemented in case of grouped bar chart also

Code

hi_container.set("postExecution", function () {
    d3.selectAll(".c3-target-Agent")
    .selectAll(".c3-bar")
    .attr("transform", "translate(-2, 0)");
	d3.selectAll(".c3-target-Website")
    .selectAll(".c3-bar")
    .attr("transform", "translate(2, 0)");
});

image

Please identify class names from here within class → c3-chart-bars

image