Chart Legend Cross Highlight
Hovering or selecting a chart legend emphasizes the matching data series.
Hovering or selecting a chart legend emphasizes the matching data series.
Live Demo
Hover over the element or use Tab to focus.
Source Code
Copy the HTML, CSS or JavaScript you need for your project.
HTML
<fieldset class="tbx-1067"><legend>Traffic sources (example)</legend>
<div class="tbx-1067__chart" role="img" aria-label="Sample traffic data: Search 68, social 43, direct 29"><span class="tbx-1067__bar tbx-1067__bar--a" title="Search 68">68</span><span class="tbx-1067__bar tbx-1067__bar--b" title="SNS 43">43</span><span class="tbx-1067__bar tbx-1067__bar--c" title="Direct 29">29</span></div>
<div class="tbx-1067__legend"><label><input name="tbx-1067-channel" type="radio" value="search" checked><span>Search</span></label><label><input name="tbx-1067-channel" type="radio" value="social"><span>SNS</span></label><label><input name="tbx-1067-channel" type="radio" value="direct"><span>Direct</span></label></div>
</fieldset>
CSS
.tbx-1067{width:min(306px,100%);padding:12px 14px 13px;margin:0;min-width:0;border:1px solid #d9e3e7;border-radius:10px;background:#fff;font:11px/1.35 system-ui,sans-serif;color:#375466}.tbx-1067 legend{padding:0 5px;font-weight:800;font-size:11px}
.tbx-1067__chart{display:flex;align-items:flex-end;justify-content:space-around;gap:12px;height:132px;padding:16px 24px 0;background:linear-gradient(to top,#e5eaef 1px,transparent 1px) 0 100%/100% 32px;position:relative}.tbx-1067__bar{flex:1;max-width:50px;display:flex;align-items:flex-start;justify-content:center;padding-top:8px;color:white;font-size:10px;font-weight:800;border-radius:5px 5px 0 0;opacity:.35;transition:opacity .25s,transform .25s,filter .25s;transform-origin:bottom}
.tbx-1067__bar--a{height:102px;background:#3a8587}.tbx-1067__bar--b{height:65px;background:#d09169}.tbx-1067__bar--c{height:44px;background:#7b92c7}
.tbx-1067__legend{display:flex;gap:5px;justify-content:space-between;padding-top:12px}.tbx-1067__legend label{position:relative;flex:1;cursor:pointer;text-align:center}.tbx-1067__legend input{position:absolute;opacity:0;width:1px;height:1px}.tbx-1067__legend span{display:block;padding:7px 4px;border:1px solid #e3e9ec;border-radius:5px;font-size:10px;color:#647a87;transition:background .25s,border-color .25s}.tbx-1067__legend label:hover span{background:#e8f3f3;border-color:#6aa09e}.tbx-1067__legend input:checked+span{background:#e4f3f2;border-color:#72a8a5;color:#245763;font-weight:800}
.tbx-1067__legend input:focus-visible+span{outline:3px solid #d9a66c;outline-offset:2px}
.tbx-1067:has(input[value="search"]:checked) .tbx-1067__bar--a,.tbx-1067:has(input[value="social"]:checked) .tbx-1067__bar--b,.tbx-1067:has(input[value="direct"]:checked) .tbx-1067__bar--c{opacity:1;transform:scaleX(1.06)}
.tbx-1067:has(.tbx-1067__legend label:nth-child(1):hover) .tbx-1067__bar--a,.tbx-1067:has(.tbx-1067__legend label:nth-child(2):hover) .tbx-1067__bar--b,.tbx-1067:has(.tbx-1067__legend label:nth-child(3):hover) .tbx-1067__bar--c{opacity:1;filter:brightness(1.08);transform:scaleX(1.08)}
@media(prefers-reduced-motion:reduce){.tbx-1067__bar,.tbx-1067__legend span{transition:none}}
How to Use
Insert the HTML and add the CSS to your stylesheet. Adjust colors and sizes and avoid class conflicts.
Use Case
Useful for analytics sections and reports sections.
Technical Notes
Keep controls usable on touch devices. Test keyboard focus and reduced-motion preferences.
Mobile: Ensure the interactive content remains accessible without hover on touch devices.
Browser: Uses modern CSS. Check behavior in the browsers you support.
Reduced Motion: Check that prefers-reduced-motion is respected.