'How to set custom scale to polar area chart?


The Problem:

I am using polar area chart. For slices in this chart, each value after the largest value should appear one level smaller. The level is as follows: for example, if the value after a 38 slice is 6, it should look like 37. Or I should be able to set it to the level I want. My question is all about sizing the slices on the polar area.


What I get:

What I get

What I want:

What I want

Sorry for my bad drawing. You can think what i want is like:

scaling very small slices close to large slice.


Methods I tried:

  • I tried changing the scale and ticks parameters from the link chartjs axes settings but without success.
  • I put the index data after sorting the array as data into the dataset. It worked as I wanted, but this time the values appeared as index values.
  • Charts.js polar area scales I tried this also but not worked.

A solution can be reached from the two methods I tried, but I could not.

Code example here:

    function SetWorkflowChart(labels, datas, labelColors) {

            //label colors

            // workflow stats chart
            const workflowdata = {
                labels: labels,
                datasets: [{
                    normalized: true,
                    data: datas, // example data: [38, 5,3]  
                    backgroundColor: labelColors,
                    borderColor: "rgba(0, 0, 0, 0.0)"
                }]
            };
            const workflowconfig = {
                type: 'polarArea',
                data: workflowdata,
                options: {
                    scales: {
                        r: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                display: false //try2 i tried to set ticks for scale
                            },
                            suggestedMin: 5, //try1
                            suggestedMax: 20,//try1
                        }
                    },
                    plugins: {
                        legend: {
                            display: false,
                            position: "right"

                        },

                    },
                    responsive: false


                }
            };
            workflowChart = new Chart(
                document.getElementById('WorkFlowStatsChart'),
                workflowconfig
            );


        }

I'll be pleased if you pay attention.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source