Search code examples
javascriptchartslightningchart

Lightningchart js how to make the background of the Theme ChartXY white?

I want to make the background color of this dashboard/chartXY to white instead of light gray, enter image description here

after following the docs https://lightningchart.com/js-charts/docs/more-guides/themes/

and using the suggested Theme Editor https://arction.github.io/lcjs-themes/

this is my attempt:

import { Dashboard, Themes, ColorHEX, SolidFill } from "@arction/lcjs";
import { lc } from "../lightningChartObject";
import { makeCustomTheme } from "@arction/lcjs-themes";

// Created with LCJS Theme Editor https://github.com/Arction/lcjs-themes
const myLCJSTheme = makeCustomTheme({
  isDark: true,
  gradients: false,
  effects: false,
  fontFamily: "Segoe UI, -apple-system, Verdana, Helvetica",
  backgroundColor: ColorHEX("#ffffffff"),
  textColor: ColorHEX("#000000ff"),
  dataColors: [
    ColorHEX("#ffff5b"),
    ColorHEX("#ffcd5b"),
    ColorHEX("#ff9b5b"),
    ColorHEX("#ffc4bc"),
    ColorHEX("#ff94b8"),
    ColorHEX("#db94c6"),
    ColorHEX("#ebc4e0"),
    ColorHEX("#a994c6"),
    ColorHEX("#94e2c6"),
    ColorHEX("#94ffb0"),
    ColorHEX("#b4ffa5"),
  ],
  axisColor: ColorHEX("#000000ff"),
  gridLineColor: ColorHEX("#4d4d4dff"),
  uiBackgroundColor: ColorHEX("#ffffffff"),
  uiBorderColor: ColorHEX("#ffffff"),
  dashboardSplitterColor: ColorHEX("#f7f7f7ff"),
});

export const CreateDashboard = (id: string): Dashboard => {
  const dashboard = lc.Dashboard({
    theme: myLCJSTheme,
    numberOfColumns: 19,
    numberOfRows: 1,
    container: `${id}`,
  });
  const BackgroundFill = new SolidFill({
    // to optimize this I can share the same BackgroundFill object across all charts
    color: ColorHEX("#ffffff"),
  });
  dashboard.setBackgroundFillStyle(BackgroundFill);
  return dashboard;
};

but after it I get this error enter image description here

from package json:

"@arction/lcjs": "^5.1.1",
"@arction/lcjs-themes": "^3.2.0",
Solution

  • Tried using [email protected] and [email protected] in a fresh typescript react template project, and everything worked as expected.

    The error suggests that either LCJS API is used incorrectly, or lcjs-themes has internal dependency that is using different LCJS version than what the charts are created with. To elaborate more on this, it sometimes happens that npm installs two different versions of LCJS. One under node_modules/@arction/lcjs and second under node_modules/@arction/lcjs-themes/node_modules

    Also worth noting that you can also set the style of any specific chart elements directly, without using Themes

    https://lightningchart.com/js-charts/docs/features/xy/#background-style