How to use highcharts - 10 common examples

series: this._currentSeries[index],
          });
        }
      });
      addHighchartsEvent(series, 'show', () => {
        if (this._currentSeries) {
          this.seriesVisibilityChange.emit({
            source: this,
            visible: true,
            series: this._currentSeries[index],
          });
        }
      });
    });

    addHighchartsEvent(this._chartObject, 'redraw', () => {
      this._notifyAfterRender();
    });

    // adds event-listener to highcharts custom event for tooltip closed
    addHighchartsEvent(this._chartObject, 'tooltipClosed', () => {
      this._highChartsTooltipClosed$.next();
    });
    // Adds event-listener to highcharts custom event for tooltip refreshed closed */
    // We cannot type the event param, because the types for highcharts are incorrect
    // tslint:disable-next-line:no-any
    addHighchartsEvent(this._chartObject, 'tooltipRefreshed', (event: any) => {
      this._highChartsTooltipDataChanged$.next({
        data: (event as DtHcTooltipEventPayload).data,
        chart: this._chartObject!,
      });
    });

series: this._currentSeries[index],
          });
        }
      });
      addHighchartsEvent(series, 'show', () => {
        if (this._currentSeries) {
          this.seriesVisibilityChange.emit({
            source: this,
            visible: true,
            series: this._currentSeries[index],
          });
        }
      });
    });

    addHighchartsEvent(this._chartObject, 'redraw', () => {
      this._notifyAfterRender();
    });

    // adds event-listener to highcharts custom event for tooltip closed
    addHighchartsEvent(this._chartObject, 'tooltipClosed', () => {
      this._isTooltipOpen = false;
      this.tooltipOpenChange.emit(false);
      this._tooltipRefreshed.next(null);
    });
    // Adds event-listener to highcharts custom event for tooltip refreshed closed */
    // We cannot type the event param, because the types for highcharts are incorrect
    // tslint:disable-next-line:no-any
    addHighchartsEvent(this._chartObject, 'tooltipRefreshed', (event: any) => {
      if (!this._isTooltipOpen) {
        this._isTooltipOpen = true;
        this.tooltipOpenChange.emit(true);

if (this._currentSeries) {
          this.seriesVisibilityChange.emit({
            source: this,
            visible: true,
            series: this._currentSeries[index],
          });
        }
      });
    });

    addHighchartsEvent(this._chartObject, 'redraw', () => {
      this._notifyAfterRender();
    });

    // adds event-listener to highcharts custom event for tooltip closed
    addHighchartsEvent(this._chartObject, 'tooltipClosed', () => {
      this._isTooltipOpen = false;
      this.tooltipOpenChange.emit(false);
      this._tooltipRefreshed.next(null);
    });
    // Adds event-listener to highcharts custom event for tooltip refreshed closed */
    // We cannot type the event param, because the types for highcharts are incorrect
    // tslint:disable-next-line:no-any
    addHighchartsEvent(this._chartObject, 'tooltipRefreshed', (event: any) => {
      if (!this._isTooltipOpen) {
        this._isTooltipOpen = true;
        this.tooltipOpenChange.emit(true);
      }
      this._tooltipRefreshed.next({
        data: (event as DtHcTooltipEventPayload).data,
        chart: this._chartObject!,
      });

}
      });
    });

    addHighchartsEvent(this._chartObject, 'redraw', () => {
      this._notifyAfterRender();
    });

    // adds event-listener to highcharts custom event for tooltip closed
    addHighchartsEvent(this._chartObject, 'tooltipClosed', () => {
      this._highChartsTooltipClosed$.next();
    });
    // Adds event-listener to highcharts custom event for tooltip refreshed closed */
    // We cannot type the event param, because the types for highcharts are incorrect
    // tslint:disable-next-line:no-any
    addHighchartsEvent(this._chartObject, 'tooltipRefreshed', (event: any) => {
      this._highChartsTooltipDataChanged$.next({
        data: (event as DtHcTooltipEventPayload).data,
        chart: this._chartObject!,
      });
    });

    this._notifyAfterRender();
  }

componentDidMount() {
    const { id, isMobile } = this.props;
    noData(Highcharts);

    Highcharts.setOptions({
      lang: {
        thousandsSep: ","
      }
    });

    const containerId = "profit_loss_chart_container" + id;
    const chartId = "profit_loss_chart" + id;
    // calculate horizontal margins, if mobile 0, else default
    const horizontalMargins = isMobile ? 0 : null;
    // determine height based on mobile or not
    let height = isMobile ? 260 : 170;
    // if the width of container is going to be <= height use 9/16 aspect ratio
    if (this.refs[containerId].clientWidth <= height) {
      height = (9 / 16) * 100 + "%";
    }

window.highchartsGlobalOptions = ((): void => {
  setOptions(DT_CHART_DEFAULT_GLOBAL_OPTIONS);
})();
// Highcharts global options, set outside component so its not set every time a chart is created

window.highchartsGlobalOptions = ((): void => {
  setOptions(DT_CHART_DEFAULT_GLOBAL_OPTIONS);
})();
// Highcharts global options, set outside component so its not set every time a chart is created

subtitle: {
    style: {
      display: 'block',
      right: 0,
      // width: '100%; !important',
      marginBottom: '20px',
      fontSize: '12px',
      lineHeight: 1.5,
      fontWeight: 300,
      color: '#596371',
    },
  }
  /*eslint-enable */
};

Highcharts.setOptions({
  ...THEME
});


const withHighcharts = Composed => {
  return class extends Component {

    constructor(props) {
      super(props);
      this.create = this.create.bind(this);
      this.redraw = this.redraw.bind(this);
      this.destroy = this.destroy.bind(this);
      this._instance = null;
    }

    shouldComponentUpdate(nextProps, nextState) {

this.state = {
            chartOptions: {
                chart: {
                    type: 'solidgauge',
                    height: 150,
                },

                title: null,

                pane: {
                    center: ['50%', '85%'],
    //        size: '140%',
                    startAngle: -90,
                    endAngle: 90,
                    background: {
                        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                        innerRadius: '60%',
                        outerRadius: '100%',
                        shape: 'arc'
                    }
                },

                tooltip: {
                    enabled: false
                },

                plotOptions: {
                    solidgauge: {
                        dataLabels: {
                            y: 5,
                            borderWidth: 0,
                            useHTML: true

const val = this.y < 1 ? '' : this.y;
            return val;
          },
        }
      }
    },
    xAxis: xAxisSettings,
    yAxis: {
      title: {
        text: yAxisLabel
      },
      stackLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold',
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        },
        formatter: function(){
          // Sets the total number of occurences per day
          // If no occurences, displays nothing
          const val = this.total < 1 ? '' : this.total;
          return val;
        },
      },
      min: 0,
      max: 20,
    },
    series: dataSeries
  });

}