@albazhenov/we-chart/we-chart.min.css

Nice looking and easy customize vue component for plot line-chart.Slider & resizing present.Truly adaptive.

.leftThumb,.rightThumb{cursor:ew-resize;fill:#00f}.wline{cursor:pointer;stroke:#0074d9}.mbody{cursor:-webkit-grab;cursor:grab;fill:#cfebfd}.mbody:hover{cursor:move}.axislabelx{text-anchor:middle}.axislabelx,.axislabely{font-family:Arial,Helvetica Neue,Helvetica;fill:red;font-weight:600;stroke:transparent}.axislabely{alignment-baseline:auto}.chartSheet{stroke:#00f;stroke-width:2.5;fill:snow}.legend{font-weight:600}.legend,.titles{font-family:Arial,Helvetica Neue,Helvetica;fill:#0074d9}.titles{font-weight:800;text-anchor:middle;stroke:transparent}.titlesDot{stroke-width:1.1;font-family:Arial,Helvetica Neue,Helvetica;fill:#0074d9;font-weight:600}.axisX,.axisY{stroke:#0074d9;stroke-width:2}.cross{stroke:#0074d9;stroke-width:.5}.grids{stroke-width:.2;stroke:#0074d9;stroke-dasharray:3}.ticks{stroke-width:1.18}.plot,.ticks{stroke:#0074d9}.plot{fill:none;stroke-width:2}.zero{stroke:red;stroke-width:.5}[theme=berry]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[theme=berry] .leftThumb,[theme=berry] .rightThumb{cursor:ew-resize;fill:#8b0000}[theme=berry] .wline{cursor:pointer;stroke:#556b2f}[theme=berry] .mbody{cursor:-webkit-grab;cursor:grab;fill:#8fbc8f}[theme=berry] .mbody:hover{cursor:move}[theme=berry] .axislabelx{text-anchor:middle}[theme=berry] .axislabelx,[theme=berry] .axislabely{fill:#c71585;font-family:Lucida Sans Typewriter,Lucida Console,monospace}[theme=berry] .axislabely{alignment-baseline:auto}[theme=berry] .chartSheet{stroke:#c71585;stroke-width:3.5;fill:snow}[theme=berry] .titles{fill:#556b2f;text-anchor:middle}[theme=berry] .legend,[theme=berry] .titles{stroke-width:2.1;font-family:Lucida Sans Typewriter,Lucida Console,monospace}[theme=berry] .legend{fill:#dc143c}[theme=berry] .titlesDot{stroke-width:2.1;fill:#dc143c}[theme=berry] .axisX,[theme=berry] .axisY{stroke:sienna;stroke-width:1.8}[theme=berry] .cross{stroke:#006400;stroke-width:.5;stroke-dasharray:5}[theme=berry] .grids{stroke-width:.3;stroke:#556b2f;stroke-dasharray:0}[theme=berry] .ticks{stroke-width:1.48;stroke:#006400}[theme=berry] .plot{fill:none;stroke:#dc143c;stroke-width:1.8}[theme=berry] .zero{stroke:sienna;stroke-width:.5}[theme=monaco] .leftThumb,[theme=monaco] .rightThumb{cursor:ew-resize;fill:#7cfc00}[theme=monaco] .wline{cursor:pointer;stroke:green}[theme=monaco] .mbody{cursor:-webkit-grab;cursor:grab;fill:#3cb371}[theme=monaco] .mbody:hover{cursor:move}[theme=monaco] .axislabelx{stroke-width:.6;text-anchor:middle}[theme=monaco] .axislabelx,[theme=monaco] .axislabely{fill:#ff0;font-family:monaco,Consolas,Lucida Console,monospace}[theme=monaco] .axislabely{stroke-width:.8;alignment-baseline:middle}[theme=monaco] .chartSheet{stroke:silver;fill:#000}[theme=monaco] .titles{text-anchor:middle}[theme=monaco] .legend,[theme=monaco] .titles{stroke-width:2.1;font-family:monaco,Consolas,Lucida Console,monospace;fill:#ff0}[theme=monaco] .titlesDot{stroke-width:2.1;fill:green}[theme=monaco] .axisX,[theme=monaco] .axisY{stroke:gold;stroke-width:1.8}[theme=monaco] .cross{stroke:gold;stroke-width:.5}[theme=monaco] .grids{stroke-width:.3;stroke:gold;stroke-dasharray:7}[theme=monaco] .ticks{stroke-width:1.48;stroke:gold}[theme=monaco] .plot{fill:none;stroke:green;stroke-width:2.8}[theme=monaco] .zero{stroke:gold;stroke-width:.5}