Search results

Footer and Watermark in React Chart component

02 Feb 2023 / 2 minutes to read

By using annotation, you can place any html elements to chart in a desired view.

To create footer and watermark for chart, follow the given steps:

Step 1:

Initialize the custom elements by using the annotation property.

By using the content option of the annotation object, you can specify the id of the element that needs to be displayed in the chart area as follow,

Source
Preview
index.jsx
index.tsx
Copied to clipboard
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';
function App() {
    const 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 }
    ];
    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={600}>
        </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"));
Copied to clipboard
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';

function App() {

  const data: any[] = [
    { 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 }
  ];
  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={600}>
        </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"));