Child-Rearing Values - Scatter

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: 400px; margin: 0 auto"></div>

CSS

.r1{color:rgba(148,157,42,1);}
.r2{color:rgba(209,167,48,1);}
.r3{color:rgba(155,61,71,1);}
.r4{color:rgba(0,144,192,1);}
.r5{color:rgba(57,118,104,1);}

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.1)',
        'rgba(209,167,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)',
        'rgba(148,157,42,0.1)',
        'rgba(209,167,48,0.1)',
        ];
    
    $('#container').highcharts({
        chart: {
            type: 'scatter'  
        },
        title: {
            text: 'Child-Rearing Values',
            x: -20 //center
        },
        subtitle: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        colors: [
            '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)'
        ],
        plotOptions: {
            scatter: {
               stickyTracking: false,
			   marker: {
					states: {
						hover: {
							enabled: false
						}
					},	
					symbol: 'circle',
					radius: 5,
					lineWidth: 12,
                    lineColor: null,
					fillColor: null
				}
                
		   },
           series: {
               marker: {
					states: {
						hover: {
							enabled: false
						}
					},	
               },
               dataLabels: {
                   enabled: true,
                   color: 'white',
                   y: 7,
                   /*x: -1*/
               },
               events: {
                    mouseOver: function() {    
                        i =...