Multiple Charts in a page with same chart options - CanvasJS JavaScript Charts

Multiple Charts in a page with same chart options - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer1" style="height: 360px; width: 100%;"></div>
<br/><br/>
<div id="chartContainer2" style="height: 360px; width: 100%;"></div>

JavaScript

CanvasJS.addColorSet("blackline",["#000000"]);

var chart1 = new CanvasJS.Chart("chartContainer1",{
    colorSet: "blackline",
    theme: "theme1",
    animationEnabled: true,
    axisX: {
        valueFormatString: "MMM-YYYY",
        interval: 1,
        intervalType: "month",
        lineColor: "#000",
        labelFontSize: 13,
        labelFontColor: "#000",
        lineThickness: 1,
        gridColor: "#e4e4e4",
        gridThickness: "1"

    },
    axisY: {
        labelFormatter: function(e) {
            return "Rs." + CanvasJS.formatNumber(e.value, "#,#00");
        },
        lineColor: "#9d9d9d",
        lineThickness: 2,
        labelFontSize: 13,
        labelFontColor: "#000",
        gridColor: "#e4e4e4",
        gridThickness: "1",
        interval: 5000,
        viewportMinimum: 15000,
        viewportMaximum: 45000,
        includeZero: false

    },
    toolTip: {
        borderColor: "#000",
        fontStyle: "normal",
        borderThickness: 1,
        cornerRadius: 0
    },
    data: [{
            type: "line",
            toolTipContent: "In {x},<br/>Product price was <span style=’\"‘color: #ec5a5a;’\"‘>Rs.{y}</span>",
            lineThickness: 1,
            markerSize: 8,
            markerColor: "#ec5a5a",
            dataPoints: [
              { x: new Date(2015, 03, 1), y: 38000 },
              { x: new Date(2015, 04, 1), y: 36000 },
              { x: new Date(2015, 05, 1), y: 33000 },
              { x: new Date(2015, 06, 1), y: 32000 },
              { x: new Date(2015, 07, 1), y: 32000 },
              { x: new Date(2015, 08, 1), y: 30000 },
              { x: new Date(2015, 09, 1), y: 29000 },
              { x: new Date(2015, 10, 1), y: 25000 },
              { x: new Date(2015, 11, 1), y: 25500 },
              { x: new Date(2016, 00, 1), y: 29000 },
              { x: new Date(2016, 01, 1), y: 33000 },
              { x: new Date(2016, 02, 1), y: 32000 },
              { x: new Date(2016, 03, 1), y: 27000 }
           ...