How can I ensure that my charts diagram load every time I choose it from my dropdown?

Question

Hey guys I have built a dropdown menu that allows me to choose from different roles. Every time I choose a role my line chart loads. When I choose another option it loads again. However, when I choose the option that I have decided for again it does not load again. So it just loads once and then not anymore. Do you have an idea of how I can solve it?

<select name="job-role" id="job-role" onchange="updateChartType()">
  <option value="" disabled selected hidden>Select a Job Role</option>
  <option value="backend">Backend Engineer</option>
  <option value="frontend">Frontend Engineer</option>
  <option value="mobile">Mobile Engineer</option>
  <option value="full">Full-stack Engineer</option>
  <option value="devops">DevOps & Infrastructure </option>
  <option value="security">Security Engineer</option>
  <option value="dataan">Data Analysis & BI</option>
  <option value="dataen">Data Engineer</option>
  <option value="datasci">Data Scientist</option>

</select>

<canvas id="jobChart"></canvas>



const ctx = document.getElementById('jobChart').getContext('2d')
const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9+"],
    datasets: []
  },
});

const jobDatasets = {
  
  
  backend: [{
    label: "25th Percentile",
    backgroundColor: '#c4c1ff',
    pointBackgroundColor: "645bff",
    borderColor: '#645bff',
    fill:false,
    pointRadius: 0,
    borderWidth:1,
    pointBorderWidth: 3,
    pointHoverRadius:3,
    lineTension: 0.3,
    pointHitRadius:3,
    data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
  }, {
    label: "10th - 90th Percentile",
    fill:false,
    borderColor: "#645bff",
    backgroundColor: "#645bff",
        pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    borderWidth: 1,
    lineTension: 0.3,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
  }, 
  {
    label: "Median",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#0d0e25",
        borderWidth: 1,
    pointRadius: 2,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    lineTension: 0.3,
    pointHitRadius: 3,
    data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
  },
  
  {
    label: "25th - 75th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#645bff",
    pointRadius: 0,
    lineTension: 0.1,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    lineTension:0.3,
    borderJoinStyle: 'miter',
    data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
  },
  
  {
    label: "10th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    pointStyle: "circle",
    borderWidth: 1,
    lineWidth: 1,
    hoverRadius: 9,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    lineTension: 0.3,
    data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
  }] , 
  


  frontend: 
  [{ label: "25th Percentile",
    backgroundColor: '#c4c1ff',
    pointBackgroundColor: "645bff",
    borderColor: '#645bff',
    fill:false,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius:3,
    pointHitRadius:3,
    data: [40, 36, 38, 46, 50, 54, 63, 65, 71, 77]
  }, {
    label: "10th - 90th Percentile",
    fill:false,
    borderColor: "#645bff",
    backgroundColor: "#645bff",
        pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    borderWidth: 1,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
  }, 
  {
    label: "Median",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#0d0e25",
        borderWidth: 1,
    pointRadius: 2,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
  },
  
  {
    label: "25th - 75th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#645bff",
    pointRadius: 0,
    lineTension: 0.1,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
  },
  
  {
    label: "10th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    pointStyle: "circle",
    borderWidth: 1,
    lineWidth: 1,
    hoverRadius: 9,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    lineTension: 0.3,
    data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
  }] , 
  
  

   
  mobile: 
  [{ label: "25th Percentile",
    backgroundColor: '#c4c1ff',
    pointBackgroundColor: "645bff",
    borderColor: '#645bff',
    fill:false,
    pointRadius: 0,
    borderWidth:1,
    pointBorderWidth: 3,
    pointHoverRadius:3,
    pointHitRadius:3,
    data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
  }, {
    label: "10th - 90th Percentile",
    fill:false,
    borderColor: "#645bff",
    backgroundColor: "#645bff",
        pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    borderWidth: 1,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
  }, 
  {
    label: "Median",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#0d0e25",
        borderWidth: 1,
    pointRadius: 2,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
  },
  
  {
    label: "25th - 75th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#645bff",
    pointRadius: 0,
    lineTension: 0.1,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
  },
  
  {
    label: "10th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    pointStyle: "circle",
    borderWidth: 1,
    lineWidth: 1,
    hoverRadius: 9,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    lineTension: 0.3,
    data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
  }],
  
  
   
   
   
   
  full: 
  [{ label: "25th Percentile",
    backgroundColor: '#c4c1ff',
    pointBackgroundColor: "645bff",
    borderColor: '#645bff',
    fill:false,
    pointRadius: 0,
    borderWidth:1,
    pointBorderWidth: 3,
    pointHoverRadius:3,
    pointHitRadius:3,
    data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
  }, {
    label: "10th - 90th Percentile",
    fill:false,
    borderColor: "#645bff",
    backgroundColor: "#645bff",
        pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    borderWidth: 1,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
  }, 
  {
    label: "Median",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#0d0e25",
        borderWidth: 1,
    pointRadius: 2,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
  },
  
  {
    label: "25th - 75th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#645bff",
    pointRadius: 0,
    lineTension: 0.1,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
  },
  
  {
    label: "10th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    pointStyle: "circle",
    borderWidth: 1,
    lineWidth: 1,
    hoverRadius: 9,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    lineTension: 0.3,
    data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
  }],
  
    
    
    
    
    
  devops: 
  [{ label: "25th Percentile",
    backgroundColor: '#c4c1ff',
    pointBackgroundColor: "645bff",
    borderColor: '#645bff',
    fill:false,
    pointRadius: 0,
    borderWidth:1,
    pointBorderWidth: 3,
    pointHoverRadius:3,
    pointHitRadius:3,
    data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
  }, {
    label: "10th - 90th Percentile",
    fill:false,
    borderColor: "#645bff",
    backgroundColor: "#645bff",
        pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    borderWidth: 1,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
  }, 
  {
    label: "Median",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#0d0e25",
        borderWidth: 1,
    pointRadius: 2,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
  },
  
  {
    label: "25th - 75th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#645bff",
    pointRadius: 0,
    lineTension: 0.1,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
  },
  
  {
    label: "10th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    pointStyle: "circle",
    borderWidth: 1,
    lineWidth: 1,
    hoverRadius: 9,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    lineTension: 0.3,
    data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
  }],
  
  
  
  
  security: 
  [{ label: "25th Percentile",
    backgroundColor: '#c4c1ff',
    pointBackgroundColor: "645bff",
    borderColor: '#645bff',
    fill:false,
    pointRadius: 0,
    borderWidth:1,
    pointBorderWidth: 3,
    pointHoverRadius:3,
    pointHitRadius:3,
    data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
  }, {
    label: "10th - 90th Percentile",
    fill:false,
    borderColor: "#645bff",
    backgroundColor: "#645bff",
        pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    borderWidth: 1,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
  }, 
  {
    label: "Median",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#0d0e25",
        borderWidth: 1,
    pointRadius: 2,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
  },
  
  {
    label: "25th - 75th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#645bff",
    pointRadius: 0,
    lineTension: 0.1,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
  },
  
  {
    label: "10th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    pointStyle: "circle",
    borderWidth: 1,
    lineWidth: 1,
    hoverRadius: 9,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    lineTension: 0.3,
    data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
  }],
  
  
  
  
  
  
  
  dataan: 
  [{ label: "25th Percentile",
    backgroundColor: '#c4c1ff',
    pointBackgroundColor: "645bff",
    borderColor: '#645bff',
    fill:false,
    pointRadius: 0,
    borderWidth:1,
    pointBorderWidth: 3,
    pointHoverRadius:3,
    pointHitRadius:3,
    data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
  }, {
    label: "10th - 90th Percentile",
    fill:false,
    borderColor: "#645bff",
    backgroundColor: "#645bff",
        pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    borderWidth: 1,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
  }, 
  {
    label: "Median",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#0d0e25",
        borderWidth: 1,
    pointRadius: 2,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
  },
  
  {
    label: "25th - 75th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#645bff",
    pointRadius: 0,
    lineTension: 0.1,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
  },
  
  {
    label: "10th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    pointStyle: "circle",
    borderWidth: 1,
    lineWidth: 1,
    hoverRadius: 9,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    lineTension: 0.3,
    data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
  }],
  
  
  
  
  
  dataen: 
  [{ label: "25th Percentile",
    backgroundColor: '#c4c1ff',
    pointBackgroundColor: "645bff",
    borderColor: '#645bff',
    fill:false,
    pointRadius: 0,
    borderWidth:1,
    pointBorderWidth: 3,
    pointHoverRadius:3,
    pointHitRadius:3,
    data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
  }, {
    label: "10th - 90th Percentile",
    fill:false,
    borderColor: "#645bff",
    backgroundColor: "#645bff",
        pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    borderWidth: 1,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
  }, 
  {
    label: "Median",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#0d0e25",
        borderWidth: 1,
    pointRadius: 2,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
  },
  
  {
    label: "25th - 75th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#645bff",
    pointRadius: 0,
    lineTension: 0.1,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
  },
  
  {
    label: "10th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    pointStyle: "circle",
    borderWidth: 1,
    lineWidth: 1,
    hoverRadius: 9,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    lineTension: 0.3,
    data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
  }],
  
  
  
  
  
  
  datasci: 
  [{ label: "25th Percentile",
    backgroundColor: '#c4c1ff',
    pointBackgroundColor: "645bff",
    borderColor: '#645bff',
    fill:false,
    pointRadius: 0,
    borderWidth:1,
    pointBorderWidth: 3,
    pointHoverRadius:3,
    pointHitRadius:3,
    data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
  }, {
    label: "10th - 90th Percentile",
    fill:false,
    borderColor: "#645bff",
    backgroundColor: "#645bff",
        pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    borderWidth: 1,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
  }, 
  {
    label: "Median",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#0d0e25",
        borderWidth: 1,
    pointRadius: 2,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
  },
  
  {
    label: "25th - 75th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#645bff",
    pointRadius: 0,
    lineTension: 0.1,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
  },
  
  {
    label: "10th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    pointStyle: "circle",
    borderWidth: 1,
    lineWidth: 1,
    hoverRadius: 9,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    lineTension: 0.3,
    data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
  }],
  
  
 
 }
  

document.getElementById('job-role').addEventListener('change', function() {
  chart.data.datasets = jobDatasets[this.value]
  chart.update()
});

Answer 1

HTML Code:

<div id="chartContainer">
  <canvas id="jobChart"></canvas>
</div>

JS CODE:

document.getElementById('job-role').addEventListener('change', function() {
   $('#jobChart').remove();
   $('#chartContainer').append('<canvas id="jobChart"><canvas>');
   
   //Here you need to call generate the graph again then add the values to dataset.   

   chart.data.datasets = jobDatasets[this.value]
   chart.update()
});