/******************** * HTML CSS */ .chartWrap { margin: 0; padding: 0; overflow: hidden; } /******************** * TOOLTIP CSS */ .nvtooltip { position: absolute; background-color: rgba(255,255,255,1); padding: 10px; border: 1px solid #ddd; z-index: 10000; font-family: Arial; font-size: 13px; transition: opacity 500ms linear; -moz-transition: opacity 500ms linear; -webkit-transition: opacity 500ms linear; transition-delay: 500ms; -moz-transition-delay: 500ms; -webkit-transition-delay: 500ms; -moz-box-shadow: 4px 4px 12px rgba(0,0,0,.5); -webkit-box-shadow: 4px 4px 12px rgba(0,0,0,.5); box-shadow: 4px 4px 12px rgba(0,0,0,.5); -moz-border-radius: 15px; border-radius: 15px; } .nvtooltip h3 { margin: 0; padding: 0; text-align: center; } .nvtooltip p { margin: 0; padding: 0; text-align: center; } .nvtooltip span { display: inline-block; margin: 2px 0; } /******************** * SVG CSS */ svg { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } text { font: 12px sans-serif; } svg .title { font: bold 14px Arial; } /********** * Brush */ .brush .extent { stroke: #666; fill-opacity: .125; shape-rendering: crispEdges; } /********** * Legend */ .legend .series { cursor: pointer; } .legend .disabled circle { fill-opacity: 0; } /********** * Axes */ .axis path { fill: none; stroke: #000; stroke-opacity: .75; shape-rendering: crispEdges; } .axis path.domain { stroke-opacity: .75; } .axis line { fill: none; stroke: #000; stroke-opacity: .25; shape-rendering: crispEdges; } .axis line.zero { stroke-opacity: .75; } /********** * Bars */ .bars .negative rect { zfill: brown; cursor: pointer; } .bars rect { zfill: steelblue; cursor: pointer; fill-opacity: .75; } .bars rect:hover { fill-opacity: 1; } .bars .hover rect { fill: lightblue; } .bars text { fill: rgba(0,0,0,0); } .bars .hover text { fill: rgba(0,0,0,1); } .x.axis text { transform: rotate(90); } /********** * Bars */ .d3multibar .groups rect { stroke-opacity: 0; } .d3multibar .groups rect:hover { fill-opacity: 1; } /*********** * Pie Chart */ .pie .hover path { fill: lightblue; } /********** * Lines */ .groups path { fill: none; stroke-width: 1.5px; stroke-linecap: round; shape-rendering: geometricPrecision; transition: stroke-width 250ms linear; -moz-transition: stroke-width 250ms linear; -webkit-transition: stroke-width 250ms linear; transition-delay: 250ms -moz-transition-delay: 250ms; -webkit-transition-delay: 250ms; } .line.hover path { stroke-width: 6px; } .groups .point { transition: all 250ms linear; -moz-transition: all 250ms linear; -webkit-transition: all 250ms linear; } .groups .point.hover { stroke-width: 20px; stroke-opacity: .5; } .point-paths path { stroke: #aaa; stroke-opacity: 0; fill: #eee; fill-opacity: 0; } .indexLine { cursor: ew-resize; } /********** * Scatter */ .groups .point { transition: all 250ms linear; -moz-transition: all 250ms linear; -webkit-transition: all 250ms linear; } .groups .point.hover { stroke-width: 20px; stroke-opacity: .5; } .d3scatter .point.hover { fill-opacity: 1; } /* .group.hover .point { fill-opacity: 1; } */ /********** * Stacked Area */ .d3stackedarea path.area { fill-opacity: .65; stroke-opacity: .65; stroke-width: 0.1px; transition: all 500ms linear; -moz-transition: all 500ms linear; -webkit-transition: all 500ms linear; /* transition-delay: 500ms; -moz-transition-delay: 500ms; -webkit-transition-delay: 500ms; */ } .d3stackedarea path.area.hover { fill-opacity: .85; stroke-opacity: .85; } /* .d3stackedarea .groups path { stroke-opacity: 0; } */ .d3stackedarea .groups .point { stroke-opacity: 0; fill-opacity: 0; transition: all 250ms linear; -moz-transition: all 250ms linear; -webkit-transition: all 250ms linear; } .d3stackedarea .groups .point.hover { stroke-width: 20px; stroke-opacity: .75; fill-opacity: 1; } /********** * Line Plus Bar */ .d3linePlusBar .bar rect { fill-opacity: .75; } .d3linePlusBar .bar rect:hover { fill-opacity: 1; } /********** * Bullet */ .bullet { font: 10px sans-serif; cursor: pointer; } .bullet rect { fill-opacity: .6; } .bullet rect:hover { fill-opacity: 1; } .bullet .marker { stroke: #000; stroke-width: 2px; } .bullet .markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; } .bullet .tick line { stroke: #666; stroke-width: .5px; } .bullet .range.s0 { fill: #eee; } .bullet .range.s1 { fill: #ddd; } .bullet .range.s2 { fill: #ccc; } .bullet .measure.s0 { fill: steelblue; } .bullet .measure.s1 { fill: darkblue; } .bullet .title { font-size: 14px; font-weight: bold; } .bullet .subtitle { fill: #999; } /********** * Sparkline plus */ .sparklineplus .hoverValue line { stroke: #f44; stroke-width: 1.5px; } .sparklineplus, .sparklineplus g { pointer-events: all; } .sparklineplus .hoverArea { fill-opacity: 0; stroke-opacity: 0; } .sparklineplus .xValue, .sparklineplus .yValue { stroke: #666; font-size: .5em; font-weight: normal; } .sparklineplus .yValue { stroke: #f66; }