Child-Rearing Values

by Adam Nekola

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 500px; margin: 0 auto"></div>

JavaScript

$(function () {
    
    hoverColor = [
        'rgba(148,157,42,1)',
        'rgba(209,167,48,1)',
        'rgba(0,144,192,1)',
        'rgba(155,61,71,1)',
        'rgba(57,118,104,1)',
        'rgba(0,102,153,1)',
        'rgba(165,90,38,1)',
        'rgba(148,157,42,1)',
        'rgba(209,167,48,1)',
        ];
    hoverColorLighter = [
        'rgba(148,157,42,0.6)',
        'rgba(209,167,48,0.6)',
        'rgba(0,144,192,0.6)',
        'rgba(155,61,71,0.6)',
        'rgba(57,118,104,0.6)',
        'rgba(0,102,153,0.6)',
        'rgba(165,90,38,0.6)',
        'rgba(148,157,42,0.6)',
        'rgba(209,167,48,0.6)',
        ];
    
    $('#container').highcharts({
        title: {
            text: 'Child-Rearing Values',
            x: -20 //center
        },
        subtitle: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        colors: [
            'rgba(148,157,42,0.1)',
            'rgba(209,267,48,0.1)',
            'rgba(0,144,192,0.1)',
            'rgba(155,61,71,0.1)',
            'rgba(57,118,104,0.1)',
            'rgba(0,102,153,0.1)',
            'rgba(165,90,38,0.1)'
        ],
        plotOptions: {
            line: {
               stickyTracking: false,
			   marker: {
					states: {
						hover: {
							enabled: false
						}
					},	
					symbol: 'circle',
					radius: 2,
					lineWidth: 8,
                    lineColor: null,
					fillColor: '#fff'
				}
                
		   },
           series: {
               marker: {
					states: {
						hover: {
							enabled: false
						}
					},	
               },
               events: {
                    mouseOver: function() {    
                        i = this.index;
                        this.graph.attr('stroke', hoverColorLighter[i]);
                        $.each(this.points, function( index, value ) {
                            if (value.graphic){
                            value.graphic.attr('stroke', hoverColor[i]);
      ...