Labels in Scatter/Bubble Charts (Nine Months Later)

[Jeffrey Phillips]

Hello Highcharts

Apparently, it is still not possible to create a labeled scatterplot using Highcharts Cloud.

1. Go to https://www.highcharts.com/demo/bubble and view the bubble chart.

Screen Shot 2019-03-01 at 4.30.05 PM.png (175.03 KiB) Viewed 4748 times

2. Open the bubble chart in Highcharts Cloud by clicking the button. The result is incorrect.

Screen Shot 2019-03-01 at 4.26.53 PM.png (219.36 KiB) Viewed 4748 times

This has been broken since Highcharts JS v6.1.0. Are there any plans to correct this?

[rafalS]

Hi Jeffrey Phillips,

Sorry for the inconveniences you experience.
Let's start from the beginning. I opened the chart you provided in Cloud and it displays a bit differently:

Cloud bubble.PNG (62.02 KiB) Viewed 4739 times

How exactly would you like to display it?
You want to display additional point information (label)? Am I right?

Kind regards

[Jeffrey Phillips]

Look at the x-axis of your example. That's not fat intake.

>How exactly would you like to display it?
Exactly like the first example.

[rafalS]

Jeffrey,

I know that above chart didn't make a sense, but I just wanted to be sure how exactly you would like it to be displayed.

Since Cloud 3.0 release (December last year) the data structure has changed a little and please, forgive us, we didn't check and update all our demos.

All you need to do is change the data to provide (x, y, z) values + labels:

Cloud data.PNG (127.7 KiB) Viewed 4733 times

And then change the xAxis type to linear.

One more time I am sorry if that frustrated you. Let me know if you have any further questions.

Best regards!

ps. I reported the demo in the link you provided and will make sure that the demo will be updated as soon as possible.

[Jeffrey Phillips]

Hooray, my scatter plots work again! Thank you!
https://cloud.highcharts.com/show/ygirawi

One unrelated question: The blue logo in the lower left corner appears correctly in this view, but not at all in the editor. Any insight? I use this code to insert it:

Code: Select all

Highcharts.merge(true, options, {
   chart: {
  spacingBottom: 30,
        events: {
            load: function() {
                this.renderer.image('https://energy101.com/weg_logo.svg',5,383,95,12)
                    .add();
            }
        }
    }

});

[rafalS]

Jeffrey,

It is probably because you render your image 383px from the top. By default, the chart's height is 400 so your image is 17px from the bottom and fits perfectly. But when chart's height is different than 400, for example 600, then your image is 383 from top which is somewhere in the middle of your chart.

Here is a code that will calculate the chart's height and place your image 17px from the bottom regardless what your chart's height is:

Code: Select all

chart: {
    spacingBottom: 30,
    events: {
      load: function() {
        this.renderer.image('https://energy101.com/weg_logo.svg', 5, this.plotTop + this.plotHeight + this.marginBottom - 17, 95, 12)
          .add();
      }
    }
  }

this.plotTop + this.plotHeight + this.marginBottom is full chart's height.

Regards.

[Jeffrey Phillips]

You rock. Thanks again!

[rafalS]

You're welcome