1

I am using amCharts for my final project of college. I am using column series and line series together to show data on the same chart. However I need to shift line series to the left but the columns.

In current situation it looks like this: Both line series are starting from the middle of the first instance of X-axis. enter image description here

It needs to be something like this: both line series are starting from very left.

enter image description here

Setting up setLocation on xAxis is shifting columns to the left as well. I need to shift only line series to very left.

let xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
xAxis.dataFields.category = 'category';
xAxis.renderer.cellStartLocation = 0.1;
xAxis.renderer.cellEndLocation = 0.9;
xAxis.renderer.grid.template.location = 0;
xAxis.renderer.labels.template.fontSize = 10;
xAxis.startLocation = -5;

Here is the code block for LineSeries:

function createLineSeries(value, name, color, dasharray){
  let series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = value;
  series.dataFields.categoryX = 'category';
  series.name = name;
  series.tensionX = 0.8;
  series.tensionY = 1;
  series.strokeWidth = 3;
  
  
  if (dasharray) {
    series.strokeDasharray = dasharray;
  }

  if(color) {
    series.stroke = am4core.color(color); 
  }

  series.events.on('hidden', arrangeColumns);
  series.events.on('shown', arrangeColumns);

  
}

Here is the link to jsfiddle: https://jsfiddle.net/liquidcharcoal/7wn1qgrj/

TheLiquidCharcoal
  • 163
  • 7

1 Answers1

0

The explanation here is very clear and works for me: https://www.amcharts.com/docs/v4/concepts/axes/positioning-axis-elements/#Controlling_axis_and_cell_lengths

In short, set:

xAxis.startLocation = 0.5;
xAxis.endLocation = 0.5;
Tony
  • 66
  • 6
  • As pointed in the question, using startLocation will shift the columns as well (so will hide a part of them) so using startLocation and endLocation on the xAxis isn't possible. – Fabrice Lefloch Oct 27 '21 at 09:11