Setting global line styles - Amchart

Question

I have a function which creates a series line in amcahrt.

Within in I have the following lines

let bullet = series.bullets.push(new am4charts.CircleBullet())
 bullet.circle.stroke = am4core.color('#fff')
 bullet.circle.radius = 5
 series.strokeWidth = 2

I want to set these on the chart globally rather than at series line level as they will always be the same.

Does this chart have some global options so I could do something like

mychart.series.strokeWidth = 2

You may well want set individual stroke widths but IMHO the normal use case would be to have them all the same width.

score 0 · Answer 1 · answered May 15 '20 at 02:18

You can create a custom theme to automatically apply the desired styles like so:

function am4themes_myTheme(target) {
  if (target instanceof am4charts.CircleBullet && target.circle) {
    target.circle.stroke = am4core.color("#fff");
    target.circle.radius = 5;
  }
  if (target instanceof am4charts.LineSeries) {
    target.strokeWidth = 2;
  } 
}

am4core.useTheme(am4themes_myTheme);

All you need to do afterward is just create the series and bullet instance and the properties will automatically be set.

Demo below:

am4core.useTheme(am4themes_animated);

function am4themes_myTheme(target) {
  if (target instanceof am4charts.CircleBullet && target.circle) {
    target.circle.stroke = am4core.color("#fff");
    target.circle.radius = 5;
  }
  if (target instanceof am4charts.LineSeries) {
    target.strokeWidth = 2;
  } 
}

am4core.useTheme(am4themes_myTheme);

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

// Add data
chart.data = [{
  "date": new Date(2018, 0, 1),
  "value": 450,
  "value2": 362,
  "value3": 699
}, {
  "date": new Date(2018, 0, 2),
  "value": 269,
  "value2": 450,
  "value3": 841
}, {
  "date": new Date(2018, 0, 3),
  "value": 700,
  "value2": 358,
  "value3": 800
}, {
  "date": new Date(2018, 0, 4),
  "value": 490,
  "value2": 367,
  "value3": 700
}];

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGridDistance = 30;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
function createSeries(field, name) {
  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = field;
  series.dataFields.dateX = "date";
  series.name = name;
  series.tooltipText = "{dateX}: [b]{valueY}[/]";
  
  var bullet = series.bullets.push(new am4charts.CircleBullet());
  
  return series;
}

createSeries("value", "Series #1");
createSeries("value2", "Series #2");
createSeries("value3", "Series #3");

chart.legend = new am4charts.Legend();
chart.cursor = new am4charts.XYCursor();

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>

Setting global line styles - Amchart

1 Answers1