Highcharts - Global configuration with common code and unique data & Headings
<p>I am using Highcharts.</p>

<p>In single page, I have multiple <code>Area</code> charts with different data &amp; titles and with same chart property configurations.</p>

<blockquote>
  <p><strong><a href="http://jsfiddle.net/0s2pkps0/1/" rel="nofollow">Online Demo</a></strong></p>
</blockquote>

<p><strong>Changes from Chart 1 to Chart 2, Chart 3</strong> as below:</p>

<ul>
<li>Series Names</li>
<li>Series Data</li>
<li>Legend</li>
<li>Tooltip data</li>
</ul>

<p>Other than above, everything else is same...</p>

<p>How can I avoid writing repetitve code for <code>#chart-1, #chart-2, #chart-3</code> etc... and configure only above elements ?</p>

<p><strong>HTML</strong>:</p>

<pre><code>&lt;div id="chart-1" style="height: 200px; width: 500px"&gt;&lt;/div&gt;
&lt;div id="chart-2" style="height: 200px; width: 500px"&gt;&lt;/div&gt;
&lt;div id="chart-3" style="height: 200px; width: 500px"&gt;&lt;/div&gt;
</code></pre>

<p><strong>Global initialization</strong>:</p>

<pre><code>jQuery(function () {

    Highcharts.setOptions({
        colors: ['#fe5758', '#99cc03', '#33b5e6'],
        chart: {
            style: {
                fontFamily: 'Roboto Light',
                fontWeight: 'normal',
                fontSize: '12px',
                color: '#585858',
            }
        },      
        title: { text: null },
        subtitle: { text:null },
        credits: { enabled: false },
        exporting: { enabled: false },
......
</code></pre>

<p><strong>Chart 1</strong>:</p>

<pre><code>$(function () {
    $('#chart-1').highcharts({
        chart: {
          type: 'area'
        },
        xAxis: {
            ....
</code></pre>

<p><strong>Chart 2</strong>:</p>

<pre><code>$(function () {
    $('#chart-2').highcharts({
        chart: {
          type: 'area'
        },
        xAxis: {
            ....
</code></pre>