@liveryvideo/player

[@liveryvideo/player v7.15.0](../index.md) / LiveryBufferGraph # Class: LiveryBufferGraph Element defined as `<livery-buffer-graph>` which renders a graph of the buffer size and latency of specified `player` or the first `<livery-player>` element found in the document. This can dispatch the following events: - [livery-error](LiveryErrorEvent.md) - Dispatched when an error occurred. ## Example ```html <livery-player streamid="6613d164e4b0bf3ad645f3c6"></livery-player> <livery-buffer-graph></livery-buffer-graph> ``` ## 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](LiveryBufferGraph.md#audiocolor) and [videoColor](LiveryBufferGraph.md#videocolor) *** ### decodedColor > **decodedColor**: `string` Decoded FPS line color, defaults to '#f6c2f3'. #### Default Value ```ts null ``` *** ### 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. Actually a period is derived from this value and a few extra rows are kept to let lines flow out of view. E.g: With default value: 60 and 500ms updateInterval this will display a period of 30 seconds. #### Default Value ```ts 60 ``` *** ### textColor > **textColor**: `string` Chart text color, defaults to '#eee'. #### Default Value ```ts null ``` *** ### updateInterval > **updateInterval**: `number` Interval in milliseconds at which to add a row to the data table and draw the chart. #### Default Value ```ts 500 ``` *** ### videoColor > **videoColor**: `string` Video buffer line color, defaults to `bufferColor` or '#dc3912'. #### Default Value ```ts null ```