1. Advisor
  2. recharts
  3. functions
  4. recharts.ResponsiveContainer
View all recharts analysis

How to use the recharts.ResponsiveContainer function in recharts

To help you get started, we’ve selected a few recharts examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github fiatjaf / trackingco.de / client / charts / Card.js View on Github external
render () {
    let colours = mergeColours(this.props.colours)

    return (
      h(R.ResponsiveContainer, {height: 200, width: '100%'}, [
        h(R.ComposedChart, {data: this.props.site.days}, [
          h(R.Bar, {
            dataKey: 's',
            fill: color(colours.bar1).lighten(0.2).string(),
            isAnimationActive: false
          }),
          h(R.Line, {
            dataKey: 'v',
            stroke: color(colours.line1).lighten(0.2).string(),
            type: 'monotone',
            strokeWidth: 3,
            dot: false,
            isAnimationActive: false
          })
        ])
      ])
github hackoregon / component-library / lib / er-components / HowWhenBusy / HowWhenBusy.js View on Github external
_react2.default.createElement(
      _recharts.ResponsiveContainer,
      { width: '33.333%', aspect: '1' },
      _react2.default.createElement(
        _recharts.BarChart,
        { layout: 'horizontal', data: dataMonthMedical },
        _react2.default.createElement(_recharts.XAxis, { dataKey: 'name' }),
        _react2.default.createElement(_recharts.YAxis, null),
        _react2.default.createElement(_recharts.CartesianGrid, { strokeDasharray: '3 3' }),
        _react2.default.createElement(_recharts.Tooltip, null),
        _react2.default.createElement(_recharts.Legend, null),
        _react2.default.createElement(_recharts.Bar, { dataKey: 'Average Daily Medical Incidents per Month, 2010-2016', fill: '#D7075F' })
      )
    ),
    _react2.default.createElement(
      _recharts.ResponsiveContainer,
      { width: '33.333%', aspect: '1' },
      _react2.default.createElement(
        _recharts.BarChart,
        { layout: 'horizontal', data: dataMonthFire },
        _react2.default.createElement(_recharts.XAxis, { dataKey: 'name' }),
        _react2.default.createElement(_recharts.YAxis, null),
        _react2.default.createElement(_recharts.CartesianGrid, { strokeDasharray: '3 3' }),
        _react2.default.createElement(_recharts.Tooltip, null),
        _react2.default.createElement(_recharts.Legend, null),
        _react2.default.createElement(_recharts.Bar, { dataKey: 'Average Daily Fire Incidents per Month, 2010-2016', fill: '#e34d77' })
      )
    ),
    _react2.default.createElement(
      _recharts.ResponsiveContainer,
      { width: '33.333%', aspect: '1' },
      _react2.default.createElement(
github hackoregon / component-library / lib / er-components / ResponseTimeVaries / ResponseTimeVaries.js View on Github external
_recharts.ResponsiveContainer,
      { width: '33.333%', aspect: '1' },
      _react2.default.createElement(
        _recharts.ScatterChart,
        null,
        _react2.default.createElement(_recharts.XAxis, { dataKey: 'median_hh_income', name: 'Median Household Income', unit: '$' }),
        _react2.default.createElement(_recharts.YAxis, { dataKey: 'median_response_time', name: 'Response Time', unit: 'min' }),
        _react2.default.createElement(_recharts.ZAxis, { dataKey: 'fma', name: 'Fire Management Area' }),
        _react2.default.createElement(_recharts.Scatter, { name: 'Response Time vs FMA Median Income', data: _data2.default, fill: '#D7075F' }),
        _react2.default.createElement(_recharts.CartesianGrid, null),
        _react2.default.createElement(_recharts.Legend, null),
        _react2.default.createElement(_recharts.Tooltip, { cursor: { strokeDasharray: '3 3' } })
      )
    ),
    _react2.default.createElement(
      _recharts.ResponsiveContainer,
      { width: '33.333%', aspect: '1' },
      _react2.default.createElement(
        _recharts.ScatterChart,
        null,
        _react2.default.createElement(_recharts.XAxis, { dataKey: 'percent_non_white', name: 'Non-White', unit: '%' }),
        _react2.default.createElement(_recharts.YAxis, { dataKey: 'median_response_time', name: 'Response Time', unit: 'min' }),
        _react2.default.createElement(_recharts.ZAxis, { dataKey: 'fma', name: 'Fire Management Area' }),
        _react2.default.createElement(_recharts.Scatter, { name: 'Response Time vs FMA % Non-White', data: _data2.default, fill: '#D7075F' }),
        _react2.default.createElement(_recharts.CartesianGrid, null),
        _react2.default.createElement(_recharts.Legend, null),
        _react2.default.createElement(_recharts.Tooltip, { cursor: { strokeDasharray: '3 3' } })
      )
    ),
    _react2.default.createElement(
      _recharts.ResponsiveContainer,
      { width: '33.333%', aspect: '1' },
github hackoregon / component-library / lib / er-components / HowWhenBusy / HowWhenBusy.js View on Github external
var ErBarChart = function ErBarChart() {
  return _react2.default.createElement(
    'div',
    { style: { display: 'flex', flexFlow: 'row wrap' } },
    _react2.default.createElement(
      _recharts.ResponsiveContainer,
      { width: '33.333%', aspect: '1' },
      _react2.default.createElement(
        _recharts.BarChart,
        { layout: 'horizontal', data: dataMonthMedical },
        _react2.default.createElement(_recharts.XAxis, { dataKey: 'name' }),
        _react2.default.createElement(_recharts.YAxis, null),
        _react2.default.createElement(_recharts.CartesianGrid, { strokeDasharray: '3 3' }),
        _react2.default.createElement(_recharts.Tooltip, null),
        _react2.default.createElement(_recharts.Legend, null),
        _react2.default.createElement(_recharts.Bar, { dataKey: 'Average Daily Medical Incidents per Month, 2010-2016', fill: '#D7075F' })
      )
    ),
    _react2.default.createElement(
      _recharts.ResponsiveContainer,
      { width: '33.333%', aspect: '1' },
      _react2.default.createElement(
github hackoregon / component-library / lib / er-components / ResponseTimeVaries / ResponseTimeVaries.js View on Github external
var Scatterplot = function Scatterplot() {
  return _react2.default.createElement(
    'div',
    { style: { display: 'flex', flexFlow: 'row wrap' } },
    _react2.default.createElement(
      _recharts.ResponsiveContainer,
      { width: '33.333%', aspect: '1' },
      _react2.default.createElement(
        _recharts.ScatterChart,
        null,
        _react2.default.createElement(_recharts.XAxis, { dataKey: 'fma_population_total', name: 'Population' }),
        _react2.default.createElement(_recharts.YAxis, { dataKey: 'median_response_time', name: 'Response Time', unit: 'min' }),
        _react2.default.createElement(_recharts.ZAxis, { dataKey: 'fma', name: 'Fire Management Area' }),
        _react2.default.createElement(_recharts.Scatter, { name: 'Response Time vs. FMA Population', data: _data2.default, fill: '#D7075F' }),
        _react2.default.createElement(_recharts.CartesianGrid, null),
        _react2.default.createElement(_recharts.Legend, null),
        _react2.default.createElement(_recharts.Tooltip, { cursor: { strokeDasharray: '3 3' } })
      )
    ),
    _react2.default.createElement(
      _recharts.ResponsiveContainer,
      { width: '33.333%', aspect: '1' },

recharts

React charts

GitHub
MIT
Latest version published 15 days ago

Package Health Score

97 / 100
Full package analysis

Popular recharts functions

Similar packages