'How to control amcharts stroke width?

I am creating a chart width horizontal bar. I have removed the X grid line. and now I want to control Y grid line width.

This is current chart looks like.

Then i have tried this line categoryAxis.renderer.grid.template.dx = -110

This helps me to control width but it's offset to the left side. You can see that line cross outside of the chart see the below screenshot.

Expected results

/**
 * --------------------------------------------------------
 * This demo was created using the amCharts V4 preview release.
 * 
 * V4 is the latest installement in amCharts data viz
 * library family, to be released in the first half of
 * 2018.
 *
 * For more information and documentation visit:
 * https://www.amcharts.com/docs/v4/
 * --------------------------------------------------------
 */
am4core.options.commercialLicense = true;
am4core.useTheme(am4themes_animated);

// Create chart instance
var chart = am4core.create("amchart1", am4charts.XYChart);

// Add data
chart.data = [ {
  "category": "Gaudi2 (96GB, 7nm)",
  "value": 685,
  "latency": "685",
  "rightValue": "",
  "color": am4core.color("#2C6EAC"),
},{
  "category": "A100 (80GB, 7nm)",
  "value": 348,
  "latency": "348",
  "rightValue": "2.0x",
  "color": am4core.color("#70AD47"),
},{
  "category": "A100 (40GB, 7nm)",
  "value": 287,
  "latency": "287",
  "rightValue": "2.4x",
  "color": am4core.color("#70AD47"),
},{
  "category": "V100 (12nm)",
  "value": 129,
  "latency": "129",
  "rightValue": "5.3x",
  "color": am4core.color("#70AD47"),
}];

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";

var yAxis2 = chart.yAxes.push(new am4charts.CategoryAxis());
yAxis2.dataFields.category = "category";
yAxis2.renderer.grid.template.location = 0;
yAxis2.renderer.labels.template.adapter.add("text", function(text, target) {
  return "{rightValue}";
});
yAxis2.renderer.opposite = true;
yAxis2.renderer.labels.template.fill = am4core.color("#fff");
yAxis2.renderer.labels.template.fontSize = 22;
yAxis2.renderer.labels.template.dx = -120;
yAxis2.renderer.grid.template.disabled = true;

//yAxis2.renderer.maxLabelPosition = 20;
//yAxis2.renderer.labels.template.dy = -20;


categoryAxis.renderer.grid.template.location = 0.49;
categoryAxis.renderer.grid.template.stroke  = am4core.color("#ffffff");
categoryAxis.renderer.grid.template.strokeWidth = 3;
categoryAxis.renderer.grid.template.strokeDasharray = "5,5";
categoryAxis.renderer.grid.template.strokeOpacity = 1;
//categoryAxis.renderer.grid.template.fixedColumnWidth = 50;

categoryAxis.renderer.grid.template.dx = -110;

// var container = am4core.create("container", am4core.Container);
// container.width = am4core.percent(50);
// container.height = am4core.percent(100);

//categoryAxis.renderer.grid.template.startLocation = 110;
//categoryAxis.renderer.grid.template.endLocation  = 10000;
// categoryAxis.renderer.grid.template.maxWidth = 110;
// categoryAxis.renderer.grid.template.innerWidth = 110;
// categoryAxis.renderer.grid.template.measuredWidth = 110;
// categoryAxis.renderer.grid.template.pixelWidth = 110;
// categoryAxis.renderer.grid.template.minWidth = 110;
// categoryAxis.renderer.grid.template.outerWidth = 110;

categoryAxis.renderer.minGridDistance = 20;
categoryAxis.renderer.labels.template.align = "right";

categoryAxis.renderer.cellStartLocation = 0.1;
categoryAxis.renderer.cellEndLocation = 0.8;

categoryAxis.renderer.line.strokeWidth = 5;
categoryAxis.renderer.line.strokeOpacity = 1;
categoryAxis.renderer.line.stroke = am4core.color("#666666");

//categoryAxis.renderer.grid.template.disabled = true;


var  valueAxis = chart.xAxes.push(new am4charts.ValueAxis()); 
valueAxis.min = 0;
valueAxis.max = 800;
valueAxis.strictMinMax = true;
valueAxis.renderer.labels.template.disabled = false;
valueAxis.renderer.minGridDistance = 50;
valueAxis.renderer.line.strokeWidth = 5;
valueAxis.renderer.line.strokeOpacity = 1;
valueAxis.renderer.line.stroke = am4core.color("#666666");
valueAxis.renderer.grid.template.disabled = true;

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "value";
series.dataFields.categoryY = "category";


var categoryLabel = series.bullets.push(new am4charts.LabelBullet());
categoryLabel.label.horizontalCenter = "right";
categoryLabel.label.text = "{latency}";
categoryLabel.label.textAlign = "end";
categoryLabel.label.dx = -10;
categoryLabel.label.fontSize = 18;
categoryLabel.label.fontWeight = 700;
categoryLabel.label.fill = am4core.color("#fff");

// Add chart title
var title = chart.titles.create();
title.text = "(TensorFlow, Sequences/sec)";
title.fontSize = 14;
title.fontFamily = '14';
title.fontWeight = 400;
title.marginBottom = 15;
title.marginLeft = 155;
title.align = "left";

// Add chart title
var title = chart.titles.create();
title.text = "BERT Training Throughput";
title.fontSize = 18;
title.fontWeight = 700;
title.marginBottom = 5;
title.marginLeft = 155;
title.align = "left";

series.columns.template.height = am4core.percent(100);
series.columns.template.propertyFields.fill = "color";
series.columns.template.propertyFields.stroke = "color";

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
#amchart1{
    width: 1000px;
    height: 400px;
    background: rgb(255,255,255);
    background: linear-gradient(125deg, rgba(255,255,255,1) 0%, rgba(168,170,173,1) 100%);
    font-family: 'Roboto', sans-serif;
}

HTML

/**
     * --------------------------------------------------------
     * This demo was created using the amCharts V4 preview release.
     * 
     * V4 is the latest installement in amCharts data viz
     * library family, to be released in the first half of
     * 2018.
     *
     * For more information and documentation visit:
     * https://www.amcharts.com/docs/v4/
     * --------------------------------------------------------
     */
    am4core.options.commercialLicense = true;
    am4core.useTheme(am4themes_animated);

    // Create chart instance
    var chart = am4core.create("amchart1", am4charts.XYChart);

    // Add data
    chart.data = [ {
      "category": "Gaudi2 (96GB, 7nm)",
      "value": 685,
      "latency": "685",
      "rightValue": "",
      "color": am4core.color("#2C6EAC"),
    },{
      "category": "A100 (80GB, 7nm)",
      "value": 348,
      "latency": "348",
      "rightValue": "2.0x",
      "color": am4core.color("#70AD47"),
    },{
      "category": "A100 (40GB, 7nm)",
      "value": 287,
      "latency": "287",
      "rightValue": "2.4x",
      "color": am4core.color("#70AD47"),
    },{
      "category": "V100 (12nm)",
      "value": 129,
      "latency": "129",
      "rightValue": "5.3x",
      "color": am4core.color("#70AD47"),
    }];

    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "category";

    var yAxis2 = chart.yAxes.push(new am4charts.CategoryAxis());
    yAxis2.dataFields.category = "category";
    yAxis2.renderer.grid.template.location = 0;
    yAxis2.renderer.labels.template.adapter.add("text", function(text, target) {
      return "{rightValue}";
    });
    yAxis2.renderer.opposite = true;
    yAxis2.renderer.labels.template.fill = am4core.color("#fff");
    yAxis2.renderer.labels.template.fontSize = 22;
    yAxis2.renderer.labels.template.dx = -120;
    yAxis2.renderer.grid.template.disabled = true;

    //yAxis2.renderer.maxLabelPosition = 20;
    //yAxis2.renderer.labels.template.dy = -20;


    categoryAxis.renderer.grid.template.location = 0.49;
    categoryAxis.renderer.grid.template.stroke  = am4core.color("#ffffff");
    categoryAxis.renderer.grid.template.strokeWidth = 3;
    categoryAxis.renderer.grid.template.strokeDasharray = "5,5";
    categoryAxis.renderer.grid.template.strokeOpacity = 1;
    //categoryAxis.renderer.grid.template.fixedColumnWidth = 50;

    categoryAxis.renderer.grid.template.dx = -110;

    // var container = am4core.create("container", am4core.Container);
    // container.width = am4core.percent(50);
    // container.height = am4core.percent(100);

    //categoryAxis.renderer.grid.template.startLocation = 110;
    //categoryAxis.renderer.grid.template.endLocation  = 10000;
    // categoryAxis.renderer.grid.template.maxWidth = 110;
    // categoryAxis.renderer.grid.template.innerWidth = 110;
    // categoryAxis.renderer.grid.template.measuredWidth = 110;
    // categoryAxis.renderer.grid.template.pixelWidth = 110;
    // categoryAxis.renderer.grid.template.minWidth = 110;
    // categoryAxis.renderer.grid.template.outerWidth = 110;

    categoryAxis.renderer.minGridDistance = 20;
    categoryAxis.renderer.labels.template.align = "right";

    categoryAxis.renderer.cellStartLocation = 0.1;
    categoryAxis.renderer.cellEndLocation = 0.8;

    categoryAxis.renderer.line.strokeWidth = 5;
    categoryAxis.renderer.line.strokeOpacity = 1;
    categoryAxis.renderer.line.stroke = am4core.color("#666666");

    //categoryAxis.renderer.grid.template.disabled = true;


    var  valueAxis = chart.xAxes.push(new am4charts.ValueAxis()); 
    valueAxis.min = 0;
    valueAxis.max = 800;
    valueAxis.strictMinMax = true;
    valueAxis.renderer.labels.template.disabled = false;
    valueAxis.renderer.minGridDistance = 50;
    valueAxis.renderer.line.strokeWidth = 5;
    valueAxis.renderer.line.strokeOpacity = 1;
    valueAxis.renderer.line.stroke = am4core.color("#666666");
    valueAxis.renderer.grid.template.disabled = true;

    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueX = "value";
    series.dataFields.categoryY = "category";


    var categoryLabel = series.bullets.push(new am4charts.LabelBullet());
    categoryLabel.label.horizontalCenter = "right";
    categoryLabel.label.text = "{latency}";
    categoryLabel.label.textAlign = "end";
    categoryLabel.label.dx = -10;
    categoryLabel.label.fontSize = 18;
    categoryLabel.label.fontWeight = 700;
    categoryLabel.label.fill = am4core.color("#fff");

    // Add chart title
    var title = chart.titles.create();
    title.text = "(TensorFlow, Sequences/sec)";
    title.fontSize = 14;
    title.fontFamily = '14';
    title.fontWeight = 400;
    title.marginBottom = 15;
    title.marginLeft = 155;
    title.align = "left";

    // Add chart title
    var title = chart.titles.create();
    title.text = "BERT Training Throughput";
    title.fontSize = 18;
    title.fontWeight = 700;
    title.marginBottom = 5;
    title.marginLeft = 155;
    title.align = "left";

    series.columns.template.height = am4core.percent(100);
    series.columns.template.propertyFields.fill = "color";
    series.columns.template.propertyFields.stroke = "color";

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
    #amchart1{
        width: 1000px;
        height: 400px;
        background: rgb(255,255,255);
        background: linear-gradient(125deg, rgba(255,255,255,1) 0%, rgba(168,170,173,1) 100%);
        font-family: 'Roboto', sans-serif;
    }

<script type='text/javascript' src='https://www.amcharts.com/lib/4/core.js?ver=1.3' id='amcharts-external-04aff9558c8839f145fd5cc256639700-js'></script>
    <script type='text/javascript' src='https://www.amcharts.com/lib/4/charts.js?ver=1.3' id='amcharts-external-689e41b2904e902b2850d0c956b0dd49-js'></script>
    <script type='text/javascript' src='https://www.amcharts.com/lib/4/themes/animated.js?ver=1.3' id='amcharts-external-f9e3ea073812ed2a7c70bc70da040609-js'></script>

<div id="amchart1" style="width: 750px; height: 400px;"></div>

Any help will be appreciated. Thank you.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to control amcharts stroke width?

Sources

Related Questions