How to use the highcharts/modules/no-data-to-display function in highcharts

componentDidMount() {
    noData(Highcharts)

    Highcharts.setOptions({
      lang: {
        thousandsSep: ','
      }
    })

    this.marketPriceChart = new Highcharts.Chart('market_price_history_chart', {
      title: {
        text: null
      },
      chart: {
        height: 300 // mirror this height in css container height declaration
      },
      lang: {
        noData: 'No price history'

import initChart from './config/initChart';
import updateChart from './config/updateChart';

import axisIndicators from './plugins/axisIndicators';
import addLoadingFlag from './plugins/addLoadingFlag';

import styles from './styles';

// import winLossIndicators from './plugins/winLossIndicators';
// import tradeMarker from './plugins/tradeMarker';

// workaround for tests to work
if (Object.keys(Highcharts).length > 0) {
    exporting(Highcharts);
    noDataToDisplay(Highcharts);
    axisIndicators();
    addLoadingFlag();
//    winLossIndicators();
//    tradeMarker();
}

export type IndicatorsConfig = {
    class: 'sma' | 'ema' | 'bb' | 'rsi' | 'macd',
    name?: string,          // name to be show in tooltip
    period?: number,
}

export type ChartEvent = {
    type: string,
    handler: () => void,
}

componentDidMount() {
    noData(Highcharts);

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

    this.orderBookChart = new Highcharts.Chart("order_book_chart", {
      title: {
        text: null
      },
      chart: {
        height: 300 // mirror this height in css container height declaration
      },
      lang: {
        thousandsSep: ",",

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 + "%";

import React, { Component } from 'react';
import { createBigNumber } from 'utils/create-big-number';
import Highcharts from 'highcharts/highstock';
// import Highmaps from 'highcharts/highmaps';
import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
import Styles from 'modules/market-charts/components/market-outcome-charts--candlestick/candlestick.styles.less';
import { PERIOD_RANGES, DAI } from 'modules/common/constants';
import { PriceTimeSeriesData } from 'modules/types';

NoDataToDisplay(Highcharts);

interface HighChartsWrapperProps {
  priceTimeSeries: PriceTimeSeriesData[];
  selectedPeriod: number;
  pricePrecision: number;
  updateHoveredPeriod: Function;
  marketMax: BigNumber;
  marketMin: BigNumber;
  volumeType: string;
  currentTimeInSeconds: number;
}

const GROUPING_UNITS = [
  ['minute', [1]],
  ['hour', [1]],
  ['day', [1]],

import React, { Component } from "react";
import PropTypes from "prop-types";
import { createBigNumber } from "utils/create-big-number";
import Highcharts from "highcharts/highstock";
import NoDataToDisplay from "highcharts/modules/no-data-to-display";
import Styles from "modules/market-charts/components/market-outcomes-chart/market-outcomes-chart.styles";
import { isEqual } from "lodash";

NoDataToDisplay(Highcharts);

const HIGHLIGHTED_LINE_WIDTH = 2;
const NORMAL_LINE_WIDTH = 1;
const NUM_DAYS_TO_USE_DAY_TIMEFRAME = 2;

export default class MarketOutcomesChartHighchart extends Component {
  static propTypes = {
    maxPrice: PropTypes.number.isRequired,
    minPrice: PropTypes.number.isRequired,
    bucketedPriceTimeSeries: PropTypes.object.isRequired,
    isScalar: PropTypes.bool,
    scalarDenomination: PropTypes.string,
    selectedOutcome: PropTypes.string.isRequired,
    pricePrecision: PropTypes.number.isRequired,
    daysPassed: PropTypes.number
  };

import React, { Component } from 'react';
import { createBigNumber } from 'utils/create-big-number';
import Highcharts from 'highcharts/highstock';
import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
import Styles from 'modules/market-charts/components/market-outcomes-chart/market-outcomes-chart.styles.less';

NoDataToDisplay(Highcharts);

const HIGHLIGHTED_LINE_WIDTH = 2;
const NORMAL_LINE_WIDTH = 1;
const NUM_DAYS_TO_USE_DAY_TIMEFRAME = 2;

interface MarketOutcomeChartsHighchartsProps {
  maxPrice: number;
  minPrice: number;
  bucketedPriceTimeSeries: object;
  isScalar: boolean;
  scalarDenomination: string;
  selectedOutcomeId: number;
  pricePrecision: number;
  daysPassed: number;
  isTradingTutorial?: boolean;
}

componentDidMount() {
    noData(Highcharts);
    this.chartFullRefresh(!this.props.isAnimating);
  }

import React, { Component } from "react";
import PropTypes from "prop-types";
import { createBigNumber } from "utils/create-big-number";
import CustomPropTypes from "utils/custom-prop-types";
import Highcharts from "highcharts/highstock";
import NoDataToDisplay from "highcharts/modules/no-data-to-display";
import Styles from "modules/market-charts/components/market-outcome-charts--candlestick/market-outcome-charts-candlestick-highchart.styles";
import { each, isEqual, cloneDeep } from "lodash";
import { PERIOD_RANGES, ETH } from "modules/common-elements/constants";

NoDataToDisplay(Highcharts);

const ShowNavigator = 350;

export default class MarketOutcomeChartsCandlestickHighchart extends Component {
  static propTypes = {
    priceTimeSeries: PropTypes.array.isRequired,
    selectedPeriod: PropTypes.number.isRequired,
    pricePrecision: PropTypes.number.isRequired,
    updateHoveredPeriod: PropTypes.func.isRequired,
    marketMax: CustomPropTypes.bigNumber.isRequired,
    marketMin: CustomPropTypes.bigNumber.isRequired,
    volumeType: PropTypes.string.isRequired,
    containerHeight: PropTypes.number.isRequired,
    currentTimeInSeconds: PropTypes.number.isRequired,
    isMobile: PropTypes.bool
  };

componentDidMount() {
    noData(Highcharts)

    this.orderBookPreviewChart = new Highcharts.Chart('order_book_preview_chart_form', {
      chart: {
        width: 0,
        height: 0
      },
      lang: {
        noData: 'No orders to display'
      },
      yAxis: {
        title: {
          text: 'Shares'
        }
      },
      xAxis: {
        title: {