[@liveryvideo/player](../index.md) / LiveryBufferGraph # Class: LiveryBufferGraph Element defined as `` which renders a graph of the buffer size and latency of specified `player` or the first `` element found in the document. This can dispatch the following events: - [livery-error](LiveryErrorEvent.md) - Dispatched when an error occurred. ## Example ```html ``` ## Extends - `LitElement` ## Properties ### player > **player**: [`LiveryPlayer`](LiveryPlayer.md) Reference to specific LiveryPlayer element to create the graph for. If not specified this will default to the first `livery-player` element found in the document. If that is not found the graph will not start rendering. ## Attributes ### audioColor > **audioColor**: `string` Audio buffer line color, defaults to `bufferColor` or '#3366cc'. #### Default Value ```ts null ``` *** ### backgroundColor > **backgroundColor**: `string` Chart background color, defaults to 'transparent'. #### Default Value ```ts null ``` *** ### bubbles > **bubbles**: `boolean` If true then events dispatched by this element will bubble. #### Default Value ```ts false ``` *** ### ~~bufferColor~~ > **bufferColor**: `string` Buffer line color used as default for `audioColor` and `videoColor`. #### Default Value ```ts null ``` #### Deprecated Instead use [audioColor](#audiocolor) and [videoColor](#videocolor) *** ### decodedColor > **decodedColor**: `string` Decoded FPS line color, defaults to '#f6c2f3'. #### Default Value ```ts null ``` *** ### drawInterval > **drawInterval**: `number` Number of consecutive updates between drawing the chart. E.g: With default value: 5 and 100ms updateInterval this will draw once every 500ms. Note: The first and final rows added after playback starts or pauses are drawn directly. #### Default Value ```ts 5 ``` *** ### droppedColor > **droppedColor**: `string` Dropped FPS line color, defaults to '#fc1c1c'. #### Default Value ```ts null ``` *** ### latencyColor > **latencyColor**: `string` Live latency line color, defaults to '#ffa500'. #### Default Value ```ts null ``` *** ### maxRows > **maxRows**: `number` Maximum number of rows to store in data table. E.g: With default value: 100 and 100ms updateInterval this will display a period of 10 seconds. #### Default Value ```ts 100 ``` *** ### textColor > **textColor**: `string` Chart text color, defaults to '#eee'. #### Default Value ```ts null ``` *** ### throughputColor > **throughputColor**: `string` Player throughput line color, defaults to '#ffcccc'. #### Default Value ```ts null ``` *** ### updateInterval > **updateInterval**: `number` Interval in milliseconds at which to add a row to the data table and, depending on [drawInterval](#drawinterval), draw the chart. #### Default Value ```ts 100 ``` *** ### videoColor > **videoColor**: `string` Video buffer line color, defaults to `bufferColor` or '#dc3912'. #### Default Value ```ts null ```