Angular Setup Advice

[djoshi]

Hi All,

I have a question regarding my Highcharts setup. I may have combined two different methods, which could result in reduced performance.

I am using AngularJS and believe I downloaded the package using npm. In my package.json, it is shown as:

Code: Select all

"highcharts": "^11.3.0",

But I think I am calling a JS file and not directly using this package, which I guess might cause a slight latency in downloading JS the file. This is what is on my HTML:

Code: Select all

https://code.highcharts.com/stock/highstock.js"
"js/statistics.min.js" type="text/javascript"
"highcharts" style="height: 400px; min-width: 300px"
"js/spearson.js"

Then, in the Angular file, this is an example of my code:

Code: Select all

let myChart = HighCharts.stockChart({
        // chart: {
        //   renderTo: 'highcharts',
        // },

        credits: {
          enabled: false
        },
        legend: {
          enabled: true,
          layout: 'horizontal',
          verticalAlign: 'bottom',
          floating: false,
        },
        chart: {
          renderTo: 'highcharts',
          type: 'line',
          animation: false,
          backgroundColor: '#ffff',
          // zoomType: 'xy'
        },
        rangeSelector: {
          selected: 1,
          inputEnabled: false,
          enabled: false
        },
        title: {
          text: this.plot_title,
          style: { "color": "#1a3363", "fontSize": "16px" }
        },
        xAxis: {
          type: 'datetime',
          dateTimeLabelFormats: {
            day: '%e of %b',
          },

          title: {
            text: 'Date',
            style: { "color": "#1a3363", "fontSize": "16px" }

          },
          labels: {
            style: { "color": "#1a3363", "fontSize": "14px" }
          }

        },
        yAxis: {
          opposite: false,
          title: {
            text: this.plot_yaxis,
            style: { "color": "#1a3363", "fontSize": "16px" }
          },
          labels: {
            formatter: function () {
              //return (this.value.toFixed(3) ? '' : '') + this.value.toFixed(3);

              if (typeof this.value === 'number') {
                return this.value.toFixed(2);
              } else {
                // Handle the case where 'this.value' is not a number
                // You might want to return a default value or a string representation
                return String(this.value);
              }
            },
            style: { "color": "#1a3363", "fontSize": "14px" }
          },
        },

        series: [
          {
            //boostThreshold: 1,
            color: '#d6f77c',
            name: this.series_title_a,
            type: 'spline',
            data: this.datasets[0].data,
            showInNavigator: true,
          },
          {
            //boostThreshold: 1,
            color: '#075fed',
            name: "raw we",
            type: 'spline',
            data: this.datasets_b[0].data,
            showInNavigator: true
          },
          //  {
          //    boostThreshold: 1,
          //     color: '#116903',
          //     name: "raw aux",
          //    type: 'spline',
          //    data: this.datasets_c[0].data,
          //    showInNavigator: true
          //  },
          // {
          //   boostThreshold: 1,
          //   color: '#18191c',
          //   name: this.series_title_d,
          //   type: 'spline',
          //   data: this.datasets_d[0].data,
          //   showInNavigator: true
          // },
          // {
          //   boostThreshold: 1,
          //   color: '#18191c',
          //   name: this.series_title_e,
          //   type: 'spline',
          //   data: this.datasets_e[0].data,
          //   showInNavigator: true
          // },
          {
            //boostThreshold: 1,
            color: '#f2b75e',
            name: this.series_title_ref,
            type: 'spline',
            data: this.datasets_refdata[0].data,
            showInNavigator: true
          }

        ],
        "tooltip": {
          "pointFormat": "<b>{point.y:.3f}</b>",
          "shared": true
        }
      });
    }

Can you please advise if this has been set up correctly? It’s working, but I want to ensure I am doing it correctly.

[andrzej.b]

Hi,

Thanks for contacting us with your question!

You are right; it seems that you are not using the local Highcharts downloaded with npm, but you refer to the CDN version. Once you have Highcharts downloaded locally, you should refer to the local path in your HTML setup.

Please let me know if I can be of any further assistance.

Best regards,