Problems with the alignment or size of the bars

Question

Hello, I have the following graphicej.base.enableRipple(true);

var chart = new ej.charts.Chart({
  primaryXAxis: {
    valueType: "Category",
    majorGridLines: { width: 1 },
    majorTickLines: { width: 1 },
    labelPadding: 5
  },
  primaryYAxis: {
    labelFormat: "{value}%",
    majorGridLines: { width: 1 },
    majorTickLines: { width: 0 },
    minimum: 0,maximum: 110
  },
  chartArea: {border: {width: 0}},
  series: [
    {
      dataSource: [
        { x: "Dato1", y: 90 },
        { x: "Dato2", y: 10 },
        { x: "Dato3", y: 3 }
      ],
      fill: "#C7956D",name: "Grupo1",
      marker: {dataLabel: {visible: true}},
      type: "Bar",xName: "x",yName: "y",
    },
    {
      type: "Bar",
      dataSource: [
        { x: "Dato4", y: 80 },
        { x: "Dato5", y: 20 },
        { x: "Dato6", y: 7 }
      ],
      fill: "#E7BA96",name: "Grupo2",
      marker: {dataLabel: {visible: true}},
      type: "Bar",xName: "x",yName: "y"
    },
    {
      type: "Bar",
      dataSource: [
        { x: "Dato7", y: 70 },
        { x: "Dato8", y: 30 },
        { x: "Dato9", y: 13 }
      ],
      fill: "#ef8847",name: "Grupo3",
      marker: {dataLabel: {visible: true}},
      type: "Bar",xName: "x",yName: "y"
    },
    {
      type: "Bar",
      dataSource: [
        { x: "Dato10", y: 60 },
        { x: "Dato11", y: 40 },
        { x: "Dato12", y: 25 }
      ],
      fill: "#f6650a",name: "Grupo4",
      marker: {dataLabel: {visible: true}},
      type: "Bar",xName: "x",yName: "y"
    },
    {
      type: "Bar",
      dataSource: [
        { x: "Dato13", y: 50 },
        { x: "Dato14", y: 100 },
        { x: "Dato15", y: 37 }
      ],
      fill: "#edbfa2",name: "Grupo5",
      marker: {dataLabel: {visible: true}},
      type: "Bar",xName: "x",yName: "y"
    }
  ],
  tooltip: {enable: true},height: "750px",width: "100%",
});
chart.appendTo("#bar-container");

but I can't make the bars bigger or aligned with the labels

Durga Gopalakrishnan · Accepted Answer

Hi Juan,

We suggest you specify enableSideBySidePlacement property as false to achieve your reported scenario. By default, this property is specified as true to place bars one next to another. Since each series points have different x value, each point will be placed with spacing. We have attached modified sample for your reference.





 enableSideBySidePlacement: false,

Screenshot : 



Sample : https://stackblitz.com/edit/fdlwg1

Please revert us if you have any concerns.

Regards,
Durga G

Juan Lazo · Answer

Thank you very much !!, is what I needed.

Durga Gopalakrishnan · Answer

Hi Juan, 
 
Most welcome. Please get back to us if you need any further assistance. We will be happy to assist you. 
 
Regards, 
Durga G