Thanks to the team at for this post on High Charts. The uAutoInsurance team analyzes car insurance rates with data at the micro local, demographic & vehicle level to give consumers & the industry insight into key factors driving auto insurance rates.

What are HighCharts?

HighCharts is an open-source js library that allows you to visually represent your data in a more user-readable and interactive fashion for your website or blog. Once you have HighCharts installed in your server, creating different types of graphs is a fairly simple task. The following tutorial should get you started on making these charts quickly.

Understanding Charts:

To get to grasp with how Highcharts works it is important to understand the various parts or concepts of a chart.

Below is an image and a description of the main concepts in a chart:



Highcharts support a range of different chart types so data can be displayed in a meaningful way. Highcharts supports line, spline, area, areaspline, column, bar, pie, scatter, gauge, arearange, areasplinerange and columnrange chart types.

To set a default chart type use:

chart: {    type: ‘line’}

Several chart types can also be combined in one chart using the type attribute in series to set different chart types for each series:

series: [{    type: ‘line’
data: []
},{    type: ‘column’    data: []}]

We have given three example charts using HighChart with Car Insurance Data from


The line chart is represented by a series of data points connected with a straight line. Line charts are most often used to visualize data that changes over time.

Here is a line chart of Car insurance rates for the Top 10 cities in the US. For example, Los Angeles Car Insurance rates are $2076, followed by 9 cities.




Import .js files highcharts.js and exporting.js as

<script src=””></script>

<script src=””></script>

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

$(function () {


       title: { text: ‘Average Auto Insurance Rates’,  x: -20 //center  },

       subtitle: {text: ‘Source:’, x: -20 },

       xAxis: {  categories: [‘Los Angeles’, ‘Houston’, ‘Phoenix’, ‘Chicago’, ‘Brooklyn’, ‘San Diego’, ‘Las Vegas’,

               ‘San Jose’, ‘Philadelphia’, ‘San Antonio’]  },

       yAxis: { title: { text: ‘Rates ($)’  },

       plotLines: [{ value: 0,  width: 1, color: ‘#808080’ }] },

       tooltip: {valueSuffix: ‘$’  },

       legend: {   layout: ‘vertical’,align: ‘right’,  verticalAlign: ‘middle’,  borderWidth: 0 },

       series: [{ name: ‘Auto Insurance Rate’,  data: [2076, 2076, 1234, 1099, 4133, 1330, 1869, 1377, 2276, 1375]        }]    });



A column chart displays data as vertical bars.The bar chart is exactly the same as a column chart, but with one difference- the x-axis and y-axis are interchanged.

Here is a bar chart for the insurance rates in Los Angeles City by Segment:



A pie chart is a circular chart divided into segments which is proportional to the quantity it represents.

Here is a Pie chart which represents all insurance companies market share in  US for the year 2012:


The pie chart would have the same options as a series.


$(function () {


chart: {

plotBackgroundColor: null,

plotBorderWidth: null,

plotShadow: false


title: {

text: ‘US Market Share Breakdown (2012)’


tooltip: {

pointFormat: ‘{}: <b>{point.percentage:.1f}%</b>’


plotOptions: {

pie: {

allowPointSelect: true,

cursor: ‘pointer’,

dataLabels: {

enabled: true,

format: ‘<b>{}</b>: {point.percentage:.1f} %’,

style: {

color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || ‘black’





series: [{

type: ‘pie’,

name: ‘Market share’,

data: [

[‘others’,   45.0],

[‘StateFarm’,  18],


name: ‘All State’,

y: 10,

sliced: true,

selected: true


[‘Progressive’,    8.5],

[‘GEICO’,     10],

[‘NationWide’,   4],

[‘Liberty Mutual’, 5]







The HighCharts library is available for free (for non-commercial purposes only), and is an easy-to-use tool for data representation, as well as making your web space more aesthetically appealing. It is available both in the JavaScript Frameworks and has Browser Versions.

Image attached: credit Image by iosphere

Related Articles:

Data Visualization in Analytics

5 Popular Tools for Data Visualization

Using Google Fusion Tables Maps: Home Insurance Case Study

Interested in learning about other Analytics and Big Data tools and techniques? Click on our course links and explore more.
Jigsaw’s Data Science with SAS Course – click here.
Jigsaw’s Data Science with R Course – click here.
Jigsaw’s Big Data Course – click here.


Are you ready to build your own career?