Highcharts Demo Real Data

by Steve Cervenak

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="width:668px"></div>

JavaScript

var gridLineColor = '#acacac';
var axisTextColor = '#acacac';
var legendTextColor = 'black';
var axisTextSize = '12px';
var columnColor1 = '#003781';
var columnColor2 = '#C2CFE1';
var columnColor3 = '#4c73a7';

Highcharts.chart('container', {
    chart: {
        type: 'column',
        height: '338',
        //width: '668',
        style: {
        	fontFamily: "'Allianz Sans',Helvetica,'Arial Narrow', Arial, sans-serif",
          fontSize: "6px" 
        }
    },
    plotOptions: {
        series: {
					pointWidth: 31,
//				pointPlacement: 'between',
					pointPadding: 0,
          borderWidth: 0,
					crisp: true
        }
    },
	legend: {
  	align: 'left',
    verticalAlign: 'bottom',
    layout: 'horizontal',
    symbolRadius: 0,
    squareSymbol: false,
    symbolWidth: 31,
    itemDistance: 31,
    itemStyle: {
    	color: legendTextColor,
      fontSize: "12px"
    }
  },
	title: {
  	text: ''
  },
  credits: {
  	enabled: false
  },
  yAxis: {
    title: '',
    labels: {
      format: '{value:.1f} %',
      style: {
        color: axisTextColor,
        fontSize: axisTextSize
      }
    }
  },
	xAxis: {
		categories: ['1YR', '3YR', '5YR', '10YR', 'Since<br/>Inception'],
    lineColor: gridLineColor,
    tickColor: gridLineColor,
    //startOnTick: true,
    tickmarkPlacement: 'on',
    labels: {
      align: 'left',
      x: -4,
      y: 25,
      style: {
        color: axisTextColor, 
        fontSize: axisTextSize
      }
    }
  },
  series: [
    {
      data: [24.9, 6.5, 10.4, 4.2, 8.0],
      name: 'AllianzGI NFJ Dividend Value Fund P (ADJPX)',
      color: columnColor1
    },
    {
      data: [28.9, 9.5, 14.4, 6.2, 7.0],
      name: 'Russell 1000 Value Index',
      //showInLegend: false,
      //visible: false,
      color: columnColor2
    }]
});