2

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
      );
ChenWeibin
  • 25
  • 3

2 Answers2

2

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.

Niilo Keinänen
  • 2,187
  • 1
  • 7
  • 12
  • 1
    Thanks a lot for your answer, as per your suggestion I used local file server with http-server from node_modules from API documentation ` npm i --global http-server cd node_modules/@arction/lcjs/dist/resources http-server --cors const lcjs = lightningChart({ resourcesBaseUrl: 'http://127.0.0.1:8081', // <--- or whichever port http-server assigned. })` – ChenWeibin Feb 11 '22 at 09:55
0

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

ChenWeibin
  • 25
  • 3
mightycode Newton
  • 3,229
  • 3
  • 28
  • 54