Skip to main content

Adding your logo to the chart

You can add your own logo to the chart in DXcharts React using a custom React component and the component override concept.

Let's look at the example.

Assume you are software developer at Apple and the task is to add the Apple logo to the chart.

Here is our Logo component that we want to see on the chart:

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} />;
}

Then wire it up via uiOverrides property of ChartReactApp component.

const ChartReactWithCustomStylesLogo = () => {
    // TODO fix TS error
    // @ts-ignore
    return <ChartReactAppWrapper uiOverrides={{ Logo: LogoWithCustomStyles }} />;
}

You should see the following:

Optional logo styling​

If you want to use our suggested styles for Logo you can pass down className that is provided via props to your Logo component.

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} />;
}

Recommendations​

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

  • Src. If you use an image as a Logo, we recommend to use locally imported images instead of a URL to a remote source. It's better for performance and security reasons. If you really need to use a link to a remote source, make sure that you have a proper CORS policy settings for your image resource.
  • Snapshot. We provide functionality to make a snapshot of the chart, and Logo is a part of the snapshot. We use HTMLCanvas as a middleware to convert DOMElements to Image, and quality issues during rendering are expected. Therefore, the resulting image quality might be different than in the source image.