Alignment problem with labels and rotate x axis about billboard.js HOT 7 CLOSED

@sibliss confirmed the issue. It seems like issuing on initializing, because after generation, do resize of the window or implicitly calling .resize() will be positioned well.

The generation code is like:

bb.generate({
	"data": {
		"columns": [
			["data1", 5, 10, 15]
		],
		"type": "bar"
	},
	"axis": {
		x: {
			type: "category",
			categories: ["text1", "text2", "text3"],
		},
		"rotated": true
	},
});

and the correct rendering should be :

For this moment, do

const chart = bb.generate(...);
chart.resize();

from billboard.js.

I see this issue is closed, does this mean that you regard it as fixed or is there another issue for it now? I am asking because I am using the most recent version of billboard and I have come across this problem

from billboard.js.

@laurencedorman, I'll try to check again

from billboard.js.

@laurencedorman, it's still happening?
with the latest, seems problem has been solved.

• https://jsbin.com/lovisoy/edit?html,js,output
  

If you have any other issue rather than that or reproduction code, let me know for check.
For now, closing the issue.

from billboard.js.

I just confirmed this issue has reappeared in v1.2.0. I installed v1.0.1 and the issue corrected itself to center on the bar.

Correction: even downgrading to v1.0.1 didn't work for me.

export function composeGraphOptions(componentProps) {
  return { 
    bindto: `#${componentProps.chartID}`,
    data: {
      type: 'bar',
      groups: [componentProps.data[0]],
      rows: componentProps.data
    },
    padding: {
      top: 10
    },
    axis: {
      rotated: true,
      x: {
        type: 'category',
        categories: [
          'Voice',
          'Chat'
        ],
      },
      y: {
        show: false
      }
    },
    grid: {
    },
    legend: {
      show: false
    },
    svg: {
      classname: 'stacked-chart'
    },
    tooltip: {
      grouped: false,
    }
  }
}

I'll use chart.resize() for now

from billboard.js.

Hi @netil, I think the problem is related with the legend attribute. This still happening when the legend attribute is false.

https://jsbin.com/cabemapudu/1/edit?html,js,output

from billboard.js.

@fcodias got it thanks.
It seems to have miscalculation with the legend occupied area.

from billboard.js.