title: Chart.js different y axis depending on graph from select options
body: <p>I am trying to display different y axis based on the new set of json data that is passed through from the select options when they are clicked. </p>
  
  <p>This is my code:</p>
  
  <pre><code>var chartOptions = {
      scales: {
          xAxes: [{
              ticks: {
                  display: true,
                  autoSkip: true,
                  maxTicksLimit: 25
              }
          }],
          yAxes: [{
              ticks: {
                  beginAtZero: false,
                  // Return an empty string to draw the tick line but hide the tick label
                  // Return `null` or `undefined` to hide the tick line entirely
                  userCallback: function (value, index, values) {
  
  
                      if (KpiName === "sales_growth_ytd") 
                      {
                          return value + '%';
                      }
                      else {
  
                          value = value.toString();
                          value = value.split(/(?=(?:...)*$)/);
                          // console.log($scope.selects);
  
                          for(var i = 0; i &lt; $scope.selects.length; i++)
                          {
  
                                if($scope.selects[i].country_name === "Eire")
                              {
                                  console.log($scope.selects[i].country_name);
                                  return '€' + value;
                              }
                          }
  
                          for(var i = 0; i &lt; $scope.selects.length; i++)
                          {
  
                              if($scope.selects[i].country_name === "UK")
                              {
                                  console.log($scope.selects[i].country_name);
                                  return '£' + value;
                              }
                          }
                      }
                  }
              }
          }]
      },
      responsive: true,
      options: {
          legend: {
              labels: {
                  // This more specific font property overrides the global property
                  fontSize: 15,
                  fontStyle: 'bold',
              },
              animation: {
                  duration: 1 // general animation time
              },
              hover: {
                  animationDuration: 0 // duration of animations when hovering an item
              },
              responsiveAnimationDuration: 0, // animation duration after a resize
              elements: {
                  line: {
                      tension: 0 // disables bezier curves
                  }
              },
          }
      }
  };
  </code></pre>
  
  <p>Based on the country that is pulled through on the select options, i.e UK or EIRE, I would like to display the value with £ or € on the Y axis.</p>
  
  <p>How would i do this? </p>
  
  <p>Thank you</p>