Alignment problem with labels and rotate x axis

[sibliss]

Description

I have a bar graph (the same as the example provided here: https://cdn.rawgit.com/naver/billboard.js/8413325d/demo/#Axis.RotatedAxis,
but with just the bar type of data. The only difference is that the data provided are in json format with a text value:
[ {text: "text1", value: 5}, {text: "text2", value: 10}, {text: "text3", value: 15}, ]

I would like to have the text value of every object as text label of the corresponding value. So I added this code to the graph:

axis: { x: { type: "category", categories: labels, }, rotated: true, },

but the label are not aligned with the values. In that specific case I can see the three bars with the value of 5, 10 and 15 but the labels on the y axis (the x rotated) are just two.

In that case I should see a third "test1" aligned with the bar in the middle. On top of that you can notice that the label that are present are not aligned correctly with the respective bars.

Steps to check or reproduce

This is the code that cause the problem:

            const data = this.data.map(i => i.value);
            const labels = this.data.map(i => i.text);
            data.unshift("data1");
            billboard.bb.generate({
                data: {
                    columns: [
                        data,
                    ],
                    types: {
                        data1: "bar",
                    },
                },
                axis: {
                    x: {
                        type: "category",
                        categories: labels,
                    },
                    rotated: true,
                },
                bindto: `.${this.graphUniqueClass}`,

[netil]

@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();

[laurencedorman]

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

[netil]

@laurencedorman, I'll try to check again

[netil]

@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.

[rtmalone]

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

[fcodias]

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

[netil]

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