gunk.rico
Posts: 2
Joined: Tue Dec 06, 2022 1:28 am

label for polar chart with bubble

Hi All,

I found difficulties when trying to add bubble name and yaxis label like below:
anyone know how to produce this:
Image

Code: Select all

series = [];
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions = {
            chart: {
              polar: true,
              width: 1300,
              height: 750
            },
            title: {
              text: ''
            },
            pane: {
              size: '90%'
            },
            tooltip: {
              useHTML: true,
              headerFormat: '<div class="p-3 mt-2 mr-2 section-container overflow">',
              pointFormat: '<h6><b>Pulse Score</b></h6>' +
                '<table class="table table-striped financialyear">' +
                '<thead class="bg-blue">' +
                '<tr class="header-color">' +
                '<th class="bg-white no-clickable no-border year-selector">' +
                'Financial Year <br/>' +
                '</th>' +
                '</tr>' +
                '</thead>' +
                '<tbody class="bg-light-blue">' +
                '<tr class="pt-3 mt-3">' +
                '<td class="data-title">Self assessment:</td>' +
                '</td>' +
                '</tr>' +
                '<tr class="border-bottom">' +
                '<td class="data-title">Manager assessment:</td>' +
                '</tr>' +
                '</tbody>' +
                '</table>',
              footerFormat: '</div>',
              followPointer: true
            },
            xAxis: {
              min: 0,
              max: 360,
              visible: false
            },
            yAxis: {
                min: 0,
                max: 7,
                gridLineColor: '#f49d32',
                tickInterval: 1,
                labels: {
                  formatter: function () {

                    if (this.value === 2) {
                        return '3M';
                    }

                    if (this.value === 3) {
                      return '6M';
                    }

                    if (this.value === 4) {
                      return '9M';
                    }

                    if (this.value === 5) {
                      return '12M';
                    }

                    if (this.value === 6) {
                      return 'Due within';
                    }

                    return '';
                  }

                }
            },
            legend: {
              enabled: false
            },
            credits: {
              enabled: false
            },
            series: []
        };
Attachments
5f1d01ab-4e63-4290-b6bd-9d5396c67d65.jpg
5f1d01ab-4e63-4290-b6bd-9d5396c67d65.jpg (86.56 KiB) Viewed 176 times
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: label for polar chart with bubble

Hello gunk.rico,

Welcome to our forum and thanks for contacting us with your question.

According to the horizontal y-axis labels, there is already a topic on our forum related to that, take a look: viewtopic.php?f=9&t=49783

Unfortunately, creating the bubble labels as you pointed out on a screen is not possible using the API. I have prepared a custom solution which possible way to achieve that, see: https://jsfiddle.net/BlackLabel/wcyfgoqr/

Let me know if the solutions meet your expectations,
Kind Regards!
Kamil Kubik
Highcharts Developer
gunk.rico
Posts: 2
Joined: Tue Dec 06, 2022 1:28 am

Re: label for polar chart with bubble

kamil.k wrote: Wed Dec 07, 2022 12:32 pm Hello gunk.rico,

Welcome to our forum and thanks for contacting us with your question.

According to the horizontal y-axis labels, there is already a topic on our forum related to that, take a look: viewtopic.php?f=9&t=49783

Unfortunately, creating the bubble labels as you pointed out on a screen is not possible using the API. I have prepared a custom solution which possible way to achieve that, see: https://jsfiddle.net/BlackLabel/wcyfgoqr/

Let me know if the solutions meet your expectations,
Kind Regards!
thank you for your reply, it is very helpful
i still have some questions:
1. How to create line for Y-axis
2. How to create bubble name line for each bubble
Screenshot 2022-12-08 132629.png
Screenshot 2022-12-08 132629.png (180.12 KiB) Viewed 144 times
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: label for polar chart with bubble

That's great to hear you found it helpful!

You can easily create the line for the y-axis the same way as for the bubbles and adjust its position. You can use the path element but my recommendation is to use the rect element. You can read more about all possible SVG elements to render and their settings here: https://api.highcharts.com/class-refere ... VGRenderer

According to your second question, note that in the provided solution, I mapped through the all series points, so the line appears for every object in the bubble type series.data (for every bubble). All you need is to adjust the correct path position which goes a little beyond the scope of our forum as it is not connected directly to the highcharts API. Here is a great article about the paths, take a look: https://developer.mozilla.org/en-US/doc ... rial/Paths

Let me know if will have any problems implementing these features,
Regards!
Kamil Kubik
Highcharts Developer

Return to “Highcharts Usage”