Facebook
From GPT, 2 Months ago, written in JavaScript.
Embed
Download Paste or View Raw
Hits: 186
  1. <html>
  2. [removed][removed]
  3. <body>
  4.  
  5. <canvas id="myChart" ></canvas>
  6.  
  7. [removed]
  8. const xValues = ["2024-2030", "2030-2035", "2035-2040", "2040-2050"];
  9. const yValues = [1, 2, 3, 4];
  10. const barColors = ["#C0392C", "#C0392C","#C0392C","#C0392C"];
  11.  
  12. new Chart("myChart", {
  13.   type: "bar",
  14.   data: {
  15.     labels: xValues,
  16.     datasets: [{
  17.       backgroundColor: barColors,
  18.       data: yValues
  19.     }]
  20.   },
  21.   options: {
  22.     legend: {display: false},
  23.     title: {
  24.       display: true,
  25.       text: "Annual Penalties for 68-15 Selfridge Street"
  26.     },
  27.     scales: {
  28.       yAxes: [{
  29.         ticks: {
  30.           beginAtZero: true,
  31.           callback: function(value, index, values) {
  32.             return '$' + value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
  33.           }
  34.         }
  35.       }]
  36.     },
  37.     tooltips: {
  38.       enabled: false
  39.     },
  40.     animation: {
  41.       duration: 1,
  42.       onComplete: function () {
  43.         var chartInstance = this.chart,
  44.         ctx = chartInstance.ctx;
  45.         ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'bold', Chart.defaults.global.defaultFontFamily);
  46.         ctx.textAlign = 'center';
  47.         ctx.textBaseline = 'bottom';
  48.         ctx.fillStyle = 'red'; // Set the text color to red
  49.  
  50.         this.data.datasets.forEach(function (dataset, i) {
  51.           var meta = chartInstance.controller.getDatasetMeta(i);
  52.           meta.data.forEach(function (bar, index) {
  53.             var data = dataset.data[index];
  54.             ctx.fillText('$' + data.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'), bar._model.x, bar._model.y - 5);
  55.           });
  56.         });
  57.       }
  58.     }
  59.   }
  60. });
  61. [removed]
  62.  
  63. &lt;/body&gt;
  64. &lt;/html&gt;
  65.