Nivo chart Render

render.js

const React = require('react')
const { renderToStaticMarkup  } = require('react-dom/server')
const { Bar } = require('nivo')
const storage = require('../../utils/storage')
const theme = {}

const render = (props) => {
  const rendered = renderToStaticMarkup(
    React.createElement(
      Bar,
      Object.assign(
        {
          animate: false,
          isInteractive: false,
          theme,
        },
        {
          margin: {top: 0, right: 0, bottom: 0, left: 0},
        },
        props
      )
    )
  )
  return `<?xml version="1.0" ?>${rendered}`
}

export default (req, res) => {
  // get id from the request (Note there are other ways, this works well in Next JS)
  const {
    query: { id },
  } = req
  
  // Get the relvant props and data for the chart
  const config = storage.get(id)
  
  // If chart is not found then send back an error
  if (!config) {
    return res.status(404).send(`no chart found for id "${id}"`)
  }

  // Otherwise send back the rendered chart
  const rendered = render(config, req.query)
  res.set('content-type', 'image/svg+xml').status(200).send(rendered)
}