Search code examples
highchartsionic3angular2-highcharts

Ionic 3 Highcharts not visible

I have the following flow in my application:

firstpage --> secondpage (contains highchart) --> thirdpage --> fourthpage --> secondpage

When I go from firstpage to secondpage, the chart is visible. Also when I go back from thirdpage to secondpage, I can see the chart. But when I go from fourthpage to secondpage. Th chart is not there anymore. The data of the chart is static, it does not have any dependencies:

...
import * as HighCharts from 'highcharts';

@Component({
   ...
})
export class SecondPage {
  ...

  constructor(...) {
   ...
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SecondPage');
      this.myChart = HighCharts.chart('container', {
        chart: {
          type: 'line'
        },
        title: {
          text: 'Finanzplan 5 Jahre Mietdauer'
        },
        xAxis: {
          categories: ['1', '2', '3', '4', '5' ]
        },
        yAxis: {
          title: {
            text: 'Euro'
          }
        },
        series: [
          {
            name: 'Jane',
            data: [1, 0, 4]
          },
          {
            name: 'John',
            data: [5, 7, 3]
          }
        ]
      });
  }

}

The call from firstoage and fourthpage are identical:

this.navCtrl.push(SecondPage);

For the call from firstpage to secondpage I get:

<div id="highcharts-8183bcq-0" dir="ltr" class="highcharts-container " style="position: relative; overflow: hidden; width: 23px; height: 400px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><svg version="1.1" class="highcharts-root" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="23" height="400" viewBox="0 0 23 400"><desc>Created with Highcharts 6.0.4</desc><defs><clipPath id="highcharts-8183bcq-1"><rect x="0" y="0" width="0" height="224" fill="none"></rect></clipPath><clipPath id="highcharts-8183bcq-2"><rect x="-99" y="-89" width="99" height="400" fill="none"></rect></clipPath><clipPath id="highcharts-8183bcq-3"><rect x="0" y="0" width="0" height="224" fill="none"></rect></clipPath></defs><rect fill="#ffffff" class="highcharts-background" x="0" y="0" width="23" height="400" rx="0" ry="0"></rect><rect fill="none" class="highcharts-plot-background" x="66" y="89" width="0" height="224"></rect><g class="highcharts-grid highcharts-xaxis-grid "><path fill="none" class="highcharts-grid-line" d="M 65.5 89 L 65.5 313" opacity="1"></path></g><g class="highcharts-grid highcharts-yaxis-grid "><path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 65.5 313.5 L 65.5 313.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 65.5 238.5 L 65.5 238.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 65.5 164.5 L 65.5 164.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 66.5 88.5 L 66.5 88.5" opacity="1"></path></g><rect fill="none" class="highcharts-plot-border" x="66" y="89" width="0" height="224"></rect><g class="highcharts-axis highcharts-xaxis "><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 66.5 313 L 66.5 323" opacity="1"></path><path fill="none" class="highcharts-axis-line" stroke="#ccd6eb" stroke-width="1" d="M 65.5 313.5 L 65.5 313.5"></path></g><g class="highcharts-axis highcharts-yaxis "><text x="23.609375" text-anchor="middle" transform="translate(0,0) rotate(270 23.609375 201)" class="highcharts-axis-title" style="color:#666666;fill:#666666;" y="201"><tspan>Euro</tspan></text><path fill="none" class="highcharts-axis-line" d="M 66 89 L 66 313"></path></g><g class="highcharts-series-group"><g class="highcharts-series highcharts-series-0 highcharts-line-series highcharts-color-0 " transform="translate(66,89) scale(1 1)" clip-path="url(#highcharts-8183bcq-3)"><path fill="none" d="M 0 194.13333333333333 L 0 224 L 0 104.53333333333333" class="highcharts-graph" stroke="#7cb5ec" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path><path fill="none" d="M -10 194.13333333333333 L 0 194.13333333333333 L 0 224 L 0 104.53333333333333 L 10 104.53333333333333" stroke-linejoin="round" visibility="visible" stroke="rgba(192,192,192,0.0001)" stroke-width="22" class="highcharts-tracker"></path></g><g class="highcharts-markers highcharts-series-0 highcharts-line-series highcharts-color-0 highcharts-tracker" transform="translate(66,89) scale(1 1)" clip-path="url(#highcharts-8183bcq-2)"></g><g class="highcharts-series highcharts-series-1 highcharts-line-series highcharts-color-1 " transform="translate(66,89) scale(1 1)" clip-path="url(#highcharts-8183bcq-3)"><path fill="none" d="M 0 74.66666666666666 L 0 14.933333333333337 L 0 134.4" class="highcharts-graph" stroke="#434348" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path><path fill="none" d="M -10 74.66666666666666 L 0 74.66666666666666 L 0 14.933333333333337 L 0 134.4 L 10 134.4" stroke-linejoin="round" visibility="visible" stroke="rgba(192,192,192,0.0001)" stroke-width="22" class="highcharts-tracker"></path></g><g class="highcharts-markers highcharts-series-1 highcharts-line-series highcharts-color-1 highcharts-tracker" transform="translate(66,89) scale(1 1)" clip-path="url(#highcharts-8183bcq-2)"></g></g><text x="12" text-anchor="middle" class="highcharts-title" style="color:#333333;font-size:18px;fill:#333333;" y="24"><tspan>Finanzplan</tspan><tspan dy="21" x="12">5 Jahre</tspan><tspan dy="21" x="12">Mietdauer</tspan><title>Finanzplan 5 Jahre Mietdauer</title></text><text x="12" text-anchor="middle" class="highcharts-subtitle" style="color:#666666;fill:#666666;" y="88"></text><g class="highcharts-legend" transform="translate(-13,346)"><rect fill="none" class="highcharts-legend-box" rx="0" ry="0" x="0" y="0" width="49" height="39" visibility="visible"></rect><g><g><g class="highcharts-legend-item highcharts-line-series highcharts-color-0 highcharts-series-0" transform="translate(8,3)"><path fill="none" d="M 0 11 L 16 11" class="highcharts-graph" stroke="#7cb5ec" stroke-width="2"></path><path fill="#7cb5ec" d="M 12 11 A 4 4 0 1 1 11.999998000000167 10.996000000666664 Z" class="highcharts-point"></path><text x="21" style="color:#333333;font-size:12px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start" y="15"><tspan></tspan><title>Jane</title></text></g><g class="highcharts-legend-item highcharts-line-series highcharts-color-1 highcharts-series-1" transform="translate(8,17)"><path fill="none" d="M 0 11 L 16 11" class="highcharts-graph" stroke="#434348" stroke-width="2"></path><path fill="#434348" d="M 8 7 L 12 11 8 15 4 11 Z" class="highcharts-point"></path><text x="21" y="15" style="color:#333333;font-size:12px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start"><tspan></tspan><title>John</title></text></g></g></g></g><g class="highcharts-axis-labels highcharts-xaxis-labels "><text x="66" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="332" opacity="1">1</text></g><g class="highcharts-axis-labels highcharts-yaxis-labels "><text x="51" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="318" opacity="1"><tspan>0</tspan></text><text x="51" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="243" opacity="1"><tspan>2.5</tspan></text><text x="51" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="168" opacity="1"><tspan>5</tspan></text><text x="51" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="94" opacity="1"><tspan>7.5</tspan></text></g><text x="13" class="highcharts-credits" text-anchor="end" style="cursor:pointer;color:#999999;font-size:9px;fill:#999999;" y="395">Highcharts.com</text></svg></div>

And for the second time (fourthpage --> secondpage) which is when it does not work, I get:

<div id="highcharts-8183bcq-4" style="position: relative; overflow: hidden; width: 23px; height: 400px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" dir="ltr" class="highcharts-container "><svg version="1.1" class="highcharts-root" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="23" height="400" viewBox="0 0 23 400"><desc>Created with Highcharts 6.0.4</desc><defs><clipPath id="highcharts-8183bcq-5"><rect x="0" y="0" width="0" height="224" fill="none"></rect></clipPath></defs><rect fill="#ffffff" class="highcharts-background" x="0" y="0" width="23" height="400" rx="0" ry="0"></rect><rect fill="none" class="highcharts-plot-background" x="66" y="89" width="0" height="224"></rect><g class="highcharts-grid highcharts-xaxis-grid "><path fill="none" class="highcharts-grid-line" d="M 65.5 89 L 65.5 313" opacity="1"></path></g><g class="highcharts-grid highcharts-yaxis-grid "><path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 65.5 313.5 L 65.5 313.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 65.5 238.5 L 65.5 238.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 65.5 164.5 L 65.5 164.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 66.5 88.5 L 66.5 88.5" opacity="1"></path></g><rect fill="none" class="highcharts-plot-border" x="66" y="89" width="0" height="224"></rect><g class="highcharts-axis highcharts-xaxis "><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 66.5 313 L 66.5 323" opacity="1"></path><path fill="none" class="highcharts-axis-line" stroke="#ccd6eb" stroke-width="1" d="M 65.5 313.5 L 65.5 313.5"></path></g><g class="highcharts-axis highcharts-yaxis "><text x="23.609375" text-anchor="middle" transform="translate(0,0) rotate(270 23.609375 201)" class="highcharts-axis-title" style="color:#666666;fill:#666666;" y="201"><tspan>Euro</tspan></text><path fill="none" class="highcharts-axis-line" d="M 66 89 L 66 313"></path></g><g class="highcharts-series-group"><g class="highcharts-series highcharts-series-0 highcharts-line-series highcharts-color-0 " transform="translate(66,89) scale(1 1)" clip-path="url(#highcharts-8183bcq-5)"><path fill="none" d="M 0 194.13333333333333 L 0 224 L 0 104.53333333333333" class="highcharts-graph" stroke="#7cb5ec" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path><path fill="none" d="M -10 194.13333333333333 L 0 194.13333333333333 L 0 224 L 0 104.53333333333333 L 10 104.53333333333333" stroke-linejoin="round" visibility="visible" stroke="rgba(192,192,192,0.0001)" stroke-width="22" class="highcharts-tracker"></path></g><g class="highcharts-markers highcharts-series-0 highcharts-line-series highcharts-color-0 highcharts-tracker" transform="translate(66,89) scale(1 1)"></g><g class="highcharts-series highcharts-series-1 highcharts-line-series highcharts-color-1 " transform="translate(66,89) scale(1 1)" clip-path="url(#highcharts-8183bcq-5)"><path fill="none" d="M 0 74.66666666666666 L 0 14.933333333333337 L 0 134.4" class="highcharts-graph" stroke="#434348" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path><path fill="none" d="M -10 74.66666666666666 L 0 74.66666666666666 L 0 14.933333333333337 L 0 134.4 L 10 134.4" stroke-linejoin="round" visibility="visible" stroke="rgba(192,192,192,0.0001)" stroke-width="22" class="highcharts-tracker"></path></g><g class="highcharts-markers highcharts-series-1 highcharts-line-series highcharts-color-1 highcharts-tracker" transform="translate(66,89) scale(1 1)"></g></g><text x="12" text-anchor="middle" class="highcharts-title" style="color:#333333;font-size:18px;fill:#333333;" y="24"><tspan>Finanzplan</tspan><tspan dy="21" x="12">5 Jahre</tspan><tspan dy="21" x="12">Mietdauer</tspan><title>Finanzplan 5 Jahre Mietdauer</title></text><text x="12" text-anchor="middle" class="highcharts-subtitle" style="color:#666666;fill:#666666;" y="88"></text><g class="highcharts-legend" transform="translate(-13,346)"><rect fill="none" class="highcharts-legend-box" rx="0" ry="0" x="0" y="0" width="49" height="39" visibility="visible"></rect><g><g><g class="highcharts-legend-item highcharts-line-series highcharts-color-0 highcharts-series-0" transform="translate(8,3)"><path fill="none" d="M 0 11 L 16 11" class="highcharts-graph" stroke="#7cb5ec" stroke-width="2"></path><path fill="#7cb5ec" d="M 12 11 A 4 4 0 1 1 11.999998000000167 10.996000000666664 Z" class="highcharts-point"></path><text x="21" style="color:#333333;font-size:12px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start" y="15"><tspan></tspan><title>Jane</title></text></g><g class="highcharts-legend-item highcharts-line-series highcharts-color-1 highcharts-series-1" transform="translate(8,17)"><path fill="none" d="M 0 11 L 16 11" class="highcharts-graph" stroke="#434348" stroke-width="2"></path><path fill="#434348" d="M 8 7 L 12 11 8 15 4 11 Z" class="highcharts-point"></path><text x="21" y="15" style="color:#333333;font-size:12px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start"><tspan></tspan><title>John</title></text></g></g></g></g><g class="highcharts-axis-labels highcharts-xaxis-labels "><text x="66" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="332" opacity="1">1</text></g><g class="highcharts-axis-labels highcharts-yaxis-labels "><text x="51" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="318" opacity="1"><tspan>0</tspan></text><text x="51" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="243" opacity="1"><tspan>2.5</tspan></text><text x="51" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="168" opacity="1"><tspan>5</tspan></text><text x="51" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="94" opacity="1"><tspan>7.5</tspan></text></g><text x="13" class="highcharts-credits" text-anchor="end" style="cursor:pointer;color:#999999;font-size:9px;fill:#999999;" y="395">Highcharts.com</text></svg></div>
Solution

  • I solved the issue with the double div containers by removing secondPage from the call stack after arriving at thirdPage with:

    this.navCtrl.remove(this.navCtrl.last().index);

    Now it works... :)