CODEWITHSUNDEEP
highcharts
Sabira
Sabira

Reputation: 103

Highcharts - svg vs digital

I've been trying to do some unusual manipulations with chart on load. Using svg renderer I created group elements with text elements in it. Then, I calculated height of each of group elements(headings, credits) and now, I'm trying to update spacingTop/spacingBottom based on those calculations.(please don't ask why I'm not using native highcharts title and credits :) ) Also, I need to extend each Y-Axis gridline, so they begin from zero. However, when I do that I see that my chart doesn't extend those gridlines in the browser but works properly in exported svg. Can someone explain why it happens and how I can make then show in the browser as well.

Thank you in advance! P.S. Gridlines do extend in digital when I don't use chart.update function.

Here is simple implementation: https://jsfiddle.net/sabira/x2uc6809/20/ Please download png||svg to compare browser version and image.

chart: {
        events: {
        load: function(){
          const chart = this;
          const {yAxis} = chart;

          const [headingsHeight, creditsHeight] = [50, 60];

          chart.update({
            chart: {
              spacingTop: 10 + headingsHeight,
              spacingBottom: 11 + creditsHeight,
            },
          });

          const { gridGroup } = yAxis[0];

          const gridLines = findEls(gridGroup, 'path');

          [...gridLines].forEach(extendGridLine);

      }
      }
    },

Upvotes: 0

Views: 61

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

That is caused by the update animation, which makes your code asynchronous. You can disable it in this way:

    chart.update({
      chart: {
        spacingTop: 10 + headingsHeight,
        spacingBottom: 11 + creditsHeight,
      },
    }, true, false, false);

Live demo: https://jsfiddle.net/BlackLabel/e3gamoju/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#update

Upvotes: 1

Related Questions