When I use the JavaScript On Screen Menu example, the button of OnScreenMenuButtonType doesn't show the icon

user_18178412 0
Viewed 34

I don't know why, the example in the document can display the icon, but the one I wrote does not display enter image description here

this.SpecChart.addOnScreenMenu(
        [
          [
            // Default buttons
            OnScreenMenuButtonType.ZoomInX,
            OnScreenMenuButtonType.ZoomOutX,
            OnScreenMenuButtonType.ZoomInY,
            OnScreenMenuButtonType.ZoomOutY,
            OnScreenMenuButtonType.ZoomToFit,
            OnScreenMenuButtonType.ToggleAnimations,
            // cusrom button
            {
              dimensions: { rows: 1, columns: 1 },
              label: "Show Heatmap",
              opacity: "1",
              color: "blue",
              shape: OnScreenMenuButtonShape.RoundedRectangle,
              action: this.show,
            },
          ],
        ],
        OnScreenMenuButtonShape.RoundedRectangle
      );
lightningchart
2 Answers

Probably this is caused by LightningChart not having access to its resources folder. The OnScreenMenu pictures are distributed in a resources folder along with the library, but the library itself doesn't know where it is located.

Here's a link to the related item in API documentation to learn more: https://www.arction.com/lightningchart-js-api-documentation/v3.4.0/interfaces/lightningchartoptions.html#resourcesbaseurl

A quick and dirty fix you can try is the following code snippet which tells LightningChart to look for the resources folder from a CDN service - this is super slow and I would not advise to do this in any long term solution.

const chart = lightningChart({
   resourcesBaseUrl: "https://cdn.jsdelivr.net/npm/@arction/lcjs@3.4.0/dist/resources",
}).ChartXY();

// ... add OnScreenMenu inside the chart ...

For a long term solution, you'll have to download the resources folder to your project, setup a file server and supply the URL to the file server with resourcesBaseUrl option.

user_92880630

You have set: this.show. Is it not just show. And by the way. Where is your icon property by custom button?

The last one is a custom button. My question is that the first few yellow buttons do not display icons.I know custom button can set icon url

as you can see in the image

user_77137700
Related