highchart-cdn-load-problem-version-7.1.0.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.js"></script
><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div style="text-align:center;">
  <div
    id="0e79be2b_5ffd_4684_b915_e907f439ac3bcontainer_chart"
    style="display: inline-block"
  ></div>
</div>
<script>
  var version = "7.1.3"; /// DOES WORK
  var version = "7.0.3"; /// DOES NOT WORK

  require.config({
    packages: [
      {
        name: "highstock",
        main: "highstock"
      }
    ],
    paths: {
      highstock: "https://code.highcharts.com/stock/" + version
    }
  });

  require([
    "highstock/highstock",
    "highstock/modules/stock",
    "highstock/modules/exporting",
    "highstock/modules/offline-exporting",
    "highstock/modules/export-data",
    "highstock/modules/drilldown",
    "highstock/modules/heatmap",
    "highstock/modules/treemap",
    "highstock/modules/sunburst"
  ], function(Highcharts) {
    console.log("Highcharts");
    console.log(Highcharts);
    // This function runs when the above files have been loaded.

    // build chart

    var options = {
      credits: {
        enabled: true,
        text: "Source: XXX Flow Strategy & Solutions.",
        href: "http:\/\/www.example.com"
      },
      exporting: { enabled: true },
      chart: {
        animation: false,
        width: 650,
        height: 550,
        zoomType: "xy",
        renderTo: "0e79be2b_5ffd_4684_b915_e907f439ac3bcontainer_chart"
      },
      plotOptions: {
        series: { animation: false, compare: "percent" },
        line: { animation: false },
        column: { animation: false }
      },
      legend: {
        enabled: true,
        layout: "horizontal",
        align: "center",
        maxHeight: 100
      },
      tooltip: {
        enabled: true,
        valueDecimals: 2,
        pointFormat:
          '<span style="color:{series.color}">{series.name}<\/span>: <b>{point.y}<\/b> ({point.change}%)<br\/>',
        positioner:
          "function (labelWidth, labelHeight, point) {\n    var roundUp100 = function(d) { return 100*Math.floor(d\/100); },\n        labelWidth = roundUp100(labelWidth),\n        chart = window.charts['0e79be2b_5ffd_4684_b915_e907f439ac3b'];\n\n    var tooltipX, tooltipY;\n        var testX = (point.plotX + labelWidth * 0.7 > chart.plotWidth \/ 2) && (point.plotX - labelWidth * 0.7 < chart.plotWidth \/ 2);\n        var testY = point.plotY < labelHeight * 0.7;\n\n    if (testX && testY) {\n                tooltipX = chart.plotLeft + (chart.plotWidth - labelWidth) \/ 2;\n        tooltipY = chart.plotTop + chart.plotHeight - labelHeight;\n    } else {\n                tooltipX = chart.plotLeft + (chart.plotWidth - labelWidth) \/ 2;\n        tooltipY = chart.plotTop;\n    }\n\n    return {\n        x: tooltipX,\n        y: tooltipY\n    };\n}\n\n"
      },
      title: { text: "Time series plotted with HighStock" },
      subtitle: { text: "Transparent access to the underlying js lib" },
      yAxis: {
        labels: {
          formatter:
            "function() { return (this.value > 0 ? ' + ' : '') + this.value + '%'; }\n"
        },
        gridLineWidth: 1.0,
        gridLineDashStyle: "Dot"
      },
      xAxis: { gridLineWidth: 1.0, gridLineDashStyle: "Dot" },
      series: [
        {
          name: "Track1",
          yAxis: 0,
          data: [
            [1420070400000, 1.0],
            [1420156800000, 0.9955809138],
            [1420416000000, 0.9725156537],
            [1420502400000, 0.955500866],
            [1420588800000, 0.9735852581],
            [1420675200000, 0.9709321132],
            [1420761600000, 0.9726862121],
            [1421020800000, 0.9570236218],
            [1421107200000, 0.9442796901],
            [1421193600000, 0.9139256061],
            [1421280000000, 0.906900147],
            [1421366400000, 0.9220566792],
            [1421625600000, 0.9323895174],
            [1421712000000, 0.922188246],
            [1421798400000, 0.9074043661]
          ]
        },
        {
          name: "Track2",
          yAxis: 0,
          data: [
            [1420070400000, 1.0],
            [1420156800000, 0.9933897589],
            [1420416000000, 1.0021180625],
            [1420502400000, 1.0063755871],
            [1420588800000, 0.989508076],
            [1420675200000, 0.9791839709],
            [1420761600000, 0.9808684145],
            [1421020800000, 0.958599166],
            [1421107200000, 0.9663917939],
            [1421193600000, 0.9724325877],
            [1421280000000, 0.9811292493],
            [1421366400000, 0.9553434953],
            [1421625600000, 0.9400325607],
            [1421712000000, 0.9346055877],
            [1421798400000, 0.9179372035]
          ]
        }
      ]
    };

    options = JSON.stringify(options);

    options = JSON.parse(options, function(key, value) {
      if (value && typeof value === "string") {
        var check1 =
            value
              .replace(/\s+/g, "")
              .replace(/\r?\n|\r/g, "")
              .substr(0, 8) == "function",
          check2 =
            value
              .replace(/\s+/g, "")
              .replace(/\r?\n|\r/g, "")
              .substr(0, 9) == "(function";

        if (check1) {
          var startBody = value.indexOf("{") + 1;
          var endBody = value.lastIndexOf("}");
          var startArgs = value.indexOf("(") + 1;
          var endArgs = value.indexOf(")");

          return new Function(
            value.substring(startArgs, endArgs),
            value.substring(startBody, endBody)
          );
        }
        if (check2) {
          return eval(value);
        }
      }

      return value;
    });

    var opt = $.extend(true, {}, options);
    if (window.opts == undefined) {
      window.opts = {};
    }
    window.opts["0e79be2b_5ffd_4684_b915_e907f439ac3b"] = opt;

    console.log(
      'Highcharts/Highstock options accessible as opts["0e79be2b_5ffd_4684_b915_e907f439ac3b"]'
    );

    function create_table_0(uuid, chart) {
      if (typeof window.charts == "undefined") {
        window.charts = {};
      }
      window.charts[uuid] = chart;
      console.log("create_table_0 " + uuid);
    }

    window.chart = new Highcharts.StockChart(options, function(chart) {
      create_table_0("0e79be2b_5ffd_4684_b915_e907f439ac3b", chart);
    });

    console.log(
      'Highcharts/Highstock chart accessible as charts["0e79be2b_5ffd_4684_b915_e907f439ac3b"]'
    );
  });
</script>