ArcElements should allow circular: false for flattened style

[4minus]

Feature Proposal

The polar / radial scale, like used in radar charts, allows the option "circular: false" for a flat styling. It would be awesome, if ArcElements could understand this option as well, so it's possible to combine the non-circular styled scale with the polar area chart.

Possible Implementation

Here i attached a short sketch.

[LeeLenaleee]

You could already achieve something like this by using a radar chart with multiple datasets like so:

const options = {
  type: 'radar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [0, 19, 19, 0, 0, 0],
        backgroundColor: 'pink'
      },
      {
        label: '# of Votes',
        data: [0, 0, 0, 9, 9, 0],
        backgroundColor: 'orange'
      },
      {
        label: '# of Votes',
        data: [0, 0, 0, 0, 12, 12],
        backgroundColor: 'blue'
      },
      {
        label: '# of Votes',
        data: [4, 4, 0, 0, 0, 0],
        backgroundColor: 'green'
      },
      {
        label: '# of Votes',
        data: [0, 0, 6, 6, 0, 0],
        backgroundColor: 'red'
      },
      {
        label: '# of Votes',
        data: [12, 0, 0, 0, 0, 12],
        backgroundColor: 'purple'
      }
    ]
  },
  options: {}
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

https://jsfiddle.net/bf5ntagj/

[4minus]

You could already achieve something like this by using a radar chart with multiple datasets like so:

const options = {
  type: 'radar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [0, 19, 19, 0, 0, 0],
        backgroundColor: 'pink'
      },
      {
        label: '# of Votes',
        data: [0, 0, 0, 9, 9, 0],
        backgroundColor: 'orange'
      },
      {
        label: '# of Votes',
        data: [0, 0, 0, 0, 12, 12],
        backgroundColor: 'blue'
      },
      {
        label: '# of Votes',
        data: [4, 4, 0, 0, 0, 0],
        backgroundColor: 'green'
      },
      {
        label: '# of Votes',
        data: [0, 0, 6, 6, 0, 0],
        backgroundColor: 'red'
      },
      {
        label: '# of Votes',
        data: [12, 0, 0, 0, 0, 12],
        backgroundColor: 'purple'
      }
    ]
  },
  options: {}
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

https://jsfiddle.net/bf5ntagj/

Cool and creative workaround, thanks @LeeLenaleee! I'll definitely consider it, but i'm working in a webapp which generates those kind of charts generically, the number of "sides" varies a lot in a range between 2 or 3 up to 15-20, so filling up those different-sized-arrays with zeroes at the rights spots programmatically may become messy. Also i think there are some trade-offs regarding tooltip-bahaviour and label display.

I messed around with the ArcElement borderRadius trying to achive some similar style, but this is not the right way to do it...

[etimberg]

I don't think we'll get to this before 3.8.0 releases, but I'm happy to look at a PR

[4minus]

Thanks @etimberg for the outlook. I'm not sure if i'm skilled enough to do it on my own, but maybe i'll give it a try.

[4minus]

awesome! thank you guys!