we-do-chart/we-do-chart.css

Nice looking and easy customize vue component for plot line-chart.Slider & resizing present.Truly responsive. Slide,resize,zoom,shapes are present

[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:grab;fill:#8fbc8f}[theme=berry] .mbody:hover{cursor:url(data:image/png;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8=),auto}[theme=berry] .mbody:active{fill:#ceed;cursor:url(data:image/x-icon;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAAH/AAAB/wAAA/0AAANsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//+AB///wAf//4AH//+AD///yT/////////////////////////////8=),auto}[theme=berry] .axislabelx{fill:#c71585;text-anchor:middle;font-family:Lucida Sans Typewriter,Lucida Console,monospace}[theme=berry] .axislabely{fill:#c71585;alignment-baseline:auto;font-family:Lucida Sans Typewriter,Lucida Console,monospace}[theme=berry] .chartSheet{stroke:#c71585;stroke-width:3.5;fill:snow;z-index:1}[theme=berry] .titles{stroke-width:2.1;font-family:Lucida Sans Typewriter,Lucida Console,monospace;fill:#556b2f;text-anchor:middle;z-index:2}[theme=berry] .legend{stroke-width:2.1;font-family:Lucida Sans Typewriter,Lucida Console,monospace;fill:#dc143c}[theme=berry] .titlesDot{stroke-width:2.1;fill:#dc143c}[theme=berry] .axisY,[theme=berry] .axisX{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:grab;fill:#3cb371}[theme=monaco] .mbody:hover{cursor:url(data:image/png;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8=),auto}[theme=monaco] .mbody:active{fill:#ceed;cursor:url(data:image/x-icon;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAAH/AAAB/wAAA/0AAANsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//+AB///wAf//4AH//+AD///yT/////////////////////////////8=),auto}[theme=monaco] .axislabelx{stroke-width:.6;fill:#ff0;text-anchor:middle;font-family:monaco,Consolas,Lucida Console,monospace}[theme=monaco] .axislabely{stroke-width:.8;fill:#ff0;alignment-baseline:auto;font-family:monaco,Consolas,Lucida Console,monospace}[theme=monaco] .chartSheet{stroke:silver;fill:#000;z-index:1}[theme=monaco] .titles{stroke-width:2.1;font-family:monaco,Consolas,Lucida Console,monospace;fill:#ff0;text-anchor:middle;z-index:2}[theme=monaco] .legend{stroke-width:2.1;font-family:monaco,Consolas,Lucida Console,monospace;fill:#ff0}[theme=monaco] .titlesDot{stroke-width:2.1;fill:green}[theme=monaco] .axisY,[theme=monaco] .axisX{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}.right-side{background-color:#feeffe}.central{min-width:600px;background-color:#efde}.left-side{background-color:#d2efde}.leftThumb,.rightThumb{cursor:ew-resize;fill:#00f}.wline{cursor:pointer;stroke:#0074d9}.mbody{fill:#cfebfd}.mbody:hover{cursor:url(data:image/png;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8=),auto}.mbody:active{fill:#ceed;cursor:url(data:image/x-icon;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAAH/AAAB/wAAA/0AAANsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//+AB///wAf//4AH//+AD///yT/////////////////////////////8=),auto}.axislabelx{font-family:Arial,Helvetica Neue,Helvetica;fill:red;text-anchor:middle;font-weight:600;stroke:transparent}.axislabely{font-family:Arial,Helvetica Neue,Helvetica;fill:red;alignment-baseline:auto;font-weight:600;stroke:transparent}.chartSheet{stroke:#00f;stroke-width:2.5;fill:snow;z-index:1}.legend{font-family:Arial,Helvetica Neue,Helvetica;fill:#0074d9;font-weight:600}.titles{font-family:Arial,Helvetica Neue,Helvetica;fill:#0074d9;font-weight:800;text-anchor:middle;stroke:transparent;z-index:2}.titlesDot{stroke-width:1.1;font-family:Arial,Helvetica Neue,Helvetica;fill:#0074d9;font-weight:600}.axisY,.axisX{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;stroke:#0074d9}.plot{fill:none;stroke:#0074d9;stroke-width:2}.zero{stroke:red;stroke-width:.5}.shape{stroke:#0074d9;fill:#0074d9;stroke-width:1.5}.shape .tooltip{font-size:10px}.shape .tooltip:before{content:attr(data-text);position:absolute;top:50%;transform:translateY(-50%);left:60%;margin-left:1px;min-width:1rem;padding:.2rem;border-radius:.3rem;text-align:center;display:none;transition:1.7s opacity;white-space:normal;line-height:1.3rem}.shape .tooltip:hover:before{display:block;opacity:.75;transition:1.1s opacity}