frappe chart

frappe-chart-usage.js

const dataSelectHandler = (data) => {
  console.log('data', data)
}
const graph = new Chart(ref.current, {
  data        : {
    labels  : Array(30).fill(0).map((_, i) => i + 1 + ''),
    datasets: [
      {
        values,
        chartType: 'line',
      },
      {
        values: values.map((x, i, a) => x + a
          .slice(0, i)
          .reduce((acc, curr) => acc + curr, 0))
      }
    ],
    yMarkers: [{ label: '평균', value: values.reduce((acc, curr) => (acc + curr), 0) / 30}],
    yRegions: [{ label: "상위20%", start: 6000, end: 9000 }]
  },
  type: 'line',
  colors: ['light-green', 'magenta'],
  barOptions: {
    spaceRatio: 0.3,
  },
  lineOptions: {
    dotSize: 6
  },
  axisOptions: {
    xIsSeries: true
  },
  isNavigable: true,
  valuesOverPoints: true
})
graph.parent.addEventListener('data-select', dataSelectHandler)