Scatter with jitter

Discrete ratings jittered so overlapping points stay visible.

Chart type
Scatter scatter
Tier
Free Core
Collection
Scatter
Render
Live, site theme
View .md Agent setup
LIVE/scatter/scatter-with-jitter4 of 5 in Scatter

Configuration

Raw Standalone
const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "scatter",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "iOS",
      data: [
        [3.79, 38.7],
        [2.16, 20.4],
        [4.88, 43.9],
        [2.15, 24.1],
        [4.07, 41.2],
        [5.06, 38.6],
        [2.95, 32.4],
        [4.09, 42],
        [0.79, 0.6],
        [0.93, 9.7],
        [2.1, 16.6],
        [3.12, 18.7],
        [0.85, 24.1],
        [2.13, 12.5],
        [5.19, 32.5],
        [2.9, 19.9],
        [0.94, 0],
        [1.86, 13.7],
        [1.92, 17.6],
        [2.18, 13.6],
        [4.07, 36.1],
        [4.91, 39.6],
        [3.85, 37.8],
        [1.13, 6.6],
        [0.89, 10.5],
        [3.93, 36.2],
        [2.05, 20.2],
        [0.84, 17.5],
        [1.86, 21.3],
        [2, 15],
        [2.79, 23.1],
        [2.18, 21.8],
        [2.79, 37.1],
        [5.07, 44.7],
        [4.1, 42],
        [1.95, 15.1],
        [1.07, 2.8],
        [5.12, 58.8],
        [5.17, 36.5],
        [3.91, 21],
        [2.24, 9.2],
        [4.79, 55.6],
        [2.05, 6],
        [2.17, 8.8],
        [2.88, 15.2],
        [1.05, 11.4],
        [1.79, 17],
        [0.85, 10.8],
        [5.02, 37.1],
        [2.04, 19.9],
        [2.78, 21.8],
        [5.08, 55.6],
        [1.91, 28.9],
        [1.16, 8.4],
        [5.16, 45.3],
        [0.9, 13.1],
        [2.17, 11.6],
        [0.96, 19.3],
        [3.1, 32.9],
        [1.25, 4.2],
        [0.91, 2.7],
        [1.02, 20.2],
        [1.77, 8.6],
        [5.02, 52.8],
        [1.9, 28],
        [4.24, 30.8],
        [2.17, 13],
        [3.96, 35.1],
        [1.25, 2.9],
        [3.12, 26.4],
        [2.11, 23.3],
        [4.07, 28.8],
        [2.1, 21.6],
        [4.79, 32],
        [5.2, 45.1],
        [1.82, 17.5],
        [3.76, 35.6],
        [4.82, 51.3],
        [4.2, 36.1],
        [3.21, 35.6],
        [2.77, 30],
        [3.87, 34.9],
        [3.1, 32.9],
        [4.91, 48.7],
        [1.93, 18.4],
        [4.07, 28.5],
        [5.19, 40.8],
        [2.83, 25.2],
        [4.94, 54.6],
        [1.07, 5.4],
        [5.02, 42.7],
        [3.15, 26.4],
        [3.19, 34.4],
        [1.83, 26],
        [1.82, 6.6],
        [0.78, 18.1],
        [2.99, 15.9],
        [1.93, 3],
        [4.1, 47.8],
        [4.94, 56.3],
        [3.92, 38.1],
        [1.19, 10.7],
        [4.1, 29.4],
        [2.87, 6.5],
        [1.13, 14.5],
        [2.07, 15],
        [2.11, 17.1],
        [1.17, 26.1],
        [1.92, 9],
        [1.17, 0],
        [4.75, 46.8],
        [3.78, 29.5],
        [2.13, 21.8],
        [4.75, 46.6],
        [4.22, 44.4],
        [1.18, 0.1],
        [0.99, 8.1],
        [3.1, 33.8],
        [1.88, 21.2],
        [4.75, 40.2]
      ]
    },
    {
      name: "Android",
      data: [
        [3.05, 30.4],
        [0.85, 21.3],
        [2.17, 6.9],
        [2.98, 19],
        [1.16, 0],
        [0.96, 9.8],
        [2.85, 33.9],
        [4.85, 48.8],
        [5.18, 47.4],
        [1.24, 0],
        [5.23, 56.9],
        [4.16, 26.4],
        [0.81, 12.5],
        [5.04, 54.3],
        [4.02, 45.7],
        [2.21, 16.7],
        [3.13, 22.8],
        [4.87, 50.3],
        [4.08, 54.5],
        [3.92, 38.9],
        [3.95, 41.9],
        [3.92, 43.9],
        [0.9, 9.4],
        [1.24, 9],
        [3.03, 28.3],
        [4.15, 51.7],
        [3.77, 58.8],
        [4.9, 51.3],
        [3.94, 34.1],
        [2.04, 27.3],
        [1.87, 34.6],
        [0.99, 0],
        [4.21, 42.1],
        [3.97, 47.7],
        [0.95, 19],
        [5.09, 55.2],
        [1.06, 0],
        [1.78, 13],
        [0.78, 26.6],
        [2.75, 19.7],
        [3.08, 46.1],
        [4.85, 49.8],
        [0.77, 12.3],
        [4.93, 42.6],
        [3.84, 52.4],
        [1.87, 27.9],
        [3.24, 35.1],
        [4.86, 46.2],
        [5.24, 44.5],
        [2.75, 16.3],
        [4.22, 44.9],
        [2.85, 47.6],
        [1.2, 19.8],
        [4.88, 61.4],
        [1.13, 6.5],
        [4.09, 38.8],
        [2.88, 34.5],
        [4.08, 61.6],
        [1.9, 27.4],
        [4.14, 49.1],
        [5.09, 46],
        [0.77, 14.1],
        [4.89, 65.5],
        [4.79, 41.4],
        [5.22, 54.8],
        [5.15, 61.3],
        [0.99, 20.3],
        [3.23, 26.1],
        [3.78, 47.6],
        [2.79, 43.6],
        [4.16, 42.2],
        [3.98, 33.2],
        [2.96, 37.6],
        [0.79, 4.5],
        [1.88, 23],
        [2.24, 18.9],
        [3.12, 31.4],
        [1.14, 9.8],
        [1.94, 24.1],
        [0.93, 8.5],
        [3.03, 30.1],
        [3.84, 40.9],
        [4.95, 50.3],
        [4.22, 50.5],
        [0.79, 22],
        [2.19, 35.9],
        [5.04, 49.4],
        [5.03, 48],
        [5.07, 51],
        [2.18, 21.2],
        [5.13, 40.6],
        [3.81, 26.6],
        [2.17, 22],
        [2.94, 17.6],
        [1.03, 17.5],
        [5.22, 58.3],
        [3.14, 26.9],
        [4.02, 46],
        [0.77, 7.2],
        [5.16, 44.1],
        [0.98, 21],
        [0.81, 20.5],
        [2.77, 32],
        [4.18, 50.2],
        [2.07, 25],
        [3.18, 29.9],
        [3.24, 30.3],
        [1.07, 24.4],
        [1.04, 13.9],
        [2.8, 47.4],
        [1.23, 11.4],
        [2.79, 43.4],
        [1.97, 19],
        [5.22, 49.6],
        [0.83, 22.7],
        [3.06, 29.1],
        [1.82, 22.6],
        [2.9, 35.6],
        [4.9, 50.5],
        [2.92, 31.1]
      ]
    }
  ],
  xaxis: {
    min: 0.5,
    max: 5.5,
    tickAmount: 5,
    labels: {
      formatter: (v) => (Math.abs(v - Math.round(v)) < 0.01 ? Math.round(v) + '★' : '')
    }
  },
  yaxis: {
    title: {
      text: "Minutes per day"
    }
  },
  markers: {
    size: 4,
    fillOpacity: 0.6,
    strokeWidth: 0
  },
  title: {
    text: "Usage by star rating (jittered)"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()