stoke + overlap

by amcharts

HTML

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chart-template"></div>

CSS

#chart-template {
  width: 400px;
  height: auto;
  min-height: 400px;
  border: 1px solid red;
}

JavaScript

am4core.useTheme(am4themes_animated);
var chart = am4core.create("chart-template", am4charts.GaugeChart);

var backgroundAxis = chart.xAxes.push(new am4charts.ValueAxis());
backgroundAxis.min = 0;
backgroundAxis.max = 1;
backgroundAxis.strictMinMax = true;
backgroundAxis.renderer.grid.template.disabled = true;
backgroundAxis.renderer.labels.template.disabled = true;

var backgroundOutline = backgroundAxis.axisRanges.create();
backgroundOutline.value = backgroundAxis.min;
backgroundOutline.endValue = backgroundAxis.max;
backgroundOutline.axisFill.fill = am4core.color("white");
backgroundOutline.axisFill.fillOpacity = 1;
backgroundOutline.axisFill.stroke = am4core.color("gray");
backgroundOutline.axisFill.strokeWidth = 1;
backgroundOutline.axisFill.strokeOpacity = 0.4;
backgroundOutline.axisFill.radius = am4core.percent(95);
backgroundOutline.grid.disabled = true;

// enable gadient?
if (false) {
	var gradient = new am4core.LinearGradient();
	gradient.rotation = -90;
	gradient.addColor(am4core.color("white"), 0, 0);
	gradient.addColor(am4core.color("gray"), 1, 0.02);
	backgroundOutline.axisFill.strokeWidth = 1; // this has to be above 1 for gradient to work
	backgroundOutline.axisFill.stroke = gradient;
}

var backgroundMinOutline = backgroundAxis.axisRanges.create();
backgroundMinOutline.value = backgroundAxis.min;
backgroundMinOutline.grid.stroke = backgroundOutline.axisFill.stroke;
backgroundMinOutline.grid.strokeWidth = backgroundOutline.axisFill.strokeWidth;
backgroundMinOutline.grid.strokeOpacity = backgroundOutline.axisFill.strokeOpacity;
backgroundMinOutline.label.text = "" + backgroundMinOutline.value;

var backgroundMaxOutline = backgroundAxis.axisRanges.create();
backgroundMaxOutline.value = backgroundAxis.max;
backgroundMaxOutline.grid.stroke = backgroundOutline.axisFill.stroke;
backgroundMaxOutline.grid.strokeWidth = backgroundOutline.axisFill.strokeWidth;
backgroundMaxOutline.grid.strokeOpacity =...