charts

Client side (js)

ECharts (apache.org)

Pro: compleness, documentation license
Cons: nothing much
docs
demo/styles

npm install echarts
import * as echats from 'echarts'

HighCharts

Pro: browser compatibility, completeness, documentation
Cons: price for commercial usage
docs
demo/styles

npm install highcharts
import { Highcharts } from 'highcharts'
update:

function initGraph() {
    // @ts-ignore
    graphLatency = Highcharts.chart('gph_latency', {
        chart: {
            renderTo: 'gph_latency',
            type: 'areaspline'
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: []
        },
        series: [
            { name: 'AUS', data: [] },
            { name: 'CAN', data: [] },
            { name: 'FRA', data: [] }
        ],
        yAxis: {
            title: {
                text: 'latency (ms)'
            }
        }
    })
}

async function refreshGraph(idx) {
    if(result.ok) endpointData = result.data
    const graphOptions = {
        title: {
            text: currentEndpoint.url
        },
        xAxis: { categories: endpointData.x },
        series: endpointData.y
    }
    graphLatency.update(graphOptions)
}

// result.data structured as:
result.data = {
    'x': dff['ts'].dt.strftime('%Y-%m-%d %H-%M').tolist(),
    'y': [
        {
            'name': 'AUS',
            'color': '#a0d9ff',
            'data': dff['AUS'].tolist()
        },
        {
            'name': 'CAN',
            'color': '#c4fdff',
            'data': dff['CAN'].tolist()
        },
        {
            'name': 'FRA',
            'color': '#5891c8',
            'data': dff['FRA'].tolist()
        }
    ]
}

Warning

To refresh a chart with substantial changes in its structure (ex: add new Series), update() must be called with oneToOne argument as true.

Chartist

Pro: animations, documentation
Cons: styling

plotly

Pro: popularity,completeness, documentation
Cons: stability, dev focusing on python

C3

Pro: based on D3, browser compatibility, documentation
Cons: austere styling, features

Charts.js

Pro:
Cons: documentation

NVD3

Pro:
Cons: last release 2017, 534 issues, documentation