amcharts / amcharts5

The newest, fastest, and most advanced amCharts charting library for JavaScript and TypeScript apps.
Other
355 stars 95 forks source link

Polar area chart for wind rose #1792

Closed lianghua1987 closed 1 day ago

lianghua1987 commented 1 week ago

Question I am using amchart5 to display the wind rose chart which works perfectly except for xAxis on 0 degree.

Below code works for other degrees.

    const xAxisRenderer = am5radar.AxisRendererCircular.new(this.root, {
      minGridDistance: 30,
      cellStartLocation: -0.5,
      cellEndLocation: 0.5
    });

Current: image

Expect:

image

martynasma commented 6 days ago

The only workaround I can think of is to remove negative cellStartLocation, move grid to the middle, and rotate the whole chart using its startAngle.

Here's an example: https://codepen.io/team/amcharts/pen/GRVboVZ/1cef68fc8462639e48a062675e9697b0?editors=0010

The downside is that the startAngle is dependent on number of items, so you might need to tweak it for your specific chart.

lianghua1987 commented 1 day ago

Thanks @martynasma. That works!!! I have to keep cellStartLocation and add additional startLocation on xAxis to render the perfect wind rose