Blancer.com Tutorials and projects

I have a chat application in AngularJS im just trying to scroll down all the way to the bottom like most chat apps do. i tried the native element.scrolltop attribute but no success

code
search.component.ts

import { Component,  OnInit,ViewChild, ElementRef } from '@angular/core';
import { CommonModule } from '@angular/common';
...


@Component({
...
})
export class SearchComponent{
..
  selectedMessages: any[] = []
...
  @ViewChild('inboxChat',{static:true}) inboxChat?: ElementRef<HTMLDivElement>;

 constructor(private socketService: SearchService,private router: Router) {
...
}
 ngOnInit() { 

      if (this.inboxChat?.nativeElement){
        this.inboxChat.nativeElement.scrollTop = this.inboxChat.nativeElement.scrollHeight
        }
}

  ngAfterViewInit() {
    // Accessing the DOM element directly
    console.log(this.inboxChat?.nativeElement);

    // Modifying the DOM element
    if(this.inboxChat?.nativeElement)
    this.inboxChat.nativeElement.scrollTop = this.inboxChat?.nativeElement.scrollHeight;
    
  }

}

search.component.html

 <div  class="mesgs" *ngIf="selectedMessages !== []" >
              <div #inboxChat class="msg_history">
                ...
           
            </div>
          </div>

search.component.css

...
.msg_history {
  height: 516px;
  overflow-y: auto;
}

class .msgs doesn’t have overflow-y at all and i tried with that class selected as well

I am trying to build a carousel using swiper, I am trying to pass the SwiperSlide as children of the Swiper in this case it does not render the slides in the browser

here is how I tried:

MyCarousel.tsx:

import React from 'react';
import { Swiper } from 'swiper/react';
import 'swiper/css';

interface ComponentProps {
  children: ReactNode
}

function MyCarousel({children}: ComponentProps){
  return (
    <Swiper loop={true} spaceBetween={50} slidesPerView={1}>
      {children}
    </Swiper>
  );
};

export default MyCarousel;

MySlides.tsx:

import React from 'react'
import { SwiperSlide } from 'swiper/react'

function MySlides({ slides }: ComponentProps) {

  return (
    <>
      {slides.map((slide) => (
        <SwiperSlide className="h-full" key={slide.id}>
          <div
            className="h-full bg-cover bg-center bg-no-repeat blur-3xl"
            style={{ backgroundImage: `url(${slide.src})` }}
          ></div>
          <div className="absolute inset-0 flex h-full justify-center">
            <img src={slide.src} alt={slide.src} />
          </div>
        </SwiperSlide>
      ))}
    </>
  )
}

MyPage.tsx:

import React from 'react'
import MySlidesfrom '@components/my-slides'

function MyPage() {

  const slides = [
    { id: 1, src: 'my-image-1.jpg' },
    { id: 2, src: 'my-image-2.jpg' },
    { id: 3, src: 'my-image-3.jpg' },
  ];

  return (
    <div>
      <h1>My Page</h1>
      <CarouselProvider>
        <MySlides slides={slides} />
      </CarouselProvider>
    </div>
  );
};

The above way is not working. It is not working the slides in the DOM as you can see in the screenshot the swiper-wrapper is empty

If I modify MyPage.tsx this way it works as it should-

import React from 'react'

function MyPage() {

  const slides = [
    { id: 1, src: 'my-image-1.jpg' },
    { id: 2, src: 'my-image-2.jpg' },
    { id: 3, src: 'my-image-3.jpg' },
  ];

  return (
    <div>
      <h1>My Page</h1>
      <CarouselProvider>
        {slides.map((slide) => (
          <SwiperSlide className="h-full" key={slide.id}>
            <div
              className="h-full bg-cover bg-center bg-no-repeat blur-3xl"
              style={{ backgroundImage: `url(${slide.src})` }}
            ></div>
            <div className="absolute inset-0 flex h-full justify-center">
              <img src={slide.src} alt={slide.src} />
            </div>
          </SwiperSlide>
        ))}
      </CarouselProvider>
    </div>
  );
};

I am using

• “react”: “^18.3.1”,
• “swiper”: “^11.1.15”,

Thank you so much for your attention and participation.

I am trying to do some session verification when my page is initially loaded. The AuthenticationRequiredComponent is used as a wrapper for other components that require authentication. If users are not logged in, they should be redirected to the login page. This component has a useEffect callback defined with an empty dependency array, because it subscribes to an auth state change (it is using Firebase Auth). If I go through the whole process of logging in to my website, and get to a page that uses this wrapper, the useEffect is called correctly. However, if I am in a page that uses this wrapper and I hit refresh or if I navigate directly to the url of a page that uses this wrapper, the useEffect is not being called, which results in the page not working correctly. The project is fairly large, so I cannot post the entire code. I will add pseudocode of some of the parent elements for structure:

export const AuthenticationRequiredComponent = ({ children }) => {
    const { session, dispatch } = useContext (SessionContext);
    const navigate = useNavigate ();

    const [ loadingLogin, setLoadingLogin ] = useState (false);

    /* This is the useEffect() that is not running */
    useEffect (() => {
        return isLoggedIn (setLoadingLogin, doWithUser, handleError);
    }, []);

    useEffect (() => {
        if (!session.loggedIn) {
            navigate ("/login");
        }
    }, [ session ]);

    function doWithUser ({ user, token }) {
        dispatch ({ type: "login", user, token: token });
    }

    function handleError (err) {
        console.error (err);
        dispatch ({ type: "logout" });
    }

    return children;
};

/* This is the parent component */
const MainComponent = () => {
    return <AuthenticationRequiredComponent>
        <Navbar />

        <Outlet />
    </AuthenticationRequiredComponent>
}

/* This creates a "route" object, which is then passed to an upper level array,
   and eventually a router is created through `createBrowserRouter`*/
export const businessRoute = {
    path: ":businessId",
    element: <MainComponent />,
    errorElement: <>Error</>,
    children: [
        homeRoute,
        ...
    ]
};

I read the documentation on useEffect, and it says that effects with empty dependency arrays are only run after the initial render. Why then are they not triggered when I refresh the page? When does this initial render happen? Looking around I also noticed that there are other components whose useEffect with empty dependency arrays are not being called on similar scenarios. I would appreciate any help on figuring out why this is happening.

The MDN docs on importKey don’t seem to provide a way to remove or delete a key once it is no longer needed. Since the function name includes the term “import”, which may suggest some degree of permanence, is explicit action needed to delete the key? Will the key get garbage collected once it goes out of scope?

I have created a simple component library in React with Javascript. The intention is that I can use it locally. So I called a button I created my library(just a simple button). But I keep getting the following error message in the console: “`App.jsx:5 Uncaught SyntaxError: The requested module ‘/@fs/C:/Users/davym/Documents/HetDomeinUI/dist/index.js’ does not provide an export named ‘default’ (at App.jsx:5:8)`. Did I probably put something wrong in my package.json in the library?

the 3 screenshots are from my library.

Componententer code here
Export in index.jsenter code here
Package.jsonenter code here
ProjectStructureenter code here

I’ve used this import statement in mine headproject: import BasicButton from "hetdomeinui";

also used this: import {BasicButton} from "hetdomeinui" But it didnt work either.

I have created a simple progress bar in HTML using JavaScript. The animation of this progress bar works correctly when the page is refreshed, but I want it to restart from the beginning once it completes and repeat indefinitely in a loop. However, the repetition and restart are not working properly and are not executing.

  const progressBar = document.getElementById('progressBar');

  function startProgressBarAnimation() {
progressBar.classList.remove('active');

setTimeout(() => {
  progressBar.classList.add('active');
}, 100);
  }

  startProgressBarAnimation();

  progressBar.addEventListener('transitionend', () => {
progressBar.style.transition = 'none';

progressBar.style.transform = 'translateX(100%)';
setTimeout(() => {
  progressBar.style.transition = 'transform 5s linear';
  startProgressBarAnimation();
}, 10);
  });

.progress-bar-container {
  width: 100%;
  height: 3px;
  background-color: #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #ff0008, #fad0c4, #ffecd2);
  transform: translateX(100%);
  transition: transform 5s linear;
}

.progress-bar.active {
  transform: translateX(0);
}

<div class="progress-bar-container">
  <div class="progress-bar" id="progressBar"></div>
</div>

while running npm start the application working perfectly, but running the npm test gets the below error

 TypeError: (0 , _ToastComponent.showToast) is not a function

      20 |         } = error;
      21 |         if (response && msg) {
    > 22 |             showToast(msg, "toast toast-danger", "alert", true, getToastTimeLimit());
         |                      ^
      23 |         } else {
      24 |             showToast("Internal server error!", "toast toast-danger", "alert", true, getToastTimeLimit());
      25 |         }

my jest-setup.js file is

import '@testing-library/jest-dom';

and my package.json is

{
  "name": "test-ui",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "start": "vite",
    "test": "jest",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-transform-runtime": "^7.25.9",
    "@trimble-oss/modus-icons": "^1.15.0",
    "@trimble-oss/modus-react-components": "^0.36.0-react18",
    "@trimbleinc/modus-react-bootstrap": "^1.2.4",
    "axios": "^1.7.7",
    "date-fns": "^4.1.0",
    "express": "^4.21.1",
    "gulp": "^5.0.0",
    "jwt-decode": "^3.1.2",
    "react": "^18.3.1",
    "react-bootstrap": "^2.10.4",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.26.1"
  },
  "devDependencies": {
    "@babel/core": "^7.26.0",
    "@babel/preset-env": "^7.26.0",
    "@babel/preset-react": "^7.8.3",
    "@testing-library/dom": "^9.3.4",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^14.3.1",
    "@vitejs/plugin-react": "^3.1.0",
    "babel-jest": "^27.5.1",
    "babel-loader": "^8.0.6",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-react-hooks": "^1.7.0",
    "jest": "^27.5.1",
    "jest-css-modules-transform": "^4.4.2",
    "vite": "^4.5.5"
  }
}

and my code which shows the error is

import http, { getRefreshToken } from "./httpService";
import { showToast } from "../components/common/ToastComponent";
import { showSpinner } from "../components/common/SpinnerComponent";
import { getToastTimeLimit } from "../properties/properties";
import { loadConfig } from "../utils/util";

export async function getAccessToken(username, password) {
    const { hostName } = await loadConfig();
    try {
        const response = await http.post(`${hostName}/test/test`, { username, password });
        console.log("Login successful :-)");
        return response;
    } catch (error) {
        const {
            response: {
                data: { msg },
            },
            response,
        } = error;
        if (response && msg) {
            showToast(msg, "toast toast-danger", "alert", true, getToastTimeLimit());
        } else {
            showToast("Internal server error!", "toast toast-danger", "alert", true, getToastTimeLimit());
        }
        showSpinner(false);
        throw error;
    }
}

The test file code which throws a error is

test("calling the api end point for a invalid input", async () => {
    const checkLoggedInSpy = jest
      .spyOn(http, "checkLoggedIn")
      .mockReturnValue(true);
    renderComponent();

    axios.post.mockRejectedValue({
      response: {
        data: {
          msg: "Invalid username or password",
        },
      },
    });

    const usernameInput = screen.getByPlaceholderText("Username");
    const passwordInput = screen.getByPlaceholderText("Password");
    fireEvent.change(usernameInput, { target: { value: "test" } });
    fireEvent.change(passwordInput, { target: { value: "test" } });

    await waitFor(() => {
      const loginButton = screen.getByTestId("login-btn");
      fireEvent.click(loginButton);

      expect(axios.post).toHaveBeenCalledWith(expect.any(String), {
        username: "test",
        password: "test",
      });
    });

    checkLoggedInSpy.mockRestore();
  });

I have tried with AI, but it is asking me to mock the function, but it suppose to run to increase the coverage

In my project I use Summernote editor but it doesn’t have any image management plugin like TinyMCE or CKEditor.

My web application has a set of articles that users can edit. I would like to have a feature that allows the user to add images to the text area while editing an article in Summernote. However, these images need to be uploaded to the server. Roxy Fileman does this very well so I would like to integrate it.

Can anyone suggest how to implement this?

Since I can’t use the standard image insertion dialog, I want to implement it through a separate button:

//My button
var RoxyButton = function (context) {
  var ui = $.summernote.ui;

  // create button
  var button = ui.button({
    contents: '<i class="fa fa-child"/>',
    tooltip: 'Insert image',
    click: RoxyFilemanDialog
  });

  return button.render(); // return button as jquery object
}

This is what the settings configuration for Summernote will look like:

toolbar: [
  ['mybutton', ['roxy']],
],
buttons: {
    roxy: RoxyButton
},

When I press my button, the dialog function should be triggered:

// Summernote
function RoxyFilemanDialog@(callback, value, type){    
    $.ajax({
        cache: false,
        type: "GET",
        url: "@Url.Action("CreateConfiguration", "RoxyFileman")",
        success: function (data, textStatus, jqXHR) {
            var roxyFileman = '@Url.Content("~/lib/Roxy_Fileman/index.html")'; 

//There should be a call to the function to open a dialog in Summernote...
{...
           
            $.ajax({
                title: 'Roxy Fileman',
                url: roxyFileman,
                width: 850,
                height: 650,
                plugins: "media",                
            });
}
            return false;
        },
        error: function (jqXHR, textStatus, errorThrown) {
            ...
        }
    });
}

But it seems that Summernote does not have an API for opening a custom dialog window and embedding your functions into it.

Or maybe I’m digging in the wrong direction and the implementation should be completely different?

Can anyone suggest how to implement this?

I have several radar charts that are created in response to a set of questions. Each plot has a different number of data points, dependent on the number of questions. I currently create the plot based on the answer I got in:

Changing eChart Options based on number of indicators on radar chart

That, however, results in creating multiple if length===n statements, one for each number of data points. I’d like to use some sort of for statement to generate the right number of points on the plot by appending additional lines of:

{ name: area_name[n], max: max, color:'black' },

where n is the next point number.

I’ve tried several for loops but can’t seem to get it to wwork.

Sample code for 10 data points:

  if (length === 10) {
setTimeout(function (){
  const newIndicator = [
  { name: area_name[0], max: max, color:'black',
  axisLabel: {
    color: 'black',
    show: true,
    interval: 0,
    showMinLabel: false,
  },},
  { name: area_name[1], max: max, color:'black' },
  { name: area_name[2], max: max, color:'black' },
  { name: area_name[3], max: max, color:'black' },
  { name: area_name[4], max: max, color:'black' },
  { name: area_name[5], max: max, color:'black' },
  { name: area_name[6], max: max, color:'black' },
  { name: area_name[7], max: max, color:'black' },
  { name: area_name[8], max: max, color:'black' },
  { name: area_name[9], max: max, color:'black' },
  ];

  const newData = [
  {
    axisLabel: {
      show: true,
      interval: 0
    },
    value: area_scores,
    areaStyle: {
      color: overall_color,
      opacity: 0.5
    },
    label: {
      show: true,
      formatter: function (params) {
        return params.value;
      }
    }
  },
];

  
  myChart.setOption({
radar: { indicator: newIndicator },
series: [{ data: newData }]
 option && myChart.setOption(option);
});},)};

I’m trying to build a card navigation feature in JavaScript where clicking on a card displays its content in a hiddenCard element, and I can navigate between cards using left and right arrow buttons.

Selecting Cards and the Hidden Card:

var cards=document.querySelectorAll(".card");

var hiddenCard=document.querySelector(".card_hidden")

var currntIndex=0;

Adding Click Event to Each Card:

for (var i = 0; i < cards.length; i++) {
  cards[i].addEventListener("click", function () {
    currntIndex = Array.from(cards).indexOf(this);

    var image = this.querySelector("img");
    var title = this.querySelector(".title p");

    hiddenCard.innerHTML = `
      <p>${title.textContent}</p>
      <img src=${image.src}> 
      <i class="fa-solid fa-arrow-left pre"></i>
      <i class="fa-solid fa-arrow-right next"></i>
    `;

    hiddenCard.style.display = "block";

    console.log(hiddenCard);

    arrows();
  });
}

Adding Navigation with Arrows:

function arrows() {
  document.querySelector(".pre").addEventListener("click", function () {
    if (currntIndex > 0) {
      currntIndex--;
      showIndex(currntIndex);
    }
  });

  document.querySelector(".next").addEventListener("click", function () {
    if (currntIndex < cards.length - 1) {
      currntIndex++;
      showIndex(currntIndex);
    }
  });
}

Updating the Hidden Card:

function showIndex(currntIndex) {
  var imagIndex = cards[currntIndex].querySelector("img");
  var titleIndex = cards[currntIndex].querySelector(".title p");

  hiddenCard.innerHTML = `
    <p>${titleIndex.textContent}</p>
    <img src=${imagIndex.src}> 
    <i class="fa-solid fa-arrow-left pre"></i>
    <i class="fa-solid fa-arrow-right next"></i>
  `;
}

The hiddenCard displays correctly when I click on a card. However, when I use the arrow buttons, the hiddenCard content doesn’t update, or the navigation doesn’t work as expected.

I encountered an issue while using the Error Lens extension in Visual Studio Code. When I try to use the “Copy Problem Message” command, I get the following error popup:

Steps to Reproduce:

Make sure you have the ErrorLens extension installed in VSCode.
Try using the “Copy Problem Message” command.

System Information:

VS Code version: 1.96.2

Error Lens version: 3.22.0

OS: Windows 11

Attempts to Fix:

Restarted VS Code.

Reinstalled the Error Lens extension.

Questions:
Any idea what could be causing this? Thanks for the help.

Hi my java script file looks like this

import $ from 'jquery';

$(function(){
    $(".main #subMain").on("click", function(e){
        e.preventDefault();
        var block = $("div.next").parents(".head").first();
        block.find(".main_styles").attr("hidden", false);
        block.insertAfter(".footer-section");
        $([document.documentElement, document.body]).animate({
            scrollTop: $("div.next").offset().top
        }, 1000);
    });
}); 

I tried writing jest test case like this loading the html and calling the the function but the error is with invoking the jquery function

require('../file_name.js');

describe("Test helppage", () => {
    test("testing ", () => {
        return new window.Promise((done) => {

            document.body.innerHTML = `<div class="main"><div id="subMain"></div></div><div class="head" >
    <div  class="main_styles" hidden>
        <div class="next">Text
         </div>
    </div>
</div><div class="footer-section"></div>`;
            const onDomContentLoadedCallback = async () => {
                
              
                ($('.main #submain')).trigger('click');
                
                document.removeEventListener("DOMContentLoaded", onDomContentLoadedCallback);
                done();
            };

            document.addEventListener("DOMContentLoaded", onDomContentLoadedCallback);
            document.dispatchEvent(
                new Event("DOMContentLoaded", {
                    bubbles: true,
                    cancelable: true,
                })
            );

        });
    });
});

Any solutions in how to invoke this jquery function will be helpful.Thanks!!

I am using javascript and node express with async/await. So there is only one thread/process running, but the way it executes is not straightforward.

Asynchronous methods may request rows from an sqllite database. I am using this npm package.
https://www.npmjs.com/package/sqlite

If simply opening and closing the database inside the async methods, like this

async function request() {
    var db = await sqlite.open({
        filename: "filename.db",
        mode: sqlite3.OPEN_READONLY,
        driver: sqlite3.Database
    })
    //-- do something, like this
    const stmt = await db.prepare("SELECT 1");
    const rows = await stmt.all();
    await stmt.finalize();
    //-- then close
    await actualDb.close();
}

This throws “SQLITE_BUSY” errors. So I made functions like this to open/close the database:

var inUse = false;

function timeout(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function openDb() {
  while (inUse) {
    await timeout(50)
  }
  inUse = true;
  return await sqlite.open({
    filename: "filename.db",
    mode: sqlite3.OPEN_READONLY,
    driver: sqlite3.Database
  })
}

async function closeDb(db) {
  await db.close();
  inUse = false;
}

And then call these functions to open/close the database. But this only allows one async method to use the database at a time, while other requests need to wait. I think it might be possible to allow several “threads” to share the database with reference counting somehow, but don’t know exactly how to do it.

I am developing a Chrome extension that uses chrome.identity.getAuthtoken API – to handle Google OAuth 2.0 authentication.

1. In Chrome browser it’s working fine.

2. However, this API is not supported in the Microsoft Edge browser (link here). So as per suggestions in multiple forums, I am trying to use chrome.identity.launchWebAuthFlow API to handle Google OAuth 2.0 authentication for Microsoft Edge.

   But the chrome.identity.launchWebAuthFlow API is not working & is returning

   Error 400: redirect_uri_mismatch

I couldn’t find any documentation or discussion explaining this behavior on Edge or other Chromium-based browsers.
m questions-

Q1. Is there a specific configuration required in the Google Cloud Console to support other Chromium-based browsers (like Edge) when using Chrome.identity.launchWebAuthFlow?
Q2. Does Edge handle chrome.identity.launchWebAuthFlow differently, causing it to reject the redirect_uri?
Are there any known limitations or workarounds for this issue in Chromium-based browsers other than Chrome?

I setup this node export server on our server. We followed the below steps while setting the server

Setup Steps

1. git clone https://github.com/highcharts/node-export-server.git
2. git checkout 7f5d512fe565632d2da32afbdc38662d7bf8fdef (for version 2.1.0)
3. edited lib/server.js
   from

  req.on("close", function () {
    connectionAborted = true;
  });

to

 req.socket.on("close", function () {
    connectionAborted = true;
  });

as the connection was getting closed.

4. used node version 20.4.0 and provided env variables as:

export HIGHCHARTS_USE_MAPS=YES
export HIGHCHARTS_USE_GANTT=YES
export HIGHCHARTS_VERSION=8.0.0
export ACCEPT_HIGHCHARTS_LICENSE=YES
export HIGHCHARTS_USE_STYLED=YES
export OPENSSL_CONF=/etc/ssl

Also, we tried using 9.2.2 version of highcharts.

5. npm install

6. npm link

7. highcharts-export-server –enableServer 1 –logLevel 4 –allowCodeExecution 1

Actual behaviour

When using POST with input

{
    "type": "image/png",
    "scale": 2,
    "globalOptions": "{colors: ["rgba(39,26,136,0.7)","rgba(241,203,93,0.7)","rgba(234,70,62,0.7)","rgba(114,189,85,0.7)","rgba(77,147,23,0.7)","rgba(163,151,243,0.7)"],lang: {thousandsSep: ','}}",
    "infile": "{chart: {renderTo: 'test me',height: 400,width: 600},exporting: { sourceWidth:950,sourceHeight:300,enabled:false,allowHTML: true,sourceWidth: 400,sourceHeight: 400,scale: 1},credits: {enabled: true},title: {text: ''}}",
    "callback": "function (chart) {chart.renderer.rect(0, 0,400,400, 8).attr({stroke: '#ccc',fill: '#fcfcfc',zIndex: 3,class:'dataSearchWidget'}).add();if (true == true) {chart.renderer.text('<span><span style="float: left;opacity: 1.0;class:fad fa-heart;">'+String.fromCodePoint(parseInt('f004', 16))+'</span><span style="float: left;left: 0;position: absolute;opacity: 0.4;">'+String.fromCodePoint(parseInt('10f004', 16))+'</span></span>', 40, 260,true).css({fontSize: '175px',color: '#4d545c'}).attr({zIndex: 4}).add(); }};(function(stringFromCharCode){var fromCodePoint=function(_){var codeUnits=[],codeLen=0,result="";for(var index=0,len=arguments.length;index!==len;++index){var codePoint=+arguments[index];if(codePoint<=0xFFFF){codeLen=codeUnits.push(codePoint);}else{codePoint-=0x10000;codeLen=codeUnits.push((codePoint>>10)+0xD800,(codePoint%0x400)+0xDC00);}}return result+stringFromCharCode.apply(null,codeUnits);};try{Object.defineProperty(String,"fromCodePoint",{"value":fromCodePoint,"configurable":true,"writable":true});}catch(e){String.fromCodePoint=fromCodePoint;}}(String.fromCharCode));"
}

i was expected below image

but got

I am using paid version of font awesome of version 5.15.1. And duotone fonts are available in it. I am using thie very fonts and able to plot the expected icon when using specific class, but getting error using this server.

Question

Can you please help here in this problem and provide suggestion. Also, updating highcharts version from this 2.1.0 requires major change in input chartscript so that is also not the viable idea here.