[](https://www.influxdata.com/slack)
npm install @influxdata/giraffe
A React-based visualization library powering the data visualizations in InfluxDB 2.0 UI.

See the visualizations in action using Storybook
In this quickstart, we're going to build a simple line graph using Giraffe in a single index file. All you'll need is a text editor.
1. Set up your index.html file:
``html
Save this file as index.html.1. Add script imports of React, React-DOM, and Giraffe to the bottom of the
head section.
`html
`
1. Wire up a simple React element. Add a script tag under main in the body of the html document, and then render a simple element onto the page using React.
`html
`
1. Open index.html in a browser. You should see a header with Hello World as the text.
1. Create a wrapper element for the Giraffe Plot we'll be rendering into. Add it to the script tag under root:`
html