figure[data-chart="xy"] { --chart-xy-height: 12rem; min-width: 0; margin: 0; line-height: 1; > [data-chart="plot"] { position: relative; } svg { display: block; width: 100%; height: var(--chart-xy-height); overflow: visible; } [data-chart="xy-line"] { fill: none; stroke: var(--color, var(--gray)); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; vector-effect: non-scaling-stroke; } [data-chart="xy-point"] { fill: var(--color, var(--white)); stroke: var(--black); stroke-width: 1.75; vector-effect: non-scaling-stroke; } [data-chart="xy-guide"] { opacity: 0; stroke: var(--white); stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; pointer-events: none; } svg[data-xy-hover="true"] [data-chart="xy-guide"] { opacity: 1; } [data-chart-marker="xy"] { color: var(--black); background: var(--white); text-transform: uppercase; } }