highlighted.svg

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="350"><defs><style type="text/css"><![CDATA[ 
.bar rect {
  fill-opacity: 0;
  stroke:       black;
  stroke-width: 0.5;
}

.highlight rect {
  fill:       red;
  fill-opacity: 1;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
path {
    stroke: red;
    fill: none;
}

line {
    stroke: red;
}

path.marker {
    fill: red;
}
 ]]></style></defs><g transform="translate(50,10)"><g class="bar" transform="translate(0,310)"><rect x="1" width="11.999999999999996" height="0"></rect></g><g class="bar" transform="translate(12.999999999999996,310)"><rect x="1" width="11.999999999999996" height="0"></rect></g><g class="bar" transform="translate(25.999999999999993,310)"><rect x="1" width="11.999999999999996" height="0"></rect></g><g class="bar" transform="translate(39.00000000000001,310)"><rect x="1" width="11.999999999999996" height="0"></rect></g><g class="bar" transform="translate(52,304.6320346320346)"><rect x="1" width="11.999999999999996" height="5.3679653679653825"></rect></g><g class="bar" transform="translate(65,304.6320346320346)"><rect x="1" width="11.999999999999996" height="5.3679653679653825"></rect></g><g class="bar" transform="translate(78.00000000000001,305.97402597402595)"><rect x="1" width="11.999999999999996" height="4.025974025974051"></rect></g><g class="bar" transform="translate(91.00000000000001,303.2900432900433)"><rect x="1" width="11.999999999999996" height="6.709956709956714"></rect></g><g class="bar" transform="translate(104,297.9220779220779)"><rect x="1" width="11.999999999999996" height="12.077922077922096"></rect></g><g class="bar" transform="translate(117,279.13419913419915)"><rect x="1" width="11.999999999999996" height="30.86580086580085"></rect></g><g class="bar" transform="translate(130,233.5064935064935)"><rect x="1" width="11.999999999999996" height="76.49350649350649"></rect></g><g class="bar" transform="translate(143,205.32467532467533)"><rect x="1" width="11.999999999999996" height="104.67532467532467"></rect></g><g class="bar" transform="translate(156.00000000000003,169.0909090909091)"><rect x="1" width="11.999999999999996" height="140.9090909090909"></rect></g><g class="bar" transform="translate(169,134.1991341991342)"><rect x="1" width="11.999999999999996" height="175.8008658008658"></rect></g><g class="bar" transform="translate(182.00000000000003,112.72727272727272)"><rect x="1" width="11.999999999999996" height="197.27272727272728"></rect></g><g class="bar" transform="translate(195,122.12121212121212)"><rect x="1" width="11.999999999999996" height="187.87878787878788"></rect></g><g class="bar" transform="translate(208,52.33766233766232)"><rect x="1" width="11.999999999999996" height="257.6623376623377"></rect></g><g class="bar" transform="translate(221.00000000000003,0)"><rect x="1" width="11.999999999999996" height="310"></rect></g><g class="bar" transform="translate(234,22.813852813852805)"><rect x="1" width="11.999999999999996" height="287.1861471861472"></rect></g><g class="bar" transform="translate(247.00000000000003,9.393939393939377)"><rect x="1" width="11.999999999999996" height="300.6060606060606"></rect></g><g class="bar" transform="translate(260,16.10389610389609)"><rect x="1" width="11.999999999999996" height="293.8961038961039"></rect></g><g class="bar" transform="translate(273,71.12554112554113)"><rect x="1" width="11.999999999999996" height="238.87445887445887"></rect></g><g class="bar" transform="translate(286,57.705627705627705)"><rect x="1" width="11.999999999999996" height="252.2943722943723"></rect></g><g class="bar" transform="translate(299.00000000000006,157.01298701298703)"><rect x="1" width="11.999999999999996" height="152.98701298701297"></rect></g><g class="bar" transform="translate(312.00000000000006,193.24675324675326)"><rect x="1" width="11.999999999999996" height="116.75324675324674"></rect></g><g class="bar" transform="translate(325,217.4025974025974)"><rect x="1" width="11.999999999999996" height="92.5974025974026"></rect></g><g class="bar" transform="translate(338,265.7142857142857)"><rect x="1" width="11.999999999999996" height="44.28571428571428"></rect></g><g class="bar" transform="translate(351,272.42424242424244)"><rect x="1" width="11.999999999999996" height="37.575757575757564"></rect></g><g class="bar" transform="translate(364.00000000000006,272.42424242424244)"><rect x="1" width="11.999999999999996" height="37.575757575757564"></rect></g><g class="bar" transform="translate(377.00000000000006,285.84415584415586)"><rect x="1" width="11.999999999999996" height="24.155844155844136"></rect></g><g class="bar" transform="translate(390,304.6320346320346)"><rect x="1" width="11.999999999999996" height="5.3679653679653825"></rect></g><g class="bar" transform="translate(403,304.6320346320346)"><rect x="1" width="11.999999999999996" height="5.3679653679653825"></rect></g><g class="bar highlight" transform="translate(416,307.31601731601734)"><rect x="1" width="11.999999999999996" height="2.683982683982663"></rect></g><g class="bar" transform="translate(429.00000000000006,310)"><rect x="1" width="11.999999999999996" height="0"></rect></g><g class="bar" transform="translate(442.00000000000006,310)"><rect x="1" width="11.999999999999996" height="0"></rect></g><g class="bar" transform="translate(455,310)"><rect x="1" width="11.999999999999996" height="0"></rect></g><g class="bar" transform="translate(468,310)"><rect x="1" width="11.999999999999996" height="0"></rect></g><g class="bar" transform="translate(481,310)"><rect x="1" width="11.999999999999996" height="0"></rect></g><g class="bar" transform="translate(494.00000000000006,310)"><rect x="1" width="11.999999999999996" height="0"></rect></g><g class="bar" transform="translate(507.00000000000006,310)"><rect x="1" width="11.999999999999996" height="0"></rect></g><defs><marker id="arrow" viewBox="0 -5 10 10" refX="8" markerWidth="6" markerHeight="6" orient="auto"><path class="marker" d="M0,-5L10,0L0,5"></path></marker></defs><line class="arrow" x1="422.5" x2="422.5" y1="284.31601731601734" y2="305.31601731601734" marker-end="url(#arrow)"></line><g class="axis axis--x" transform="translate(0,310)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="#000" d="M0.5,6V0.5H520.5V6"></path><g class="tick" opacity="1" transform="translate(0.5,0)"><line stroke="#000" y2="6"></line><text fill="#000" y="9" dy="0.71em">0.01</text></g><g class="tick" opacity="1" transform="translate(130.5,0)"><line stroke="#000" y2="6"></line><text fill="#000" y="9" dy="0.71em">1</text></g><g class="tick" opacity="1" transform="translate(260.5,0)"><line stroke="#000" y2="6"></line><text fill="#000" y="9" dy="0.71em">100</text></g><g class="tick" opacity="1" transform="translate(390.5,0)"><line stroke="#000" y2="6"></line><text fill="#000" y="9" dy="0.71em">10000</text></g><g class="tick" opacity="1" transform="translate(520.5,0)"><line stroke="#000" y2="6"></line><text fill="#000" y="9" dy="0.71em"></text></g></g><g class="axis axis--y" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="#000" d="M-6,310.5H0.5V0.5H-6"></path><g class="tick" opacity="1" transform="translate(0,310.5)"><line stroke="#000" x2="-6"></line><text fill="#000" x="-9" dy="0.32em">0</text></g><g class="tick" opacity="1" transform="translate(0,283.66017316017314)"><line stroke="#000" x2="-6"></line><text fill="#000" x="-9" dy="0.32em">20</text></g><g class="tick" opacity="1" transform="translate(0,256.82034632034635)"><line stroke="#000" x2="-6"></line><text fill="#000" x="-9" dy="0.32em">40</text></g><g class="tick" opacity="1" transform="translate(0,229.9805194805195)"><line stroke="#000" x2="-6"></line><text fill="#000" x="-9" dy="0.32em">60</text></g><g class="tick" opacity="1" transform="translate(0,203.14069264069263)"><line stroke="#000" x2="-6"></line><text fill="#000" x="-9" dy="0.32em">80</text></g><g class="tick" opacity="1" transform="translate(0,176.3008658008658)"><line stroke="#000" x2="-6"></line><text fill="#000" x="-9" dy="0.32em">100</text></g><g class="tick" opacity="1" transform="translate(0,149.46103896103898)"><line stroke="#000" x2="-6"></line><text fill="#000" x="-9" dy="0.32em">120</text></g><g class="tick" opacity="1" transform="translate(0,122.62121212121212)"><line stroke="#000" x2="-6"></line><text fill="#000" x="-9" dy="0.32em">140</text></g><g class="tick" opacity="1" transform="translate(0,95.7813852813853)"><line stroke="#000" x2="-6"></line><text fill="#000" x="-9" dy="0.32em">160</text></g><g class="tick" opacity="1" transform="translate(0,68.94155844155844)"><line stroke="#000" x2="-6"></line><text fill="#000" x="-9" dy="0.32em">180</text></g><g class="tick" opacity="1" transform="translate(0,42.101731601731615)"><line stroke="#000" x2="-6"></line><text fill="#000" x="-9" dy="0.32em">200</text></g><g class="tick" opacity="1" transform="translate(0,15.26190476190476)"><line stroke="#000" x2="-6"></line><text fill="#000" x="-9" dy="0.32em">220</text></g></g></g></svg>