GitHub Style in JavaScript

// The commit history asset ends in 2018; shift every point forward 8 years
// so the demo lands in 2020-2026 without editing the asset.
var SHIFT = 8 * 365.25 * 24 * 60 * 60 * 1000
var commitSeries = githubdata.series.map(function (p) {
  return { x: p.x + SHIFT, y: p.y }
})

var options = {
  series: [
    {
      name: 'commits',
      data: commitSeries,
    },
  ],
  chart: {
    id: 'chartyear',
    type: 'area',
    height: 180,
    background: '#F6F8FA',
    toolbar: {
      show: false,
      autoSelected: 'pan',
    },
    events: {
      mounted: function (chart) {
        var commitsEl = document.querySelector('.cmeta span.commits')
        var commits = chart.getSeriesTotalXRange(
          chart.w.globals.minX,
          chart.w.globals.maxX,
        )

        commitsEl.innerHTML = commits
      },
      updated: function (chart) {
        var commitsEl = document.querySelector('.cmeta span.commits')
        var commits = chart.getSeriesTotalXRange(
          chart.w.globals.minX,
          chart.w.globals.maxX,
        )

        commitsEl.innerHTML = commits
      },
    },
  },
  colors: ['#FF7F00'],
  stroke: {
    width: 0,
    curve: 'monotoneCubic',
  },
  dataLabels: {
    enabled: false,
  },
  fill: {
    opacity: 1,
    type: 'solid',
  },
  yaxis: {
    show: true,
    forceNiceScale: true,
  },
  xaxis: {
    type: 'datetime',
  },
}

var chart = new ApexCharts(document.querySelector('#chart-months'), options)
chart.render()

var optionsYears = {
  series: [
    {
      name: 'commits',
      data: commitSeries,
    },
  ],
  chart: {
    height: 150,
    type: 'area',
    background: '#F6F8FA',
    toolbar: {
      autoSelected: 'selection',
    },
    brush: {
      enabled: true,
      target: 'chartyear',
    },
    selection: {
      enabled: true,
      xaxis: {
        min: new Date('15 Feb 2024').getTime(),
        max: new Date('14 Feb 2025').getTime(),
      },
    },
  },
  colors: ['#7BD39A'],
  dataLabels: {
    enabled: false,
  },
  stroke: {
    width: 0,
    curve: 'monotoneCubic',
  },
  fill: {
    opacity: 1,
    type: 'solid',
  },
  legend: {
    position: 'top',
    horizontalAlign: 'left',
  },
  xaxis: {
    type: 'datetime',
  },
}

var chartYears = new ApexCharts(
  document.querySelector('#chart-years'),
  optionsYears,
)
chartYears.render()