CODEWITHSUNDEEP
javascriptchartsamchartsamcharts4lineseries
TheLiquidCharcoal
TheLiquidCharcoal

Reputation: 193

How to set startLocation for lineSeries in amCharts?

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/

Upvotes: 1

Views: 971

Answers (1)

Tony
Tony

Reputation: 66

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;

Upvotes: 0

Related Questions