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.
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;
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).