amcharts / amcharts5 Goto Github PK

Issue

Pie Chart Inner series color - want to set different colors to inner series' slice same as outer slice.

Code

Created a pie chart with two series and given label for each element in the series as below.

Using below versions
Angular - 12.2.0
Angular Material - 12.2.8
Amchart - 5

HTML

<div id="fullpiechart" class="fullPieChartClass"></div>

CSS

.fullPieChartClass{
    width: 33%; height: 100%; display: inline-block
}

Typescript

ngAfterViewInit() {
   // Create root and chart
   let root = am5.Root.new("fullpiechart");
   let chart = root.container.children.push(
     am5percent.PieChart.new(root, {
       innerRadius: am5.percent(30),
       startAngle: -180,
       endAngle: 0,
     })
   );

   // Define data
   let data = [
     {
       country: 'France\nCountry',
       sales: 1,
     },
     {
       country: 'Spain',
       sales: 1,
     },
     {
       country: 'United Kingdom',
       sales: 1,
     },
   ];

   this.createSeries(chart,root,data);
   this.createSeries(chart,root,data);
}

 createSeries(chart:any, root:any,data:any){
      // Create series
      let series = chart.series.push(
       am5percent.PieSeries.new(root, {
         name: 'Series',
         valueField: 'sales',
         categoryField: 'country',
         alignLabels: false,
         startAngle: -180,
         endAngle: 0,
       })
     );
 
     series.data.setAll(data);
     
     series.labels.template.setAll({
       text: "{category}",
       textType: "circular",
       inside: true,
       radius: 10,
       fontSize: 12,
     });
 
     // Configuring slices
     series.slices.template.setAll({
       stroke: am5.color(0xffffff),
       strokeWidth: 2,
     });
 
     series.ticks.template.set('visible', false);
 
     series.get("colors").set("colors", [
       am5.color("#FFD3D1"),
       am5.color("#FFE664"),
       am5.color("#A6D6F5"),
     ]);
 }

Code Output

Please suggest

Hi ,

I have a different render v4 vs v5 when I have NaN values, I want fill like v4
V4 :

V5:

Best Regards

Hello,
datagrouping is not working if the series is added in a second time (on a button click for example).
it works only if in the addSeries() function, I create also an other xAxis. Is it the right way ?

https://codepen.io/gestrade/pen/porPBBY

https://www.amcharts.com/docs/v5/charts/xy-chart/axes/#Basic_location

I am using "@amcharts/amcharts5": "^5.0.0-beta.29"

The code shown in the documentation does not work, there is no gridTemplate property on the xRenderer

let xRenderer = xAxis.get("renderer");
xRenderer.gridTemplate.setAll({
  location: 0.5
});

The following is correct

xAxis.get('renderer').grid.template.setAll({
   location: 0.5
});

On the Axis header page in the Legend in header section the example code should use chart.series.values rather than chart.series since the legend.data.setAll() call expects an array.

var legend = yAxis.axisHeader.children.push(am5.Legend.new(root, {}));
legend.data.setAll(chart.series);

should be

var legend = yAxis.axisHeader.children.push(am5.Legend.new(root, {}));
legend.data.setAll(chart.series.values);

Would be nice if you can add V.4 to V.5 migration docs on release instead of rewriting everything from scratch.

I'm getting the following error:

TypeError: Cannot read properties of undefined (reading 'valueX')
DateAxis.value
/src/.internal/charts/xy/axes/DateAxis.ts:661
  658 | let second = series.dataItems[result.index];
  659 | 
  660 | if (first && second) {
> 661 | 	let open = first.open![fieldName];
      | ^  662 | 	let close = second.close![fieldName];
  663 | 
  664 | 	if (Math.abs(value - open) > Math.abs(value - close)) {
View compiled

It's hard to reproduce consistently but it seems to happen when zooming and mutating series.data

Is it possible to somehow implement zoom of the map using Ctrl/Cmd button, how is it implemented in google maps?
https://developers.google.com/maps/documentation/javascript/overview#The_Hello_World_of_Google_Maps_v3

When you try to scroll, the message "Use ctrl + scroll to zoom the map" is displayed (or trigger some event), but it doesn't prevent the rest of page from scrolling. Using Ctrl/Cmd + MouseWheel the map scaling works correctly, the rest of the page stops scrolling

When creating a map using amcharts5-geodata there is a type error when assigning it to geoJSON value (even when following the example shown in the documentation)

Type 'FeatureCollection' is not assignable to type 'GeoJSON | undefined'. Type 'FeatureCollection' is not assignable to type 'FeatureCollection<Geometry, GeoJsonProperties>'. Types of property 'features' are incompatible. Type 'Feature[]' is not assignable to type 'Feature<Geometry, GeoJsonProperties>[]'. Type 'Feature' is not assignable to type 'Feature<Geometry, GeoJsonProperties>'. Types of property 'geometry' are incompatible. Type 'Polygon | MultiPolygon | MultiLineString | null' is not assignable to type 'Geometry'. Type 'null' is not assignable to type 'Geometry'.ts(2322) MapSeries.d.ts(13, 5): The expected type comes from property 'geoJSON' which is declared here on type 'IMapPolygonSeriesSettings'

using //@ts-ignore above the type error and the map works perfectly fine. However something that should be addressed in the future for sure.

I'm trying migrate amchart4 to amchart5 , my data it's present in the chart, but invisible , colors problems ?

the code , I use Quasar (Vue3) , amchartv4 is always present in project to keep the old charts

import * as am5 from '@amcharts/amcharts5'
import * as am5xy from '@amcharts/amcharts5/xy'

...

createChart() {
// eslint-disable-next-line @typescript-eslint/no-this-alias
var self = this
// Create chart instance
let root = am5.Root.new('linechartdiv');

  root.setThemes([
    am5themes_Animated.new(root)
  ]);

let chart = root.container.children.push(
  am5xy.XYChart.new(root, {
    panX: true,
    wheelable : false,
    wheelX : 'none',
    wheelY : 'none'
  })
)
// Add data
const data = self.resultData.results
  ? self.resultData.results.map(item => ({label: ` (${item.identifier})`, value: item.value})) : []


// Create axes
let xAxis = chart.xAxes.push(
  am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererX.new(root, {
      strokeOpacity: 1,
      strokeWidth: 2,
      fill: am5.color(0x095256),
    })
  })
);

let valueAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

// Create series
let series = chart.series.push(
  am5xy.SmoothedXLineSeries.new(root, {
    name : 'Resutls',
    valueYField: 'value',
    valueXField: 'label',
    xAxis : xAxis,
    yAxis : valueAxis,
    fill: am5.color(0x095256),
    stroke: am5.color(0x095256)
  }));
series.strokes.template.setAll({
  strokeWidth: 2
});
series.fills.template.setAll({visible:true, fillOpacity:0.2})

console.table(data);


const cursor = chart.set("cursor", am5xy.XYCursor.new(root, { behavior: "zoomX" }));
cursor.lineY.set("visible", false);

chart.set("scrollbarX", am5.Scrollbar.new(root, {
  orientation: "horizontal"
}));

let scrollbarX = am5xy.XYChartScrollbar.new(root, {
  orientation: "horizontal",
  height: 50,
});

chart.set("scrollbarX", scrollbarX)

series.data.setAll(data);

series.appear();
chart.appear();

self.skeleton = false;
self.chart = chart;

}
}

I'm in the process of converting am4 to am5 charts and one thing we heavily depend on is Intl support. I don't see this currently documented or supported in am5 and when I try something equivalent to the code in am4:

chart.dateFormatter.dateFormat = { month: "short", day: "numeric" };
chart.dateFormatter.intlLocales = userLocale;

none of this works in am5:

root.dateFormatter.set("dateFormat", { month: "short", day: "numeric" }); // "dateFormat" only supports Strings
root.dateFormatter.set("intlLocales", userLocale); // "intlLocales" is not an available setting on "dateFormatter"
root.locale = am5locales_en_US; // this seems to only be for manually imported locales

I hope I'm missing something or maybe it's just not part of the beta but will be in the release version, yes?

Is it possible to add custom HTML to a tooltip?

Similarly to series.tooltipHTML in amcharts 4

What is the preferred way of hiding a series from start, before rendering the chart? After that, the user should be able to show/hide it manually.

Currently I call series.hide() during creation. This indeed hides the series, but it makes the legend go inverted. So the series is hidden but the legend shows the visible state. Clicking on the legend shows the series but now the legend shows the hidden state. Hope that makes sense.

Docs seem to show that we can manipulate the circles of a ForceDirected Chart like any other... most properties seem to work, however, I cannot find any combination of manual settings, nor templateField that will ever let me change the fill color of these circles from default.

series.circles.template.setAll({
  fill : am5.color(0x67B7DC)
});

Is this a bug is there just a more obscure way of doing this related to the hierarchical data? Tried hooking templates for nodes as well but so far with no luck.

If try to display tooltip programmatically, then it isn't displayed until you hover over it. After hover over element, then the tooltip can be correct display programmatically.

Demo: https://codepen.io/nizhnikovskiy/pen/powpgRG?editors=0010

I have setup a codepen copied from the amcharts5 demo. I have only added a cursor to the codepen with behavior set to "zoomXY". If all categories are not included in the zoom selection, the date axis will refuse to zoom.

Selection that will cause the date axis to refuse to zoom

Result (notice the x scrollbar was unaffected)

Selection that the date axis will properly zoom

Result (notice the x scrollbar was properly updated)

The pattern I have noticed is that if any category is excluded from the zoom then the date axis will refuse zoom. When zooming it appears that the chart begins to animate the date axis zoom, but gets reset a fraction of a second later resulting in no zoom.

Relevant Codepen
https://codepen.io/derekbking/pen/PojrQNG

On the Zoom and pan page it says to use the following to hide the zoom-out button:

This property appears to exist (setting it doesn't throw an error and in TS the typings suggest it exits) but setting it does not affect the button visibility.

Using setPrivate seems to work. ex:

chart.zoomOutButton.setPrivate("visible", false);

Hi Team,

I am trying to use amChart5 with react and With amChart5 every element is separately created like root, chart, xAxis, yAxis, legend etc.

Now the issue is while creating a series, we need to provide the reference to xAxis and yAxis.

Add series can be a generic and re-usable function. To make this work, one has to store the reference of every entity (root, chart, xAxis, yAxis, legend), so that the series function can use this to add series to the chart and update legends.

This seems too much unnecessary work on the developer end. Whereas "chart.series.push" should be intelligent enough to get bonded with the default xAxis, yAxis until specified otherwise. Same for the legends as well, while adding new series the legend should get updated automatically, but that doesn't seem to happen right now.

As I checked the typed definition of chart and root, there are no functions as well, by which one can get the reference to different pieces of the chart at run time.
For example: chart.getxAxis(), chart.getxAxisById()

Can you help with your inputs on this, if there is any other way to get around with building a dynamic chart (add series, removing series) without keeping a reference of all different entities?

Can you please help me with codepen or pointer to documentation for dynamically adding/ removing the series from chart?

Thanks,
Manish

How customize zoomOut Button , example like Rectangle with border radius.

Hi!
It seems

rangeDataItem.get("axisFill").setAll({
    fill: color,
    fillOpacity: 0.5
  });

doesnt work
https://codepen.io/team/amcharts/pen/XWRoPVB

On the docs page for bullets the first two code snippets incorrectly use new.

I have an XY chart with one x axis (time) and multiple Y axis. I set the leftAxesContainer to verticalLayout to make the y axis sit on top of one another and it works as expected.

 this.chart.leftAxesContainer.setAll({
    layout: this.root.verticalLayout
 });

I'm dynamically adding and removing Y axis based on user selections and would like to ensure the y axis are always in the same order regardless of which axis are enabled. I tried using this.chart.yAxes.insertIndex(0, ...) to insert new axis as the desired index, but it seem like the y axes always stack in the order they were added (top down) rather than the index.

For example if I have 3 Y axis, A, B, and C

this.chart.yAxes.insertIndex(0, A)
this.chart.yAxes.insertIndex(1, B)
this.chart.yAxes.insertIndex(2, C)

Results in a chart that looks (as expected) like:
A
B
C

But

this.chart.yAxes.insertIndex(2, A)
this.chart.yAxes.insertIndex(1, B)
this.chart.yAxes.insertIndex(0, C)

Also results in a chart that looks like:
A
B
C

But I expected it would look like
C
B
A

What is the best way to control the vertical draw order of the series?

Thanks!

I'm using XYChartScrollbar selectionMin and selectionMax to fetch data from a server so that if a user zooms or pans etc. my app will fetch the appropriate data. I'm dealing with hundreds of megabytes of data so I need to use aggregations to download / display it.

The problem I'm having is that when using animations, the properties I'm using will update until the animation finishes which delays the fetch.

Is there a way of getting the "final" values before animation finishes?

I'm trying to turn bullets on/off with the templateField in a LineSeries but this seems to work a bit differently than in am4. There are two issues that I'm encountering when setting properties in the data;

• the disabled property of a Circle does not seem to work, so I have to use opacity instead
• the opacity can only be turned off but not on

Example:
LineSeries with a number of data points where only one bullet should show. Previously, I used to be able to set the opacity to 0 when creating the bullet and then use the data binding to specify just one data point where I turn it on:

const data = [
  { date: "2020-01-15", value: 234 },
  { date: "2020-01-16", value: 567 },
  { date: "2020-01-17", value: 012, opacity: 1 },
  { date: "2020-01-15", value: 345 },
  ...
]

In am5, this approach does not seem to work anymore (CodePen). What does work however, is when I don't set opacity on bullet creation (all bullets show), then I have to set opacity in the data for all bullets except the one I want to see:

const data = [
  { date: "2020-01-15", value: 234, bulletSettings: { opacity: 0 } },
  { date: "2020-01-16", value: 567, bulletSettings: { opacity: 0 } },
  { date: "2020-01-17", value: 012 },
  { date: "2020-01-15", value: 345, bulletSettings: { opacity: 0 } },
  ...
]

Is this the expected behavior?

Seems like the LineSeries Y-axis pre-zoom is not working:

series.events.once("datavalidated", function(ev) {
  xAxis.zoomToValues(0, 100); // does work
  yAxis.zoomToValues(0, -100); // does not work
});

Setting the start: 0.5 property on Y-axis creation also does not work. The yAxis.zoomToValues issue is seen here in this CodePen on line 287. The Y-axis zoom does work however when called after a delay on line 298.

The events "rangechanged" and "propertychanged" don't seem as reliable to use in amcharts 5 as in 4.

These events no longer seem to capture changes that originate in the chart itself rather than in the scrollbar.

I'm using this to fetch new data based on date range.

Are there other options in amcharts5 that are preferable or is this a bug?

Is it possible to set a variable radius on pie charts, similar to v4?

https://codepen.io/team/amcharts/pen/OQeGmZ

Issue

Multiline labelling - want the label to split on the next line or how can we add one more label below a label

Code

Created a pie chart with two series and given label for each element in the series as below.

Using below versions
Angular - 12.2.0
Angular Material - 12.2.8
Amchart - 5

HTML

<div id="fullpiechart" class="fullPieChartClass"></div>

CSS

.fullPieChartClass{
    width: 33%; height: 100%; display: inline-block
}

Typescript

ngAfterViewInit() {
   // Create root and chart
   let root = am5.Root.new("fullpiechart");
   let chart = root.container.children.push(
     am5percent.PieChart.new(root, {
       innerRadius: am5.percent(30),
       startAngle: -180,
       endAngle: 0,
     })
   );

   // Define data
   let data = [
     {
       country: 'France\nCountry',
       sales: 1,
     },
     {
       country: 'Spain',
       sales: 1,
     },
     {
       country: 'United Kingdom',
       sales: 1,
     },
   ];

   this.createSeries(chart,root,data);
   this.createSeries(chart,root,data);
}

 createSeries(chart:any, root:any,data:any){
      // Create series
      let series = chart.series.push(
       am5percent.PieSeries.new(root, {
         name: 'Series',
         valueField: 'sales',
         categoryField: 'country',
         alignLabels: false,
         startAngle: -180,
         endAngle: 0,
       })
     );
 
     series.data.setAll(data);
     
     series.labels.template.setAll({
       text: "{category}",
       textType: "circular",
       inside: true,
       radius: 10,
       fontSize: 12,
     });
 
     // Configuring slices
     series.slices.template.setAll({
       stroke: am5.color(0xffffff),
       strokeWidth: 2,
     });
 
     series.ticks.template.set('visible', false);
 
     series.get("colors").set("colors", [
       am5.color("#FFD3D1"),
       am5.color("#FFE664"),
       am5.color("#A6D6F5"),
     ]);
 }

Code Output

Please suggest

I have followed the guidelines for improving performance from v4 (couldn't find that section for v5?), so I've done things like enabled grouping of data, removed animation theme, removed any data processors and legends. These tweaks seems to mostly involve handling datapoints on the xAxis. My problem is that I have a need of showing hundreds of different lines in the same graph and doing so, even with just a few (30) datapoints will cause the page to render to a halt.

Do you have any suggestions on improving performance when using many (hundreds of thousands) lineseries in the same graph?

Hello! I'm trying to move from v4 to v5, and found that DateAxis and AxisRendererX have no skipEmptyPeriods parameter. Is that done on purpose, and there's another way to render data without breaks on timeline? Or it's just fell out from wagon while moving to v5?

Cant create chart with CategoryDateAxis

example:
https://stackblitz.com/edit/js-n9il79?file=index.js

In my application I'm using vuejs3 and am4charts. To take advantage of the vue setup hook, which is called before or while the dom is rendered, i'm using a lot of chart.moveHtmlContainer('chartdiv') after the charts and series and everything are created and then set the data.
I created the charts like that create(undefined, XYChart)

But in version 5 I can't create a Root element without a htmltag or html element and I can't create a chart without a root element.

Im looking for some kind of setup and render later solution.
Will there be a way to do it like I did it in version 4?

There seems to be a bug in the am5.DataProcessor. According to the docs, any dates not in timestamp format should be parsed with the data processor:

series.data.processor = am5.DataProcessor.new(root, { dateFields: ["date"] });
series.data.setAll(data);

❌ If the data contains dates in Date format, the dates are not parsed and the chart renders empty. CodePen of the issue here: https://codepen.io/sassomedia/pen/VwWgMNG?editors=0010

✅ If the data however contains dates in String format, the parsing works as expected with the additional dateFormat prop:

series.data.processor = am5.DataProcessor.new(root, {
  dateFields: ["date"],
  dateFormat: "yyyy-MM-dd",
});
series.data.setAll(data);

Hi, I'm just wondering is there any plan from amcharts team to build this features? As I know that it won't be fixed in amcharts 4 (amcharts/amcharts4#2152), and would like to know if this feature is under consideration or not...

Issue
Chart draw only first 2-4 point if call setAll data in setTimeout function. Chart will refreshing and looks good after scroll. Code was copied from example:
https://github.com/amcharts/amcharts5/blob/dc7b71b13287d0a3017835769ebbcb5b4bb90beb/examples/shared/xy-evenly-spaced-date-axis/index.ts

Code
https://codepen.io/dnmsk/pen/jOLqQeP
(Setting data to chart is wrapped in setTimeout function only)

When you hover over any bullet through the central block, the map hover event is also triggered. The pointermove event works throughout the document, not just the map.

Demo: https://codepen.io/nizhnikovskiy/pen/KKqQgGJ

Hi Team,

I had a requirement of dynamically adding and removing multiple series and I have implemented the same. However, when I am removing the series, the series continues to remain visible on the chart.

Below is the codepen forked from the demos to replicate the behavior:
https://codepen.io/mkdudeja/pen/qBjxEXO

Try clicking on Delete Series, though series is deleted from internal data structures yet displayed on the chart. Also, legends and tooltips not updating on series delete.

Looking forward to your response on this.

Thanks,
Manish Kumar

Hi,

I am trying to add a custom legend to Sankey plot. For some reason, the text and the marker are not getting properly aligned. Here is an example.

https://codepen.io/vaibhavad/pen/VwWVbPV

When container of chart change width, positioning is buggy.
The bug is reproduced if you try to scroll the chart left-right, zoom, resize the container and try to do it again.

Demo: https://codepen.io/nizhnikovskiy/pen/ExXoxLM?editors=1010

I have data coming in the format: [{date: '2021-10-01', value: 200} ... ] and as amcharts require javascript dates it would be nice to use the dataprocessor to convert this automatically.

Following the docs, this is what I've tried:

series.data.setAll(data);
                    series.data.processor = am5.DataProcessor.new(root, {
                        numericFields: ["value"],
                        dateFields: ["date"],
                        dateFormat: "yyyy-MM-dd",
                        emptyAs: 0,
                    });

However, this does not seem to do anything. No errors, just an empty graph. As soon as I start converting the dates in the backend like this: DateTime.fromISO(date).toMillis(), it works.

When used with Angular 12, it throws the following errors

Error: node_modules/@amcharts/amcharts5/.internal/charts/map/MapChart.d.ts:192:35 - error TS2503: Cannot find namespace 'GeoJSON'.

192     protected _geometryColection: GeoJSON.GeometryCollection;
                                      ~~~~~~~


Error: node_modules/@amcharts/amcharts5/.internal/charts/map/MapLine.d.ts:8:16 - error TS2503: Cannot find namespace 'GeoJSON'.

8     geometry?: GeoJSON.LineString | GeoJSON.MultiLineString;
                 ~~~~~~~


Error: node_modules/@amcharts/amcharts5/.internal/charts/map/MapLine.d.ts:8:37 - error TS2503: Cannot find namespace 'GeoJSON'.

8     geometry?: GeoJSON.LineString | GeoJSON.MultiLineString;
                                      ~~~~~~~


Error: node_modules/@amcharts/amcharts5/.internal/charts/map/MapLineSeries.d.ts:19:16 - error TS2503: Cannot find namespace 'GeoJSON'.

19     geometry?: GeoJSON.LineString | GeoJSON.MultiLineString;
                  ~~~~~~~


Error: node_modules/@amcharts/amcharts5/.internal/charts/map/MapLineSeries.d.ts:19:37 - error TS2503: Cannot find namespace 'GeoJSON'.

19     geometry?: GeoJSON.LineString | GeoJSON.MultiLineString;
                                       ~~~~~~~


Error: node_modules/@amcharts/amcharts5/.internal/charts/map/MapLineSeries.d.ts:61:29 - error TS2503: Cannot find namespace 'GeoJSON'.

61     protected _types: Array<GeoJSON.GeoJsonGeometryTypes>;
                               ~~~~~~~


Error: node_modules/@amcharts/amcharts5/.internal/charts/map/MapPointSeries.d.ts:12:16 - error TS2503: Cannot find namespace 'GeoJSON'.

12     geometry?: GeoJSON.Point | GeoJSON.MultiPoint;
                  ~~~~~~~


Error: node_modules/@amcharts/amcharts5/.internal/charts/map/MapPointSeries.d.ts:12:32 - error TS2503: Cannot find namespace 'GeoJSON'.

12     geometry?: GeoJSON.Point | GeoJSON.MultiPoint;
                                  ~~~~~~~


Error: node_modules/@amcharts/amcharts5/.internal/charts/map/MapPointSeries.d.ts:92:29 - error TS2503: Cannot find namespace 'GeoJSON'.

92     protected _types: Array<GeoJSON.GeoJsonGeometryTypes>;
                               ~~~~~~~


Error: node_modules/@amcharts/amcharts5/.internal/charts/map/MapPointSeries.d.ts:102:61 - error TS2503: Cannot find namespace 'GeoJSON'.

102     protected _positionBulletReal(bullet: Bullet, geometry: GeoJSON.Geometry, coordinates: [number, number], angle?: number): void;
                                                                ~~~~~~~


Error: node_modules/@amcharts/amcharts5/.internal/charts/map/MapPolygon.d.ts:9:16 - error TS2503: Cannot find namespace 'GeoJSON'.

9     geometry?: GeoJSON.MultiPolygon | GeoJSON.Polygon;
                 ~~~~~~~


Error: node_modules/@amcharts/amcharts5/.internal/charts/map/MapPolygon.d.ts:9:39 - error TS2503: Cannot find namespace 'GeoJSON'.

9     geometry?: GeoJSON.MultiPolygon | GeoJSON.Polygon;
                                        ~~~~~~~


Error: node_modules/@amcharts/amcharts5/.internal/charts/map/MapPolygonSeries.d.ts:15:16 - error TS2503: Cannot find namespace 'GeoJSON'.

15     geometry?: GeoJSON.Polygon | GeoJSON.MultiPolygon;
                  ~~~~~~~


Error: node_modules/@amcharts/amcharts5/.internal/charts/map/MapPolygonSeries.d.ts:15:34 - error TS2503: Cannot find namespace 'GeoJSON'.

15     geometry?: GeoJSON.Polygon | GeoJSON.MultiPolygon;
                                    ~~~~~~~


Error: node_modules/@amcharts/amcharts5/.internal/charts/map/MapPolygonSeries.d.ts:43:29 - error TS2503: Cannot find namespace 'GeoJSON'.

43     protected _types: Array<GeoJSON.GeoJsonGeometryTypes>;
                               ~~~~~~~


Error: node_modules/@amcharts/amcharts5/.internal/charts/map/MapSeries.d.ts:5:16 - error TS2503: Cannot find namespace 'GeoJSON'.

5     geometry?: GeoJSON.Geometry;
                 ~~~~~~~


Error: node_modules/@amcharts/amcharts5/.internal/charts/map/MapSeries.d.ts:6:20 - error TS2503: Cannot find namespace 'GeoJSON'.

6     geometryType?: GeoJSON.GeoJsonGeometryTypes;
                     ~~~~~~~


Error: node_modules/@amcharts/amcharts5/.internal/charts/map/MapSeries.d.ts:13:15 - error TS2503: Cannot find namespace 'GeoJSON'.

13     geoJSON?: GeoJSON.GeoJSON;
                 ~~~~~~~


Error: node_modules/@amcharts/amcharts5/.internal/charts/map/MapSeries.d.ts:58:29 - error TS2503: Cannot find namespace 'GeoJSON'.

58     protected _types: Array<GeoJSON.GeoJsonGeometryTypes>;
                               ~~~~~~~


Error: node_modules/@amcharts/amcharts5/.internal/charts/map/MapSeries.d.ts:59:24 - error TS2503: Cannot find namespace 'GeoJSON'.

59     _geometries: Array<GeoJSON.Geometry>;
                          ~~~~~~~

Any idea how to fix these errors?

Hi!

I want to change fill color on stepline series by using heat rules custom function. Is it possible ?

example:
https://stackblitz.com/edit/vue-dvdmto?file=src%2FChart.vue

Hi!

Looks like the chart will register mouse events even when overflow parent container.

example:
https://stackblitz.com/edit/js-n9il79

Hey all,

I have an XY chart with wheelY action is set to zoomX. Zooming with the scroll wheel works as expected.

However setting zoomX to none as shown below does not disable the scroll wheel zoom action. The pan action is disabled as expected

chart.setAll({
    panX: false,
    wheelY: "none"
});

Here is a demonstration video.

And Here is a JSfiddle demonstrating this.

Hi, I have 2 questions regarding adding a vertical red line in a bar chart:

1. I cannot get it centralised in the date column, how can I fix it?
2. I want to add an icon or just an "i" letter at the top of the vertical line (as shown in the screenshot), but I couldn't find a way but to use a label, is there a better way to do it? with the label, I also couldn't put it on the top of the line without changing all the dates label with it!

const trendLine = xAxis.axisRanges.create();
trendLine.date = new Date(2021, 0, 2);
trendLine.grid.stroke = am4core.color('#D0021B');
trendLine.grid.strokeWidth = 2;
trendLine.grid.strokeOpacity = 1;
trendLine.grid.strokeDasharray = '4,4';
trendLine.label.html = '<span style="display: flex; align-items: center; justify-content: center; font-weight: bold;width: 20px; height: 20px; background: red; border-radius: 50%;color: white">i</span>';
trendLine.label.inside = true;

Hi Team,

I had a requirement of dynamically adding and removing multiple series with their own independent axes (Y1 & Y2) and I have implemented the same. However, when I am removing the series, I am removing the bound yAxes as well. But that action tends to remove the two yAxes from the List.

Below is the codepen forked from the demos to replicate the behavior:
https://codepen.io/mkdudeja/pen/NWgyKgZ

Try clicking on Delete Series 1, you'll notice two axes will be removed, and so on. And, at some point, you'll have some series with no underlying yAxes, and then removing that series will throw Index out of bound error.

Worth mentioning that the remove axes feature works fine if all the axes are on the left(default) side. The issue only comes when it's of mixed type (some on left, some on right), or all axes are on right.

Looking forward to your response on this.

Thanks,
Manish Kumar

amcharts4 way of defining colors of the nodes doesn't work in amchart5. How can I set the color of each node?

Issue

Different color to different label slice (currently all labels taking same label color) - want to set different colors to different label slice.

Code

Created a pie chart with two series and given label for each element in the series as below.

Using below versions
Angular - 12.2.0
Angular Material - 12.2.8
Amchart - 5

HTML

<div id="fullpiechart" class="fullPieChartClass"></div>

CSS

.fullPieChartClass{
    width: 33%; height: 100%; display: inline-block
}

Typescript

ngAfterViewInit() {
   // Create root and chart
   let root = am5.Root.new("fullpiechart");
   let chart = root.container.children.push(
     am5percent.PieChart.new(root, {
       innerRadius: am5.percent(30),
       startAngle: -180,
       endAngle: 0,
     })
   );

   // Define data
   let data = [
     {
       country: 'France\nCountry',
       sales: 1,
     },
     {
       country: 'Spain',
       sales: 1,
     },
     {
       country: 'United Kingdom',
       sales: 1,
     },
   ];

   this.createSeries(chart,root,data);
   this.createSeries(chart,root,data);
}

 createSeries(chart:any, root:any,data:any){
      // Create series
      let series = chart.series.push(
       am5percent.PieSeries.new(root, {
         name: 'Series',
         valueField: 'sales',
         categoryField: 'country',
         alignLabels: false,
         startAngle: -180,
         endAngle: 0,
       })
     );
 
     series.data.setAll(data);
     
     series.labels.template.setAll({
       text: "{category}",
       textType: "circular",
       inside: true,
       radius: 10,
       fontSize: 12,
     });
 
     // Configuring slices
     series.slices.template.setAll({
       stroke: am5.color(0xffffff),
       strokeWidth: 2,
     });
 
     series.ticks.template.set('visible', false);
 
     series.get("colors").set("colors", [
       am5.color("#FFD3D1"),
       am5.color("#FFE664"),
       am5.color("#A6D6F5"),
     ]);
 }

Code Output

Please suggest

Hey,

I have an XY chart with a DateAxis (x) and Value Axis (y). I enabled panX on the chart and set a large maxDeviation on the x axis so that the user can pan left and right beyond the edge of the existing data. I setup a 'debounce' timer to detect when the user has stopped panning (ie 500ms since the last pan) and then fetch more series data and update the chart.

...

// Create chart
this.chart = this.root.container.children.push(
  am5xy.XYChart.new(this.root, {
    panX: true,
    panY: false,
    wheelY: "zoomX",
  })
);

// Add x (date) axis
this.xAxis = this.chart.xAxes.push(
  am5xy.DateAxis.new(this.root, {
    renderer: am5xy.AxisRendererX.new(this.root, {}),
    maxDeviation: 4, // Allows user to zoom out beyond data (as % of data width ex. 4 = 400%)
    baseInterval: {
      count: 1,
      timeUnit: "second",
    },
  })
);

...

This works well when snapTooltip is not enabled, but when I enable tooltips I often see the following error when panning.

this.series[measureName] = this.chart.series.push(
  am5xy.LineSeries.new(this.root, {
    name: measureName,
    xAxis: this.xAxis,
    yAxis: yAxis,
    valueYField: "val",
    valueXField: "ts",
    snapTooltip: true,  // <-- After commenting this the error no longer presents itself
    tooltip: am5.Tooltip.new(this.root, {}),
  })
);

From what I can tell this is coming from inside amcharts somewhere and I can't 'catch' the error. Please let me know if there is some additional data I can provide to help debug this.

Hello , in previous v4 , we use :

series.adapter.add('tooltipText', function () {
var text = '{text}\n'
chart.series.each(function (item) {
text += '[' + item.stroke.hex + ']●[/] [bold]' + item.name + ':[/] {' + item.dataFields.valueY + '}\n'
})
return text
})
to aggregate values in single tooltip like :

How do i v5 ?