How do I keep chart.js charts in one JS file, and not get errors when the ID from the JS file don't exist on one specific html page?

I'm quite new with JS, and have a problem with Chart.js and multiple charts.

• I load all libraries like jquery and chart.js from CDNs
• Then I have one plugins.js for localy loaded plugins
• And one js called main.js with all the custom JS.

I get this error:

Uncaught TypeError: Cannot read property 'style' of undefined

My question is:

How do I keep all my Chart.js data in one .js file, that get loaded on all website pages, but not all pages contains all charts.

Appreciate any other pointers also. :)

-

About the code

I've posted the code below and also created a JSFiddle: http://ift.tt/2ijsbXO

In the main.js I have all my Chart.js data like so (among other things):

// *************************************
// Chart.js
// *************************************

// Global Settings
Chart.defaults.global.defaultFontColor = "rgba(43,43,43,1)";
Chart.defaults.global.defaultFontFamily = "'ApexNew-Medium', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
Chart.defaults.global.defaultFontSize = 12;
Chart.defaults.global.defaultFontStyle = "normal";
Chart.defaults.global.maintainAspectRatio = false;
// Disable click on legend
Chart.defaults.global.legend.onClick = (e) => e.stopPropagation();

// Bar Charts settings
var barChart__options = {
};

// Doughnut settings
var dnutChart__options = {
  legend: {
    position: "bottom",
    // Disable click on legend
    onClick: (e) => e.stopPropagation()
  }
};

// *************************************
// Datasets
// *************************************

// Bar Chart X
var barChartX__data = {
  labels: ["Alpha", "Bravo", "Charlie"],
  datasets: [
    {
        label: "2015",
        borderWidth: 0,
        backgroundColor: "rgba(43,43,43,1)",
        data: [410,430,110]
    },
    {
        label: "2016",
        borderWidth: 0,
        backgroundColor: "rgba(233,131,0,1.0)",
        data: [405,360,150]
    }
  ]
};

const barChartX = $("#barChartX");
let ChartX = new Chart(barChartX, {
  type: "bar",
  data: barChartX__data,
  options: barChart__options
});

// Doughnut Chart Y
var dnutChartY__data = {
  labels: ["Alpha", "Bravo"],
  datasets: [
    {
      label: "Points",
      borderWidth: 0,
      backgroundColor: ["rgba(43,43,43,1)", "rgba(233,131,0,1.0)"],
      data: [90,270]
    }
  ]
};

const dnutChartY = $("#dnutChartY");
let ChartY = new Chart(dnutChartY, {
  type: "doughnut",
  data: dnutChartY__data,
  options: dnutChart__options
});



// Doughnut Chart Z
var dnutChartZ__data = {
  labels: ["Alpha", "Bravo", "Charlie"],
  datasets: [
    {
      label: "Points",
      borderWidth: 0,
      backgroundColor: ["rgba(233,131,0,1.0)","rgba(239,162,64,1.0)","rgba(244,193,127,1.0)"],
      data: [405,360,150]
    }
  ]
};

const dnutChartZ = $("#dnutChartZ");
let ChartZ = new Chart(dnutChartZ, {
  type: "doughnut",
  data: dnutChartZ__data,
  options: dnutChart__options
});

And my HTML like so:

<div class="example__chart">
  <div>
    <canvas id="barChartX" height="400" width="400"></canvas>
  </div>
<!--  
  <div>
    <canvas id="dnutChartY" height="400" width="400"></canvas>
  </div> 
-->
  <div>
    <canvas id="dnutChartZ" height="400" width="400"></canvas>
  </div>
</div>

As you can see I have commented out a part to trigger the error.