Projected Performance

by artoodetoo

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.2.3/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.1.5/bootstrap-slider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.1.5/css/bootstrap-slider.min.css">
<div id="container">
  <div id="perf-chart"></div>
  <div id="slider"></div>
</div>

CSS

#container { 
  position: relative; 
  width: 100%; 
  max-width: 700px; 
  margin: 0 auto; 
}
#perf-chart { min-height: 300px; }
#slider-control { 
  display: block; 
  width: auto; 
  margin-left: 18px; 
  margin-right: 60px; 
  margin-top: -20px; 
}
#slider-control .slider-tick-label-container {
  float: left;
  clear: both;
}
#slider-control .slider-selection,
#slider-control .slider-track-high { opacity: 0; }
#slider-control .slider-track,
#slider-control .slider-tick {
	background: #eee;
  opacity: 1;
}
#slider-control .slider-handle {
	background: #AAA;
}

JavaScript

$(function(){

var projectedChart = new Highcharts.Chart({
    credits: {
        enabled: false
    },
    chart: {
        renderTo: 'perf-chart',
        type: 'column'
    },
    colors: [{
        linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
        stops: [
            [0, 'rgba(23, 146, 23, 0.1)'],
            [1, 'rgba(23, 146, 23, 0.6)']
            ]
        }, 
        {
        linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
        stops: [
            [0, 'rgba(23, 146, 23, 0.6)'],
            [1, 'rgba(23, 146, 23, 0.1)']
            ]
        },
        {
        linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
        stops: [
            [0, 'rgba(146, 146, 146, 0.3)'],
            [1, 'rgba(246, 246, 246, 0.1)']
            ]
        }
    ],
    title: { text: '' },
    yAxis: {
        min: -100,
        max: 400,
        title: { enabled: false },
        opposite: true
    },
    xAxis: {
        labels: {
            enabled: false,
/*          step: 6,
            formatter: function () {
                return (this.value / 6);
            } */
        },
        tickLength: 0,
        gridLineWidth: 0,
        tickInterval: 4,
        minorTickInterval: 4,
        plotLines: [{
                color: '#BBB',
            width: 5,
            value: 60
        }]
    },
    legend: {
        enabled: false
    },
    tooltip: {
        shared: true,
        useHTML: true,
        borderWidth: 0
    },

    plotOptions: {
        series: {
            pointPadding: 0,
            groupPadding: 0,
            animation: false
        },
        column: {
            stacking: 'normal',
            grouping: false,
            shadow: false,
            borderWidth: 0,
            states: { hover: { enabled: false} }
        }
    },
    series: [
        {
            name: 'Index Funds Over Mutual Funds',
            enableMouseTracking: false,
            data: []
        },
        {
            name: 'Tax-Loss Harvesting',
          ...