chart.component.html
8.4 KB
<div class="chart-container">
<svg class="chart" viewBox="0 0 600 600" preserveAspectRatio="xMinYMax meet"><g transform="translate(60,20)"><g class="x axis" transform="translate(0,300)"><g class="tick" transform="translate(25,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">JAN</text></g><g class="tick" transform="translate(63,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">FEB</text></g><g class="tick" transform="translate(101,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">MAR</text></g><g class="tick" transform="translate(139,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">APR</text></g><g class="tick" transform="translate(177,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">MAY</text></g><g class="tick" transform="translate(215,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">JUN</text></g><g class="tick" transform="translate(253,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">JUL</text></g><g class="tick" transform="translate(291,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">AUG</text></g><g class="tick" transform="translate(329,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">SEP</text></g><g class="tick" transform="translate(367,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">OCT</text></g><g class="tick" transform="translate(405,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">NOV</text></g><g class="tick" transform="translate(443,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">DEC</text></g><g class="tick" transform="translate(481,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">JAN</text></g><g class="tick" transform="translate(519,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">FEB</text></g><g class="tick" transform="translate(557,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">MAR</text></g><g class="tick" transform="translate(595,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">APR</text></g><path class="domain" d="M0,6V0H620V6" style="display: none;"></path></g><g class="y axis"><g class="tick" transform="translate(0,300)" style="opacity: 1;"><line x2="-6" y2="0"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">0.0</text></g><g class="tick" transform="translate(0,273)" style="opacity: 1;"><line x2="-6" y2="0"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">50K</text></g><g class="tick" transform="translate(0,245)" style="opacity: 1;"><line x2="-6" y2="0"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">100K</text></g><g class="tick" transform="translate(0,218)" style="opacity: 1;"><line x2="-6" y2="0"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">150K</text></g><g class="tick" transform="translate(0,190)" style="opacity: 1;"><line x2="-6" y2="0"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">200K</text></g><g class="tick" transform="translate(0,163)" style="opacity: 1;"><line x2="-6" y2="0"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">250K</text></g><g class="tick" transform="translate(0,135)" style="opacity: 1;"><line x2="-6" y2="0"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">300K</text></g><g class="tick" transform="translate(0,108)" style="opacity: 1;"><line x2="-6" y2="0"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">350K</text></g><g class="tick" transform="translate(0,80)" style="opacity: 1;"><line x2="-6" y2="0"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">400K</text></g><g class="tick" transform="translate(0,53)" style="opacity: 1;"><line x2="-6" y2="0"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">450K</text></g><g class="tick" transform="translate(0,25)" style="opacity: 1;"><line x2="-6" y2="0"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">500K</text></g><path class="domain" d="M-6,0H0V300H-6" style="display: none;"></path></g><g class="g" transform="translate(8,0)"><rect width="34" y="134" height="166" class="bar-2"></rect><rect width="34" y="133" height="1" style="fill: rgb(95, 169, 243);"></rect><rect width="34" y="36" height="97" class="bar-1"></rect></g><g class="g" transform="translate(46,0)"><rect width="34" y="134" height="166" class="bar-2"></rect><rect width="34" y="133" height="1" style="fill: rgb(95, 169, 243);"></rect><rect width="34" y="33" height="100" class="bar-1"></rect></g><g class="g" transform="translate(84,0)"><rect width="34" y="133" height="167" class="bar-2"></rect><rect width="34" y="132" height="1" style="fill: rgb(95, 169, 243);"></rect><rect width="34" y="33" height="99" class="bar-1"></rect></g><g class="g" transform="translate(122,0)"><rect width="34" y="140" height="160" class="bar-2"></rect><rect width="34" y="139" height="1" style="fill: rgb(95, 169, 243);"></rect><rect width="34" y="39" height="100" class="bar-1"></rect></g><g class="g" transform="translate(160,0)"><rect width="34" y="138" height="162" class="bar-2"></rect><rect width="34" y="137" height="1" style="fill: rgb(95, 169, 243);"></rect><rect width="34" y="39" height="98" class="bar-1"></rect></g><g class="g" transform="translate(198,0)"><rect width="34" y="133" height="167" class="bar-2"></rect><rect width="34" y="132" height="1" style="fill: rgb(95, 169, 243);"></rect><rect width="34" y="29" height="103" class="bar-1"></rect></g><g class="g" transform="translate(236,0)"><rect width="34" y="136" height="164" class="bar-2"></rect><rect width="34" y="135" height="1" style="fill: rgb(95, 169, 243);"></rect><rect width="34" y="28" height="107" class="bar-1"></rect></g><g class="g" transform="translate(274,0)"><rect width="34" y="130" height="170" class="bar-2"></rect><rect width="34" y="130" height="0" style="fill: rgb(95, 169, 243);"></rect><rect width="34" y="25" height="105" class="bar-1"></rect></g><g class="g" transform="translate(312,0)"><rect width="34" y="120" height="180" class="bar-2"></rect><rect width="34" y="120" height="0" style="fill: rgb(95, 169, 243);"></rect><rect width="34" y="11" height="109" class="bar-1"></rect></g><g class="g" transform="translate(350,0)"><rect width="34" y="125" height="175" class="bar-2"></rect><rect width="34" y="125" height="0" style="fill: rgb(95, 169, 243);"></rect><rect width="34" y="13" height="112" class="bar-1"></rect></g><g class="g" transform="translate(388,0)"><rect width="34" y="132" height="168" class="bar-2"></rect><rect width="34" y="132" height="0" style="fill: rgb(95, 169, 243);"></rect><rect width="34" y="16" height="116" class="bar-1"></rect></g><g class="g" transform="translate(426,0)"><rect width="34" y="129" height="171" class="bar-2"></rect><rect width="34" y="129" height="0" style="fill: rgb(95, 169, 243);"></rect><rect width="34" y="7" height="122" class="bar-1"></rect></g><g class="g" transform="translate(464,0)"><rect width="34" y="127" height="173" class="bar-2"></rect><rect width="34" y="127" height="0" style="fill: rgb(95, 169, 243);"></rect><rect width="34" y="0" height="127" class="bar-1"></rect></g><g class="g" transform="translate(502,0)"><rect width="34" y="135" height="165" class="bar-2"></rect><rect width="34" y="135" height="0" style="fill: rgb(95, 169, 243);"></rect><rect width="34" y="9" height="126" class="bar-1"></rect></g><g class="g" transform="translate(540,0)"><rect width="34" y="148" height="152" class="bar-2"></rect><rect width="34" y="148" height="0" style="fill: rgb(95, 169, 243);"></rect><rect width="34" y="17" height="131" class="bar-1"></rect></g><g class="g" transform="translate(578,0)"><rect width="34" y="149" height="151" class="bar-2"></rect><rect width="34" y="149" height="0" style="fill: rgb(95, 169, 243);"></rect><rect width="34" y="16" height="133" class="bar-1"></rect></g></g></svg>
</div>