Nivo.md

Abbreviation

symmetric logarithmic scale abbreviates for symlog

Color Modifier

const commonProps = {
    width: 900,
    height: 500,
    margin: { top: 60, right: 80, bottom: 60, left: 80 },
    data: generateCountriesData(keys, { size: 7 }),
    indexBy: 'country',
    keys,
    padding: 0.2,
    innerPadding={1}
    barComponent={CustomBarComponent}
    labelTextColor: 'inherit:darker(1.4)', 👈
    labelSkipWidth: 16,
    labelSkipHeight: 16,
    label: d => Math.abs(d.value),
    labelFormat={v => `${v}%`}
    axisRight: {
      format: v => `${Math.abs(v)}%`, 👈
    },
    axisTop={{
      format: '~s',
    }}
}

Use custom color

const MyBar = () => (
  <Bar {...commonProps} colors={({ id, data }) => data[`${id}Color`]} />
)

Custom Bar Component

const CustomBarComponent = ({ x, y, width, height, color }) => {
  // `useTheme` is available in custom elements
  const theme = useTheme();

  return (
    <circle cx={x + width / 2} cy={y + height / 2} r={Math.min(width, height) / 2} fill={color} />
)}

with formatted values

const MyBar = () => (
    <Bar
        {...commonProps}
        axisLeft={{
            format: value =>
                `${Number(value).toLocaleString('ru-RU', {
                    minimumFractionDigits: 2,
                })} ₽`,
        }}
        tooltipFormat={value =>
            `${Number(value).toLocaleString('ru-RU', {
                minimumFractionDigits: 2,
            })} ₽`
        }
    />
)

Theme properties

{
  "background": "transparent",
  "fontFamily": "sans-serif",
  "fontSize": 11,
  "textColor": "#333333",
  "axis": {
    "domain": {
      "line": {
        "stroke": "transparent",
        "strokeWidth": 1
      }
    },
    "ticks": {
      "line": {
        "stroke": "#777777",
        "strokeWidth": 1
      },
      "text": {
        "fontFamily": "sans-serif",
        "fontSize": 11,
        "fill": "#333333"
      }
    },
    "legend": {
      "text": {
        "fontSize": 12,
        "fontFamily": "sans-serif",
        "fill": "#333333"
      }
    }
  },
  "grid": {
    "line": {
      "stroke": "#dddddd",
      "strokeWidth": 1
    }
  },
  "legends": {
    "text": {
      "fontFamily": "sans-serif",
      "fontSize": 11,
      "fill": "#333333"
    }
  },
  "labels": {
    "text": {
      "fontFamily": "sans-serif",
      "fontSize": 11,
      "fill": "#333333"
    }
  },
  "markers": {
    "lineColor": "#000000",
    "lineStrokeWidth": 1,
    "text": {
      "fontFamily": "sans-serif",
      "fontSize": 11,
      "fill": "#333333"
    }
  },
  "dots": {
    "text": {
      "fontFamily": "sans-serif",
      "fontSize": 11,
      "fill": "#333333"
    }
  },
  "tooltip": {
    "container": {
      "background": "white",
      "color": "inherit",
      "fontSize": "inherit",
      "borderRadius": "2px",
      "boxShadow": "0 1px 2px rgba(0, 0, 0, 0.25)",
      "padding": "5px 9px"
    },
    "basic": {
      "whiteSpace": "pre",
      "display": "flex",
      "alignItems": "center"
    },
    "chip": {
      "marginRight": 7
    },
    "table": {},
    "tableCell": {
      "padding": "3px 5px"
    },
    "tableCellValue": {
      "fontWeight": "bold"
    }
  },
  "crosshair": {
    "line": {
      "stroke": "#000000",
      "strokeWidth": 1,
      "strokeOpacity": 0.75,
      "strokeDasharray": "6 6"
    }
  },
  "annotations": {
    "text": {
      "fontSize": 13,
      "outlineWidth": 2,
      "outlineColor": "#ffffff",
      "fontFamily": "sans-serif",
      "fill": "#333333"
    },
    "link": {
      "stroke": "#000000",
      "strokeWidth": 1,
      "outlineWidth": 2,
      "outlineColor": "#ffffff"
    },
    "outline": {
      "fill": "none",
      "stroke": "#000000",
      "strokeWidth": 2,
      "outlineWidth": 2,
      "outlineColor": "#ffffff"
    },
    "symbol": {
      "fill": "#000000",
      "outlineWidth": 2,
      "outlineColor": "#ffffff"
    }
  }
}

Get canvas - download the chart

https://nivo.rocks/storybook/?path=/story/responsivebarcanvas--get-canvas-download-the-chart

const Wrapper = props => <div {...props} style={{ height: '300px', width: '600px' }} />

const MyBar = () => {
    const ref = useRef(undefined)

    button('Download image', () => {
        const canvas = ref.current
        const link = document.createElement('a')
        link.download = 'chart.png'
        link.href = canvas.toDataURL('image/png')
        link.click()
    })

    return (
      <Wrapper>
          <ResponsiveBarCanvas {...commonProps} ref={ref} />
      </Wrapper>
    )
}