@deepsource/charts
Version:
<div align="center"> <img src="https://github.com/frappe/design/blob/master/logos/logo-2019/frappe-charts-logo.png" height="128"> <a href="https://frappe.github.io/charts"> <h2>Frappe Charts</h2> </a> </div>
122 lines (119 loc) • 4.04 kB
CSS
:root {
--charts-label-color: #313b44;
--charts-axis-line-color: #f4f5f6;
--charts-tooltip-title: var(--charts-label-color);
--charts-tooltip-label: var(--charts-label-color);
--charts-tooltip-value: #192734;
--charts-tooltip-bg: #ffffff;
--charts-stroke-width: 2px;
--charts-dataset-circle-stroke: #ffffff;
--charts-dataset-circle-stroke-width: var(--charts-stroke-width);
--charts-legend-label: var(--charts-label-color);
--charts-legend-value: var(--charts-label-color); }
.chart-container {
position: relative;
/* for absolutely positioned tooltip */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; }
.chart-container .axis,
.chart-container .chart-label {
fill: var(--charts-label-color); }
.chart-container .axis line,
.chart-container .chart-label line {
stroke: var(--charts-axis-line-color); }
.chart-container .dataset-units circle {
stroke: var(--charts-dataset-circle-stroke);
stroke-width: var(--charts-dataset-circle-stroke-width); }
.chart-container .dataset-units path {
fill: none;
stroke-opacity: 1;
stroke-width: var(--charts-stroke-width); }
.chart-container .dataset-path {
stroke-width: var(--charts-stroke-width); }
.chart-container .path-group path {
fill: none;
stroke-opacity: 1;
stroke-width: var(--charts-stroke-width); }
.chart-container line.dashed {
stroke-dasharray: 5, 3; }
.chart-container .axis-line .specific-value {
text-anchor: start; }
.chart-container .axis-line .y-line {
text-anchor: end; }
.chart-container .axis-line .x-line {
text-anchor: middle; }
.chart-container .legend-dataset-label {
fill: var(--charts-legend-label);
font-weight: 600; }
.chart-container .legend-dataset-value {
fill: var(--charts-legend-value); }
.graph-svg-tip {
position: absolute;
z-index: 99999;
padding: 10px;
font-size: 12px;
text-align: center;
background: var(--charts-tooltip-bg);
box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1), 0px 2px 6px rgba(17, 43, 66, 0.08), 0px 40px 30px -30px rgba(17, 43, 66, 0.1);
border-radius: 6px; }
.graph-svg-tip ul {
padding-left: 0;
display: flex; }
.graph-svg-tip ol {
padding-left: 0;
display: flex; }
.graph-svg-tip ul.data-point-list li {
min-width: 90px;
font-weight: 600; }
.graph-svg-tip .svg-pointer {
position: absolute;
height: 12px;
width: 12px;
border-radius: 2px;
background: var(--charts-tooltip-bg);
transform: rotate(45deg);
margin-top: -7px;
margin-left: -6px; }
.graph-svg-tip.comparison {
text-align: left;
padding: 0px;
pointer-events: none; }
.graph-svg-tip.comparison .title {
display: block;
padding: 16px;
margin: 0;
color: var(--charts-tooltip-title);
font-weight: 600;
line-height: 1;
pointer-events: none;
text-transform: uppercase; }
.graph-svg-tip.comparison .title strong {
color: var(--charts-tooltip-value); }
.graph-svg-tip.comparison ul {
margin: 0;
white-space: nowrap;
list-style: none; }
.graph-svg-tip.comparison ul.tooltip-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 5px; }
.graph-svg-tip.comparison li {
display: inline-block;
display: flex;
flex-direction: row;
font-weight: 600;
line-height: 1;
padding: 5px 15px 15px 15px; }
.graph-svg-tip.comparison li .tooltip-legend {
height: 12px;
width: 12px;
margin-right: 8px;
border-radius: 2px; }
.graph-svg-tip.comparison li .tooltip-label {
margin-top: 4px;
font-size: 11px;
line-height: 1.25;
max-width: 150px;
white-space: normal;
color: var(--charts-tooltip-label); }
.graph-svg-tip.comparison li .tooltip-value {
color: var(--charts-tooltip-value); }