billboard.js
Version:
Re-usable easy interface JavaScript chart library, based on D3 v4+
10 lines (9 loc) • 5.11 kB
CSS
/*!
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*
* billboard.js, JavaScript chart library
* https://naver.github.io/billboard.js/
*
* @version 3.16.0
*/.bb-color-pattern{background-image:url(#4a7fff;#b02c2c;#1ca46c;#b47300;#49baf3;#ed7e13;#cfaa00;#a6cd19;#dccb52;#f5d194;)}.bb svg{font-size:12px;font-family:Helvetica,Arial,sans-serif,nanumgothic,Dotum;line-height:1}.bb path,.bb line{fill:none;stroke:#8d9cab}.bb text,.bb .bb-button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;fill:#8d9cab;font-size:11px}.bb-legend-item-title,.bb-xgrid-focus,.bb-ygrid-focus,.bb-ygrid,.bb-line{shape-rendering:crispEdges}.bb-chart-arcs .bb-needle{fill:#8d9cab}.bb-chart-funnels path{stroke-width:0}.bb-chart-funnels+.bb-chart-texts text{fill:#fff}.bb-axis{shape-rendering:crispEdges}.bb-axis .bb-axis-x-tooltip,.bb-axis .bb-axis-y-tooltip,.bb-axis .bb-axis-y2-tooltip{font-size:.9em;fill:#fff;white-space:nowrap}.bb-axis-y text,.bb-axis-y2 text{fill:#8d9cab}.bb-event-rects{fill-opacity:1}.bb-event-rects .bb-event-rect{fill:transparent}.bb-event-rects .bb-event-rect._active_{fill:#27c9030d}.tick._active_ text{fill:#00c83c}.bb-grid{pointer-events:none}.bb-grid line{stroke:#5c666e}.bb-xgrid-focus line,.bb-ygrid-focus line{stroke:#ccd9e6}.bb-text.bb-empty{fill:#8d9cab}.bb-line{stroke-width:1px}.bb-circle._expanded_{stroke-width:2px;stroke:8d9cab}rect.bb-circle._expanded_,use.bb-circle._expanded_{stroke-width:1px}.selection{stroke:none;fill:#ccd9e6}.bb-selected-circle{fill:#ccd9e6;stroke-width:2px}.bb-bar{stroke-width:.5px}.bb-bar._expanded_{fill-opacity:.75}.bb-candlestick{stroke-width:1px}.bb-candlestick._expanded_{fill-opacity:.75}.bb-target.bb-focused,.bb-circles.bb-focused{opacity:1}.bb-target.bb-focused path.bb-line,.bb-target.bb-focused path.bb-step,.bb-circles.bb-focused path.bb-line,.bb-circles.bb-focused path.bb-step{stroke-width:2px}.bb-target.bb-defocused,.bb-circles.bb-defocused{opacity:.5}.bb-target.bb-defocused .text-overlapping,.bb-circles.bb-defocused .text-overlapping{opacity:.05}.bb-region{fill:#4682b4}.bb-region rect{fill-opacity:.5}.bb-region.selected rect{fill:#27c903}.bb-zoom-brush{fill-opacity:.25;fill:#ccd9e6}.bb-brush .extent{fill-opacity:.5}.bb-legend-item{user-select:none}.bb-legend-item line{stroke-width:10px;stroke-dasharray:3px}.bb-legend-item text{transform:translateY(-1px)}.bb-legend-item-hidden{opacity:.5}.bb-legend-background{opacity:.75;stroke:#d3d3d3;stroke-width:1}.bb-title{font-size:14px}.bb-chart-treemaps rect{stroke:#8d9cab;stroke-width:1px}.bb-tooltip-container{z-index:10;font-family:Helvetica,Arial,sans-serif,nanumgothic,Dotum;user-select:none;transform:translateZ(0)}.bb-tooltip{border-collapse:separate;border-spacing:0;empty-cells:show;border:1px solid #828181;border-radius:5px;background-color:#000;text-align:left;font-size:11px;color:#fff;white-space:nowrap}.bb-tooltip th{font-size:12px;padding:4px 8px;text-align:left;border-bottom:solid 1px #828181}.bb-tooltip td{padding:4px 6px}.bb-tooltip td:first-child{padding-left:8px}.bb-tooltip td:last-child{padding-right:8px}.bb-tooltip td>span,.bb-tooltip td>svg{display:inline-block;width:7px;height:7px;margin:-1px 6px 0 0;vertical-align:middle}.bb-tooltip td.value{border-left:1px solid transparent;text-align:right}.bb-tooltip .bb-tooltip-title{display:inline-block;color:#aaa;line-height:20px}.bb-tooltip .bb-tooltip-detail table{border-collapse:collapse;border-spacing:0}.bb-tooltip .bb-tooltip-detail .bb-tooltip-name,.bb-tooltip .bb-tooltip-detail .bb-tooltip-value{font-size:11px;line-height:13px;padding:4px 0 3px;color:#444;text-align:left;font-weight:400}.bb-tooltip .bb-tooltip-detail .bb-tooltip-value{padding-left:5px;font-weight:800;font-size:12px}.bb-area{stroke-width:0;opacity:.5}.bb-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}text.bb-chart-arcs-gauge-title{dominant-baseline:middle;font-size:2.7em}.bb-chart-arcs .bb-chart-arcs-background{fill:#3f3f3f;stroke:none}.bb-chart-arcs .bb-chart-arcs-gauge-unit{fill:#828181;font-size:16px}.bb-chart-arcs .bb-chart-arcs-gauge-min,.bb-chart-arcs .bb-chart-arcs-gauge-max{fill:#777}.bb-chart-arcs .bb-chart-arcs-title{font-size:16px;fill:#b6c2ce;font-weight:600}.bb-chart-arcs path.empty{fill:#eaeaea;stroke-width:0}.bb-chart-arcs .bb-levels circle{fill:none;stroke:#848282;stroke-width:.5px}.bb-chart-arcs .bb-levels text{fill:#848282}.bb-chart-arc .bb-gauge-value{fill:#b6c2ce}.bb-chart-arc rect{stroke:#8d9cab;stroke-width:1}.bb-chart-arc text{fill:#fff;font-size:13px}.bb-chart-radars .bb-levels polygon{fill:none;stroke:#848282;stroke-width:.5px}.bb-chart-radars .bb-levels text{fill:#848282}.bb-chart-radars .bb-axis line{stroke:#848282;stroke-width:.5px}.bb-chart-radars .bb-axis text{font-size:1.15em;cursor:default}.bb-chart-radars .bb-shapes polygon{fill-opacity:.2;stroke-width:1px}.bb-button{position:absolute;top:10px;right:10px}.bb-button .bb-zoom-reset{border:solid 1px #ccc;background-color:#000;color:#fff;padding:5px;border-radius:5px;cursor:pointer}