Skip to main content

Default logo

The DXcharts logo is shown by default in the bottom-left corner of the chart — you don't need to configure anything to display it. It tracks the bottom-left chart in multi-chart layouts, follows the active theme, and includes a "Learning hub" hover affordance.

You override the logo using the Logo field of the uiOverrides property of ChartReactApp. You can do it for the following reasons: to replace the built-in logo with your own, or to hide it entirely.

Replacing the default logo with your own​

Provide your own React component. It is rendered in place of the built-in logo and receives LogoProps (chartReactAPI, className, initialTheme).

You can position and style it yourself:

const LogoImageStyled = styled.img`
    position: absolute;
    left: 30px;
    bottom: 40px;
    width: 30px;
    height: 30px;
`;
export const LogoWithCustomStyles = memo<LogoProps>(() => {
    // appleLogo is a locally imported Apple inc. logo
    return <LogoImageStyled src={appleLogo} />;
}

You should see the following:

Or reuse our suggested styles (placement, themed colors) by spreading the className provided through props onto your element:

const LogoWithDefaultStyles = memo<LogoProps>(({ className }) => {
    // appleLogo is a locally imported Apple inc. logo
    // className includes suggested styles that are provided by `dxchart5-react`
    return <img className={className} alt="logo" src={appleLogo} />;
}

Wire it up via uiOverrides:

const ChartReactWithCustomStylesLogo = () => {
    return <ChartReactAppWrapper uiOverrides={{ Logo: LogoWithCustomStyles }} />;
}

To hide the logo completely, pass a component that renders nothing. Passing null/undefined is not enough — these fall back to the built-in logo — so an empty component is required:

const ChartReactWithoutLogo = () => {
    return <ChartReactAppWrapper uiOverrides={{ Logo: () => null }} />;
}

Recommendations​

You can use any image, text, or other object as a Logo component. There are some recommendations to make it look better:

  • Image sources: use locally imported images instead of an URL to a remote source. It is better for performance and security reasons.
  • Snapshot functionality: we use HTMLCanvas as a middleware to convert DOMElements to Image, and quality issues during rendering are expected.