Angular Highcharts - chart reference is gone after click [closed]

Asked
Active3 hr before
Viewed126 times

3 Answers

referencehighchartschart
90%

When you initialize the chart using its constructor Highcharts,Chart, the options object is the first parameter you pass

Example_snippet/controller/utility/_reference.js/ var chart1 = Highcharts.chart(. . .
var chart1 = Highcharts.chart({
   chart: {
      renderTo: 'container',
      type: 'bar'
   },
   title: {
      text: 'Fruit Consumption'
   },
   xAxis: {
      categories: ['Apples', 'Bananas', 'Oranges']
   },
   yAxis: {
      title: {
         text: 'Fruit eaten'
      }
   },
   series: [{
      name: 'Jane',
      data: [1, 0, 4]
   }, {
      name: 'John',
      data: [5, 7, 3]
   }]
});
Copy
Step 2 continued with var chart1 = Highcharts.chart(. . .
var chart1 = Highcharts.chart({
   chart: {
      renderTo: 'container',
      type: 'bar'
   },
   title: {
      text: 'Fruit Consumption'
   },
   xAxis: {
      categories: ['Apples', 'Bananas', 'Oranges']
   },
   yAxis: {
      title: {
         text: 'Fruit eaten'
      }
   },
   series: [{
      name: 'Jane',
      data: [1, 0, 4]
   }, {
      name: 'John',
      data: [5, 7, 3]
   }]
});
Step 3 continued with // Bad code:var options = new . . .
// Bad code:var options = new Object();options.chart = new Object();options.chart.renderTo = 'container';options.chart.type = 'bar';options.series = new Array();options.series[0] = new Object();options.series[0].name = 'Jane';options.series[0].data = new Array(1, 0, 4);Copy
Step 4 continued with // Bad code:var options = new . . .
// Bad code:var options = new Object();options.chart = new Object();options.chart.renderTo = 'container';options.chart.type = 'bar';options.series = new Array();options.series[0] = new Object();options.series[0].name = 'Jane';options.series[0].data = new Array(1, 0, 4);
Step 5 continued with // Good code:var options = { . . .
// Good code:var options = {    chart: {        renderTo: 'container',        type: 'bar'    },    series: [{        name: 'Jane',        data: [1, 0, 4]    }]};Copy
Step 6 continued with // Good code:var options = { . . .
// Good code:var options = {    chart: {        renderTo: 'container',        type: 'bar'    },    series: [{        name: 'Jane',        data: [1, 0, 4]    }]};
Step 7 continued with var chart = new Highcharts.Cha. . .
var chart = new Highcharts.Chart(options);
Copy
Step 8 continued with var chart = new Highcharts.Cha. . .
var chart = new Highcharts.Chart(options);
Step 9 continued with options.series.push({ name:. . .
options.series.push({
   name: 'John',
   data: [3, 4, 2]
}) Copy
Step 10 continued with options.series.push({ name:. . .
options.series.push({
   name: 'John',
   data: [3, 4, 2]
})
Step 11 continued with Highcharts.setOptions({ cha. . .
Highcharts.setOptions({
   chart: {
      backgroundColor: {
         linearGradient: [0, 0, 500, 500],
         stops: [
            [0, 'rgb(255, 255, 255)'],
            [1, 'rgb(240, 240, 255)']
         ]
      },
      borderWidth: 2,
      plotBackgroundColor: 'rgba(255, 255, 255, .9)',
      plotShadow: true,
      plotBorderWidth: 1
   }
});
var chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'container',
         },
         xAxis: {
            type: 'datetime'
         },
         series: [{
                  data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                  pointStart: Date.UTC(2010, 0, 1),
                  pointInterval: 3600 * 1000 // one hour    }]});var chart2 = new Highcharts.Chart({    chart: {        renderTo: 'container2',        type: 'column'    },    xAxis: {        type: 'datetime'    },    series: [{        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],        pointStart: Date.UTC(2010, 0, 1),        pointInterval: 3600 * 1000 // one hour    }]});Copy
Step 12 continued with Highcharts.setOptions({ cha. . .
Highcharts.setOptions({
   chart: {
      backgroundColor: {
         linearGradient: [0, 0, 500, 500],
         stops: [
            [0, 'rgb(255, 255, 255)'],
            [1, 'rgb(240, 240, 255)']
         ]
      },
      borderWidth: 2,
      plotBackgroundColor: 'rgba(255, 255, 255, .9)',
      plotShadow: true,
      plotBorderWidth: 1
   }
});
var chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'container',
         },
         xAxis: {
            type: 'datetime'
         },
         series: [{
                  data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                  pointStart: Date.UTC(2010, 0, 1),
                  pointInterval: 3600 * 1000 // one hour    }]});var chart2 = new Highcharts.Chart({    chart: {        renderTo: 'container2',        type: 'column'    },    xAxis: {        type: 'datetime'    },    series: [{        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],        pointStart: Date.UTC(2010, 0, 1),        pointInterval: 3600 * 1000 // one hour    }]});
load more v
88%

Fires when clicking on the plot background, One parameter, event, is passed to the function, containing common event information

Example_snippet/controller/utility/_highcharts.js/ click: function(e) { conso. . .
click: function(e) {
   console.log(
      Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', e.xAxis[0].value),
      e.yAxis[0].value
   )
}
72%

Your observable gets wrong chart object when you export chart, You need to check inner property chart

Example_snippet/controller/utility/_highcharts.js/ private callback(chart: Highch. . .
private callback(chart: Highcharts.ChartObject) {
      if (chart.options.chart['forExport']) {
         return;
      }