How to add a footer in React Chart

17 Aug 20269 minutes to read

You can place any HTML element on the chart in a desired position by using Annotations. A footer is just one common use case; the same approach also works for watermarks, custom titles, or any HTML layer drawn over the plot area.

Add the annotation

The content option of AnnotationDirective is a JSX function reference, not the id string of a DOM element. Define a regular React function returning the JSX you want displayed, then pass that function as content:

const content = chartTemplate;
function chartTemplate() {
    return (<div className='template'>
        <a href="https://www.syncfusion.com" target="_blank">www.syncfusion.com</a>
    </div>);
}

Each annotation is then declared as an <AnnotationDirective> child of <AnnotationsDirective> inside <ChartComponent>.

Choose the coordinate system

The example declares two annotations: one inside the plot area (a watermark) and one near the chart edge (the footer). They differ only in coordinateUnits:

Coordinate unit Use case Meaning of x and y
'Pixel' Positioning an annotation at a visual location within the selected annotation region. Pixel offsets from the region’s coordinate origin.
'Point' Attaching an annotation to a data location. Values interpreted by the associated x-axis and y-axis. Their types must match the axis configurations.

The complete example below declares one annotation in Pixel mode (the footer at x={440}, y={600}) and one in Point mode (the watermark at x='Wed', y={20}) so both patterns are visible at once.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartAnnotation, AnnotationsDirective, AnnotationDirective, Legend, Category, Tooltip, DataLabel, SplineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category' };
    const primaryyAxis = { minimum: 0, maximum: 60, interval: 20 };
    const marker = { visible: true };
    const animation = { enable: true, duration: 1200, delay: 100 };
    const content = chartTemplate;
    function chartTemplate() {
        return (<div className='template'>
      <a href="https://www.syncfusion.com" target="_blank">www.syncfusion.com</a>
    </div>);
    }
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Medals'>
      <Inject services={[SplineSeries, Legend, Tooltip, DataLabel, Category, ChartAnnotation]}/>
      <AnnotationsDirective>
        <AnnotationDirective content={content} coordinateUnits='Point' x='Wed' y={20}>
        </AnnotationDirective>
        <AnnotationDirective content={content} coordinateUnits='Pixel' x={440} y={330}>
        </AnnotationDirective>
      </AnnotationsDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Max Temp' marker={marker} animation={animation} type='Spline'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartAnnotation, AnnotationsDirective, AnnotationDirective, Legend, Category, Tooltip, DataLabel, SplineSeries ,AxisModel}from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
  const primaryxAxis: AxisModel = { valueType: 'Category' };
  const primaryyAxis: AxisModel = { minimum: 0, maximum: 60, interval: 20 };
  const marker = { visible: true };
  const animation = { enable: true, duration: 1200, delay: 100 };
  const content: any = chartTemplate;
  function chartTemplate(): any {
    return (<div className='template'>
      <a href="https://www.syncfusion.com" target="_blank">www.syncfusion.com</a>
    </div>);
  }

    return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Olympic Medals'>
      <Inject services={[SplineSeries, Legend, Tooltip, DataLabel, Category, ChartAnnotation]} />
      <AnnotationsDirective>
        <AnnotationDirective content={content} coordinateUnits='Point' x='Wed' y={20}>
        </AnnotationDirective>
        <AnnotationDirective content={content} coordinateUnits='Pixel' x={440} y={330}>
        </AnnotationDirective>
      </AnnotationsDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Max Temp' marker={marker}
          animation={animation} type='Spline'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 'Sun', y: 15 }, 
    { x: 'Mon', y: 5 },
    { x: 'Tue', y: 32 }, 
    { x: 'Wed', y: 15 },
    { x: 'Thu', y: 29 }, 
    { x: 'Fri', y: 24 },
    { x: 'Sat', y: 18 }
];
export let data: Object[] = [
    { x: 'Sun', y: 15 }, 
    { x: 'Mon', y: 5 },
    { x: 'Tue', y: 32 }, 
    { x: 'Wed', y: 15 },
    { x: 'Thu', y: 29 }, 
    { x: 'Fri', y: 24 },
    { x: 'Sat', y: 18 }
];

Troubleshooting

  • “Annotation does not render at all” — ChartAnnotation is missing from the <Inject services={[…]}> array, or the AnnotationsDirective is placed outside <ChartComponent>.
  • “The annotation is offset by exactly the chart’s left/top margins” — you are using coordinateUnits='Pixel' but the chart has a legend or title pushing the plot area over. Switch to 'Point' (and pass data values), or recompute the pixel values after layout settles.
  • “Multiple annotations overlap or stack on top of each other” — the example uses two AnnotationDirective entries with different x/y. Make sure each has its own (x, y) pair and that they do not coincide.
  • “The annotation is configured but not visible”: Confirm that its pixel coordinates fall within the selected annotation region. For example, y={600} will not be visible when the chart or region is shorter than 600 pixels.

See also