angulartypescriptamchartsamcharts4

amcharts in Angular: ColumnSeries 'stroke' and 'fill' not a function


I am making a Gantt Chart in amcharts (Angular/Typescript), and everything goes smoothly save coloring the columns of a series.

Imports:

import * as am4core from '@amcharts/amcharts4/core';
import * as am4charts from '@amcharts/amcharts4/charts';

import {
    create,
    options,
    useTheme,
    color
} from '@amcharts/amcharts4/core';

Creating the ColumnSeries():

private createColumnSeries(name: string, seriesData: GanttChartPoint[]): ColumnSeries {
    const series = new ColumnSeries();

    const colorForColumn = color(this.colorMap.get(name));
    series.stroke(colorForColumn);
    series.fill(colorForColumn);
    series.strokeOpacity = 1;

    series.data = seriesData;

    series.columns.template.width = am4core.percent(70);

    series.dataFields.openValueX = `startTime`;
    series.dataFields.valueX = `endTime`;
    series.dataFields.categoryY = 'resourceKey';
    series.columns.template.tooltipText = this._tooltipText;

    return series;

}

Typescript gives me the error in the IDE:

This expression is not callable.   No constituent of type 'Color | Pattern | LinearGradient | RadialGradient' is callable.

In the browser, I get:

TypeError: series.stroke is not a function.

Everything else works fine, including all functions on ColumnSeries.

Same error for:

series.columns.template.stroke(colorForColumn);
series.columns.template.fill(colorForColumn);

I also tried:

series.columns.template.propertyFields.fill = this.colorMap.get(name);
series.columns.template.propertyFields.stroke = this.colorMap.get(name);

which gives no error but does not have any effect on the chart.

this.colorMap.get(name) gives back a string (e.g. '#fcba03' ), which works as expected.


Solution

  • According to AmCharts4 Series Template documentation,

    let series = chart.series.push(new am4charts.ColumnSeries());
    series.columns.template.stroke = am4core.color("#ff0000"); // red outline
    series.columns.template.fill = am4core.color("#00ff00"); // green fill
    

    Hence, your code should be:

    series.columns.template.stroke = colorForColumn;
    series.columns.template.fill = colorForColumn;
    

    Sample Solution on StackBlitz

    Note: Since no data and chart sample were provided in the question, hence I provide a sample demo to reproduce the issue and solution (The chart result maybe looks different from yours).


    Reference

    Gantt Chart