How to get constant width columns in DateAxis?

someden commented 2 years ago

Example: https://stackblitz.com/edit/react-ho61sf?file=src%2FChart.js

What I have: Screenshot 2022-02-11 at 19 29 09

What I need: Screenshot 2022-02-11 at 19 29 34

I have tied to set width:

    series.columns.template.setAll({
      width: am5.percent(70), // <- NOT WORK
      templateField: 'columnSettings',
    });

It works only after changes in select.

Check, please, example. What did I miss?

martynasma commented 2 years ago

Well, the issue here is that when you dynamically set baseInterval on a DateAxis it takes only in next frame, whereas setting data makes it get parsed immediately.

We'll need to figure out a way to do it properly, whether by a workaround or by internal changes.

In the interim, delaying setting data a few milliseconds seems to do the trick (although we'll be looking for a better workaround):

setTimeout(() => {
  seriesRef.current?.data.setAll(data);
}, 10);

A couple of other things that jumped out at me:

1) DateAxis requires baseInterval. Even if you set empty data, it may result in a nasty critical error if it's not there right from the start.

2) No need to set data on a DateAxis. It's not using it, so it's a waste of CPU.

Will get back to you on the first issue.

someden commented 2 years ago

Thanks for workaround. And thanks for correction about setting data on a DateAxis. I copied it from the docs, but didn't notice that it's related only for CategoryAxis.

martynasma commented 2 years ago

Fixed in 5.1.5.

[5.1.5] - 2022-02-22

Added

minSize setting added to Flow (Chord and Sankey) series. It's a relative value to the sum of all values in the series. If set, this relative value will be used for small-value nodes when calculating their size. For example, if it's set to 0.01, small nodes will be sized like their value is 1% of the total sum of all values in series.

Changed

Direction of vertical panning with mouse wheel in an XYChart was inverted to make it consistent with OS native scrolling direction.

Fixed

Fixing ES6 module detection by BundlePhobia (Issue 294).
Parsing of dates using "i" format was not working properly when no milliseconds were supplied.
Using minZoomCount and maxZoomCount on a GaplessDateAxis was not working properly.
Sometimes vertical XYChart scrollbar was not reacting to chart's pan via mouse drag or wheel.
Using mouse wheel on a chart that was setup to pan was also zooming in/out in addition to pan.
In some cases grid on GaplessDateAxis was not being placed properly. Grid and Label placement improved.
ForceDirectedTree could freeze when used with Animated theme in some cases.
Changing of baseInterval on DateAxis was not properly working in some cases.
In some cases, when no animated theme was used, a state on a Sprite was not applied.
Setting data on MapSeries after geoJSON was updated was not working properly which resulted heat rules not to be applied.
It was difficult to make a selection close to the start/end of plot area on RadarChart.
When XYChart was fully zoomed in, using mouse wheel would start panning the chart instead of zoom.

Full change log.

Download options.

Make sure you clear your browser cache after upgrading. And feel free to contact us again if you are still experiencing this issue.

amcharts / amcharts5