21 #Graphs Graphs extended

Various types of graphs and charts. Some of these are merely helper classes to supplement other tools.

21.1 #Graphs.Chart Chart extended

chart

Use the chart class to add proper spacing to a chart.

Example

Following content

<!-- This will likely be a canvas element rather than a div. -->
<div class="chart">
  <img src="../images/docs/example-chart.png"/>
</div>
<p>Following content</p>

21.2 #Graphs.Dot Dot extended

Intended to be absolutely positioned over maps and diagrams.

Example 
<div class="dot"></div>

21.3 #Graphs.Highcharts Highchart Tooltips extended

tooltip-product, tooltip-date, tooltip-series

Use these settings in highcharts:

colors
['#0254a3']
tooltip.backgroundColor
'#333'
tooltip.style.color
'#fff'
Example
Friday Apr 11,
2014
Series 1: 109.04 
<div class="highcharts-tooltip" style="display: inline-block; position: relative; background-color: #333; padding: 8px; color: #fff">
  <div class="tooltip-product">
    <div class="tooltip-date">
      Friday <strong>Apr 11,<br>
      2014</strong>
    </div>
    <div class="tooltip-series">
      Series 1: <strong>109.04</strong>
    </div>
  </div>
</div>

21.4 #Graphs.Percent Percent Bar Graph extended

percent-graph, percent-graph-bar

The aria-* attributes are essential to make the bar graph understandable to screen readers.

Example
48%
Derivatives
16%
Tech & Other
14%
Market Data
12%
Listings
10%
Cash Equities 
<div class="percent-graph">
  <div class="percent-graph-bar"
       aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"
       style="width: 48%;">
    48%<br>Derivatives
  </div>
  <div class="percent-graph-bar"
       aria-valuenow="16" aria-valuemin="0" aria-valuemax="100"
       style="width: 16%;">
    16%<br>Tech &amp; Other
  </div>
  <div class="percent-graph-bar"
       aria-valuenow="14" aria-valuemin="0" aria-valuemax="100"
       style="width: 14%;">
    14%<br>Market Data
  </div>
  <div class="percent-graph-bar"
       aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"
       style="width: 12%;">
    12%<br>Listings
  </div>
  <div class="percent-graph-bar"
       aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"
       style="width: 10%;">
    10%<br>Cash Equities
  </div>
</div>
Example
48%
16%
14%
12%
10%
Show Markup
<div class="percent-graph percent-graph-compact">
  <div class="percent-graph-bar"
       aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"
       style="width: 48%;">
    48%
  </div>
  <div class="percent-graph-bar"
       aria-valuenow="16" aria-valuemin="0" aria-valuemax="100"
       style="width: 16%;">
    16%
  </div>
  <div class="percent-graph-bar"
       aria-valuenow="14" aria-valuemin="0" aria-valuemax="100"
       style="width: 14%;">
    14%
  </div>
  <div class="percent-graph-bar"
       aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"
       style="width: 12%;">
    12%
  </div>
  <div class="percent-graph-bar"
       aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"
       style="width: 10%;">
    10%
  </div>
</div>