Skip to content

Instantly share code, notes, and snippets.

@skeller88
Created April 16, 2016 20:25
Show Gist options
  • Save skeller88/ad79cdb9cb260226ff0b7f9cf73079d1 to your computer and use it in GitHub Desktop.
Save skeller88/ad79cdb9cb260226ff0b7f9cf73079d1 to your computer and use it in GitHub Desktop.
Adding responsive legend to D3 charts
<div class="sk-legend-wrapper" ng-show="isLegendShown">
<div kendo-window="chartLegend" k-title="'Legend'" k-visible="false" k-on-open="chartLegendVisible = true" k-on-close="chartLegendVisible = false">
<div class="sk-legend-content k-content" kendo-tab-strip="" k-options="tabStripOptions">
<!-- tab list -->
<ul>
<li class="k-state-active">Career Names</li>
<li>Bubbles</li>
</ul>
<div class="sk-legend-careers">
<ul>
<div class="sk-legend-career" ng-class="{'sk-highlight-career': highlightCareer}" career-num="{{careerNum}}" ng-mouseover="addHighlight(careerNum); showCareerInfo = true; highlightCareer = true;" ng-mouseout="removeHighlight(careerNum); showCareerInfo = false; highlightCareer = false;" ng-repeat="(careerNum, career) in selectedCareersData | orderBy:'career_name'">
<span class="sk-legend-career-name">{{career.career_name}}</span>
<div class="sk-legend-career-info" ng-show="showCareerInfo">
<div>
<span class="sk-tooltip-label">People employed: </span><span class="sk-tooltip-data">{{career.career_2012_emp*1000 | number}}</span>
</div>
<div>
<span class="sk-tooltip-label">Expected change in demand: </span><span class="sk-tooltip-data">{{career.career_percent_emp_change}}%</span>
</div>
<div>
<span class="sk-tooltip-label">Annual wage: </span><span class="sk-tooltip-data">${{career.career_med_ann_wage | number}}</span>
</div>
</div>
</div>
</ul>
</div>
<div sk-legend-bubbles="" class="sk-legend-bubbles">
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment