JSFiddle - React, Tailwind, and code Playground

by typpo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="chart" width="1200" height="400"></canvas>

JavaScript

const ctx = document.getElementById('chart').getContext('2d');

new Chart(ctx, {
  type: 'line',
  data: {
    labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
    datasets: [{
      label: '# of votes',
      data: [12, 19, 3, 5, 2, 3, 10, 9, 15],
      borderWidth: 1,
      pointStyle: 'triangle',
      pointBorderColor: 'rgb(255, 0, 0)',
    }]
  },
  options: {
    elements: {
      point: {
        radius: (context) => {
          const index = context.dataIndex;
          const value = context.dataset.data[index];
          return value > 5 ? 5 : 2;
        }
      }
    }
  }
})