Exercise/highcharts 2

[KamilKubik]

No description provided.

[magdalena-gut]

Good job 🎉 A small SVG rendering correction is required 📈

[magdalena-gut]

Adding a circle on load is not necessary when you use render as well. Try to figure out, how to add a circle only by using render event. Also, take note, that your circle is not fully responsive (you added a fixed radius value, but it should be changing as x and y)

[KamilKubik]

I moved the circle render to the render event, refactored the whole event and added the responsiveness (r parameter which I missed). Thanks!

[magdalena-gut]

Nice! I have only two suggestions:

• radius is not quite responsive this way (it changes via Math.random() every time when you redraw the chart, but it should only base on the value from the chart and scale relative to the chart ( toPixels() is a good choice 🥇 )
• if you first check that the circle doesn't exist, you avoid a few code lines

Generally, you can simplify it following way:

    events: {
      render: function() {
        const chart = this,
          yAxis = this.yAxis[0];

        if (!chart.customCircle) {
          chart.customCircle = chart.renderer
            .circle()
            .attr({
              stroke: "blue",
              "stroke-width": 3,
              fill: "none"
            })
            .add();
        }

        chart.customCircle.attr({
          x: chart.yAxis[0].center[0] + chart.plotTop,
          y: chart.yAxis[0].center[1] + chart.plotLeft,
          r: chart.yAxis[0].toPixels(chart.yAxis[0].dataMax)
        });

      }
    }