` the component owns, and removes what it drew when it unmounts. ### Tooltips A `Tooltip` wraps the chart it decorates: give it a `render` prop that returns the chart, and pass on the props it hands you, which are what connect the two. The charts name the fields of their data points differently, so some of them need the tooltip told where to look: | Chart | `Tooltip` props | | --- | --- | | `Line` | `topicLabel="topics"` | | `StackedArea` | none | | `StackedBar` | `nameLabel="stack"` | | `GroupedBar` | `nameLabel="group"` | | `ScatterPlot` | `valueLabel="y"` | | `Bar`, `Donut`, `Heatmap`, `Treemap` | none | Without them, the tooltip shows no rows (line), rows without their colours (stacked and grouped bar) or no value (scatter plot). ```jsx import { Line, Tooltip } from '@britecharts/react'; } topicLabel="topics" title="A title" /> ``` ### Responsive charts `ResponsiveContainer` hands its `render` prop the width it has measured, and measures again when the window is resized. `withResponsiveness` does the same for a component you wrap, as its `width` prop (a `width` you pass yourself wins). ```jsx import { Line, ResponsiveContainer, withResponsiveness } from '@britecharts/react'; } /> const ResponsiveLine = withResponsiveness(Line); ``` ## API Each component's API is a reflection of [Britecharts][britecharts] charts and their APIs. They also have a bunch of React specific props, and there are some changes due to the declarative way of building with React. For example, if we need to check the options of a bar chart, you will first check the [bar chart's API][barChartAPI] in the main project API reference page. Every Britecharts chart has a component: - Bar charts [(API)][barChartAPI] - Brush charts [(API)][brushAPI] - Bullet charts [(API)][bulletAPI] - Grouped Bar charts [(API)][groupedBarChartAPI] - Donut charts [(API)][donutChartAPI] - Heatmaps [(API)][heatmapAPI] - Treemaps [(API)][treemapAPI] - Line charts [(API)][lineChartAPI] - Scatter Plots [(API)][scatterPlotAPI] - Sparkline charts [(API)][sparklineChartAPI] - Stacked Area charts [(API)][stackedAreaChartAPI] - Stacked Bar charts [(API)][stackedBarChartAPI] - Tooltips [(API)][tooltipAPI], wrapping the line, stacked area, stacked bar and grouped bar charts with a list of values, and the bar, scatter plot and heatmap charts with a single value (the mini tooltip) - Legends [(API)][legendAPI] - The `ResponsiveContainer` component and the `withResponsiveness` function, described above These components were previously hosted in the [britecharts-react][britecharts-react] repository, but became a package with Britecharts V3. ## Installation To install run: ``` pnpm add @britecharts/core @britecharts/wrappers @britecharts/react ``` Or, with npm: ``` npm i --save @britecharts/core @britecharts/wrappers @britecharts/react ``` Britecharts-React is available as an [NPM module][npmModule] or through CDN links (in [different formats][jsDelivrLib] or a [bundle][jsDelivrDist]). Import the components from the package: bundlers get ES modules, and `require('@britecharts/react')` gets the UMD bundle. The [React consumer][testProject] in the integration package shows every way of loading it, and is what CI runs. ### Supported React versions `peerDependencies` requires `react` and `react-dom` `>=16.8`: the components use hooks, which arrived in that release. What is actually verified on every commit: - **React 19**, by the unit tests, which now run on React Testing Library, and in a real browser: CI packs the package the way a release does, installs it into a React 19 project, and loads it in production and in a development build under `StrictMode`, which runs every effect's setup, cleanup and setup again. React 17 and 18 are expected to work and are not exercised. If you hit a version-specific problem on an older React, please open an issue. ## Acknowledgments For this project, we have followed the approach called ‘Mapping Lifecycle methods’ based on [Nicholas Hery's article][integration-article]: a chart's `create`, `update` and `destroy` are called from the component's mount, update and unmount, which one internal hook now does for every chart. We want to recognize all the contributors in the parent project [Britecharts][britecharts]. ## See Also - [Documentation Homepage][homepage] - [Contributing Guide][contributing] - [Code of Conduct][codeOfConduct] ## Contribute When Britecharts adds a chart, check out our [how-to guide for creating new charts][howtoCreate] to bring it to React. Check also the [contributing guide][contributing] if you want to help. Note that the aim of this project is to allow the usage of Britecharts within your React applications. For that, we are ‘wrapping’ Britecharts with `@britecharts/wrappers`. This means that **any new features need to first be implemented on Britecharts**. Only then you could update the props and logic that passes in the configuration. ### TypeScript The package is written in TypeScript, and its type declarations are generated from the components at build time. Each component's props type is exported from the package root (`BarChartProps`, `LineProps` and so on), and CI compiles a TypeScript project against the packed package. [react]: https://react.dev/ [integration-article]: http://nicolashery.com/integrating-d3js-visualizations-in-a-react-app/ [storybook]: https://britecharts.github.io/britecharts/storybook/react/ [barChartAPI]: https://britecharts.github.io/britecharts/docs/API/bar [groupedBarChartAPI]: https://britecharts.github.io/britecharts/docs/API/grouped-bar [donutChartAPI]: https://britecharts.github.io/britecharts/docs/API/donut [lineChartAPI]: https://britecharts.github.io/britecharts/docs/API/line [scatterPlotAPI]: https://britecharts.github.io/britecharts/docs/API/scatter-plot [sparklineChartAPI]: https://britecharts.github.io/britecharts/docs/API/sparkline [stackedAreaChartAPI]: https://britecharts.github.io/britecharts/docs/API/stacked-area [stackedBarChartAPI]: https://britecharts.github.io/britecharts/docs/API/stacked-bar [tooltipAPI]: https://britecharts.github.io/britecharts/docs/API/tooltip [legendAPI]: https://britecharts.github.io/britecharts/docs/API/legend [bulletAPI]: https://britecharts.github.io/britecharts/docs/API/bullet [brushAPI]: https://britecharts.github.io/britecharts/docs/API/brush [heatmapAPI]: https://britecharts.github.io/britecharts/docs/API/heatmap [treemapAPI]: https://britecharts.github.io/britecharts/docs/API/treemap [jsDelivrLib]: https://cdn.jsdelivr.net/npm/britecharts-react@latest/lib/ [jsDelivrDist]: https://cdn.jsdelivr.net/npm/britecharts-react@latest/dist/ [npmModule]: https://www.npmjs.com/package/britecharts-react [contributing]: https://github.com/britecharts/britecharts/blob/main/.github/CONTRIBUTING.md [codeOfConduct]: https://github.com/britecharts/britecharts/blob/main/CODE_OF_CONDUCT.md [homepage]: https://britecharts.github.io/britecharts/ [britecharts]: https://britecharts.github.io/britecharts/ [testProject]: https://github.com/britecharts/britecharts/tree/main/packages/integration/consumers/react [howtoCreate]: https://github.com/britecharts/britecharts-react/blob/master/CONTRIBUTING.md#creating-a-new-chart [britecharts-react]: https://github.com/britecharts/britecharts-react/ --- # Bar Source: https://britecharts.github.io/britecharts/docs/API/bar Bar Chart reusable API class that renders a simple and configurable bar chart. **Example** ```js import { bar } from '@britecharts/core'; // dataset: [{ name, value }] const barChart = bar(); barChart .height(500) .width(800) .render('.css-selector', dataset); ``` * ~~.enableLabels([_x]) ⇒ `Boolean` \| `module`~~ ## bar(_selection, _data) This function creates the graph using the selection as container **Kind**: Exported function | Param | Type | Description | | --- | --- | --- | | _selection | `D3Selection` | A d3 selection that represents the container(s) where the chart(s) will be rendered | | _data | `BarChartData` | The data to attach and generate the chart | ## a11yTitle(_x) ⇒ `String` \| `null` \| `module` Gets or Sets the name screen readers announce for the chart. It is set as the svg's `aria-label`. Unset, the chart is announced as "Bar chart". **Kind**: method of `bar` **Returns**: `String` \| `null` \| `module` - Current a11yTitle or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `String` \| `null` | Desired accessible title for the chart | ## a11yDescription(_x) ⇒ `String` \| `null` \| `module` Gets or Sets a longer description screen readers announce after the chart's name, such as what the data shows. It is rendered as the svg's ``. Unset, the chart has no description. **Kind**: method of `bar` **Returns**: `String` \| `null` \| `module` - Current a11yDescription or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `String` \| `null` | Desired accessible description for the chart | ## a11yDataTable(_x) ⇒ `Boolean` \| `module` Gets or Sets whether the chart renders its data as a visually hidden table after its svg, which screen readers can read cell by cell. On by default; set it to false when the app gives the data its own accessible form. **Kind**: method of `bar` **Returns**: `Boolean` \| `module` - Current a11yDataTable or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `Boolean` | Whether to render the data table | ## a11yKeyboardNavigation(_x) ⇒ `Boolean` \| `module` Gets or Sets whether a keyboard can move through the chart's data points: the chart takes one tab stop, the arrow keys move between points, Home and End go to the first and last, and Escape lets go. The tooltip and highlights follow focus as they follow the pointer. On by default. **Kind**: method of `bar` **Returns**: `Boolean` \| `module` - Current a11yKeyboardNavigation or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `Boolean` | Whether the keyboard can move through the data | ## animationDuration(_x) ⇒ `duration` \| `module` Gets or Sets the duration of the animation **Kind**: method of `bar` **Returns**: `duration` \| `module` - Current animation duration or Chart module to chain calls | Param | Type | Default | Description | | --- | --- | --- | --- | | _x | `Number` | `1200` | Desired animation duration for the graph | ## betweenBarsPadding(_x) ⇒ `padding` \| `module` Gets or Sets the padding of the chart (Default is 0.1) **Kind**: method of `bar` **Returns**: `padding` \| `module` - Current padding or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `Number` \| `module` | Padding value to get/set | ## chartGradient(_x) ⇒ `Array.` \| `module` Gets or Sets the gradient colors of a bar in the chart **Kind**: method of `bar` **Returns**: `Array.` \| `module` - Current color gradient or Line Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `Array.` | Desired color gradient for the line (array of two hexadecimal numbers) | ## colorMap([_x]) ⇒ `object` \| `module` Gets or Sets the colorMap of the chart **Kind**: method of `bar` **Returns**: `object` \| `module` - Current colorMap or Chart module to chain calls | Param | Type | Default | Description | | --- | --- | --- | --- | | [_x] | `object` | `` | Color map | **Example** ```js barChart.colorMap({name: 'colorHex', name2: 'colorString'}) ``` ## colorSchema(_x) ⇒ `colorSchema` \| `module` Gets or Sets the colorSchema of the chart **Kind**: method of `bar` **Returns**: `colorSchema` \| `module` - Current colorSchema or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `Array.` | Desired colorSchema for the graph | ## ~~enableLabels([_x]) ⇒ `Boolean` \| `module`~~ ***Use `hasLabels`, which does the same. Goes in version 4.*** If true, adds labels at the end of the bars **Kind**: method of `bar` **Returns**: `Boolean` \| `module` - Current value of hasLabels or Chart module to chain calls | Param | Type | Default | | --- | --- | --- | | [_x] | `Boolean` | `false` | ## exportChart(filename, title) ⇒ `Promise` Exports the chart and fires a download: an svg file when the filename ends in `.svg`, and a png otherwise **Kind**: method of `bar` **Returns**: `Promise` - Promise that resolves if the chart image was loaded and downloaded successfully | Param | Type | Description | | --- | --- | --- | | filename | `String` | Name of the downloaded file, whose extension picks the format | | title | `String` | Title to add at the top of the exported picture | ## hasLabels([_x]) ⇒ `Boolean` \| `module` If true, adds labels at the end of the bars **Kind**: method of `bar` **Returns**: `Boolean` \| `module` - Current value of hasLabels or Chart module to chain calls | Param | Type | Default | | --- | --- | --- | | [_x] | `Boolean` | `false` | ## hasPercentage(_x) ⇒ `boolean` \| `module` Gets or Sets the hasPercentage status **Kind**: method of `bar` **Returns**: `boolean` \| `module` - Is percentage used or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `boolean` | Should use percentage as value format | ## hasSingleBarHighlight(_x) ⇒ `boolean` \| `module` Gets or Sets the hasSingleBarHighlight status. If the value is true (default), only the hovered bar is considered to be highlighted and will be darkened by default. If the value is false, all the bars but the hovered bar are considered to be highlighted and will be darkened (by default). To customize the bar highlight or remove it completely, use highlightBarFunction instead. **Kind**: method of `bar` **Returns**: `boolean` \| `module` - Is hasSingleBarHighlight used or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `boolean` | Should highlight the hovered bar | ## height(_x) ⇒ `height` \| `module` Gets or Sets the height of the chart **Kind**: method of `bar` **Returns**: `height` \| `module` - Current height or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `number` | Desired width for the graph | ## highlightBarFunction(_x) ⇒ `highlightBarFunction` \| `module` Gets or Sets the highlightBarFunction function. The callback passed to this function returns a bar selection from the bar chart. Use this function if you want to apply a custom behavior to the highlighted bar on hover. When hasSingleBarHighlight is true the highlighted bar will be the one that was hovered by the user. When hasSingleBarHighlight is false the highlighted bars are all the bars but the hovered one. The default highlight effect on a bar is darkening the highlighted bar(s) color. **Kind**: method of `bar` **Returns**: `highlightBarFunction` \| `module` - Is highlightBarFunction used or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `function` | Desired operation operation on a hovered bar passed through callback | **Example** ```js barChart.highlightBarFunction(bar => bar.attr('fill', 'blue')) barChart.highlightBarFunction(null) // will disable the default highlight effect ``` ## isAnimated(_x) ⇒ `isAnimated` \| `module` Gets or Sets the isAnimated property of the chart, making it to animate when render. The chart draws without animation when the reader's system asks for reduced motion (`prefers-reduced-motion`), whatever this is set to. By default this is 'false' **Kind**: method of `bar` **Returns**: `isAnimated` \| `module` - Current isAnimated flag or Chart module | Param | Type | Description | | --- | --- | --- | | _x | `Boolean` | Desired animation flag | ## isHorizontal(_x) ⇒ `isHorizontal` \| `module` Gets or Sets the horizontal direction of the chart **Kind**: method of `bar` **Returns**: `isHorizontal` \| `module` - If it is horizontal or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `number` | Desired horizontal direction for the graph | ## labelsMargin([_x]) ⇒ `number` \| `module` Offset between end of bar and start of the percentage bars **Kind**: method of `bar` **Returns**: `number` \| `module` - Current offset or Chart module to chain calls | Param | Type | Default | Description | | --- | --- | --- | --- | | [_x] | `number` | `7` | Margin offset from end of bar | ## labelsNumberFormat([_x]) ⇒ `string` \| `module` Gets or Sets the labels number format **Kind**: method of `bar` **Returns**: `string` \| `module` - Current labelsNumberFormat or Chart module to chain calls | Param | Type | Default | Description | | --- | --- | --- | --- | | [_x] | `string` | `"\",f\""` | desired label number format for the bar chart | ## labelsSize([_x]) ⇒ `number` \| `module` Get or Sets the labels text size **Kind**: method of `bar` **Returns**: `number` \| `module` - Current text size or Chart module to chain calls | Param | Type | Default | Description | | --- | --- | --- | --- | | [_x] | `number` | `12` | label font size | ## isLoading(flag) ⇒ `boolean` \| `module` Gets or Sets the loading state of the chart **Kind**: method of `bar` **Returns**: `boolean` \| `module` - Current loading state flag or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | flag | `boolean` | Desired value for the loading state | ## margin(_x) ⇒ `margin` \| `module` Gets or Sets the margin of the chart **Kind**: method of `bar` **Returns**: `margin` \| `module` - Current margin or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `object` | Margin object to get/set | ## numberFormat(_x) ⇒ `string` \| `module` Gets or Sets the number format of the bar chart **Kind**: method of `bar` **Returns**: `string` \| `module` - Current numberFormat or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `string` | = ',f' Desired numberFormat for the chart. See examples [here](https://d3js.org/d3-format) | ## on() ⇒ `module` Exposes an 'on' method that acts as a bridge with the event dispatcher We are going to expose this events: customMouseOver, customMouseMove, customMouseOut, and customClick **Kind**: method of `bar` **Returns**: `module` - Bar Chart ## percentageAxisToMaxRatio(_x) ⇒ `ratio` \| `module` Configurable extension of the x axis. If your max point was 50% you might want to show x axis to 60%, pass 1.2 **Kind**: method of `bar` **Returns**: `ratio` \| `module` - Current ratio or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `number` | ratio to max data point to add to the x axis | ## shouldReverseColorList(_x) ⇒ `boolean` \| `module` Gets or Sets whether the color list should be reversed or not **Kind**: method of `bar` **Returns**: `boolean` \| `module` - Is color list being reversed or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `boolean` | Should reverse the color list | ## orderingFunction(_x) ⇒ `function` \| `Module` Changes the order of items given the custom function **Kind**: method of `bar` **Returns**: `function` \| `Module` - A custom ordering function or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `function` | A custom function that sets logic for ordering | ## valueLocale([_x]) ⇒ `LocaleObject` \| `module` Gets or Sets the locale which our formatting functions use. Check [the d3-format docs](https://github.com/d3/d3-format#formatLocale) for the required values. **Kind**: method of `bar` **Returns**: `LocaleObject` \| `module` - Current locale object or Chart module to chain calls | Param | Type | Default | Description | | --- | --- | --- | --- | | [_x] | `LocaleObject` | `` | _x Desired locale object format. | **Example** ```js barChart .valueLocale({thousands: '.', grouping: [3], currency: ["$", ""], decimal: "."}) ``` ## width(_x) ⇒ `width` \| `module` Gets or Sets the width of the chart **Kind**: method of `bar` **Returns**: `width` \| `module` - Current width or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `number` | Desired width for the graph | ## xAxisLabel(_x) ⇒ `String` \| `module` Gets or Sets the text of the xAxisLabel on the chart **Kind**: method of `bar` **Returns**: `String` \| `module` - Label or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `String` | Desired text for the label | ## xAxisLabelOffset(_x) ⇒ `Number` \| `module` Gets or Sets the offset of the xAxisLabel on the chart **Kind**: method of `bar` **Returns**: `Number` \| `module` - label or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `Number` | Desired offset for the label | ## xTicks(_x) ⇒ `Number` \| `module` Gets or Sets the number of ticks of the x axis on the chart **Kind**: method of `bar` **Returns**: `Number` \| `module` - Current xTicks or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `Number` | = 5 Desired horizontal ticks | ## yAxisLabel(_x) ⇒ `String` \| `module` Gets or Sets the text of the yAxisLabel on the chart **Kind**: method of `bar` **Returns**: `String` \| `module` - Label or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `String` | Desired text for the label | ## yAxisLabelOffset(_x) ⇒ `Number` \| `module` Gets or Sets the offset of the yAxisLabel on the chart **Kind**: method of `bar` **Returns**: `Number` \| `module` - Label or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `Number` | Desired offset for the label | ## yAxisPaddingBetweenChart(_x) ⇒ `Number` \| `module` Space between y axis and chart **Kind**: method of `bar` **Returns**: `Number` \| `module` - Current value of yAxisPaddingBetweenChart or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `Number` | = 10 Space between y axis and chart | ## yTicks(_x) ⇒ `Number` \| `module` Gets or Sets the number of vertical ticks on the chart **Kind**: method of `bar` **Returns**: `Number` \| `module` - Current yTicks or Chart module to chain calls | Param | Type | Description | | --- | --- | --- | | _x | `Number` | = 6 Desired number of vertical ticks for the graph | ## tooltip(_x) ⇒ `module` \| `null` Gets or Sets the tooltip the chart shows: a `tooltip()`, set on this chart only. The chart connects it to its pointer and keyboard events, draws it in place, and sets the labels its data points need, unless they were set on the tooltip; it does so now if the chart has drawn, and again on every draw. Its event handlers go under the `britechartsTooltip` namespace. Null, or another tooltip, removes the one it had. **Kind**: method of `bar` **Returns**: `module` \| `null` - Current tooltip or Chart module to chain calls **Throws**: - `Error` When the tooltip is already set on another chart | Param | Type | Description | | --- | --- | --- | | _x | `module` \| `null` | The tooltip to show | **Example** ```js bar().tooltip(tooltip().title('Uses')).render('#chart', data); ``` ## render(target, [data]) ⇒ `module` Draws the chart into a target: a CSS selector, an element or a d3 selection, as `select(target).datum(data).call(chart)` does. A selector draws into the first element it matches. Without data, the chart redraws with the data it last drew there. **Kind**: method of `bar` **Returns**: `module` - The chart module, to chain calls **Throws**: - `Error` When the target matches no element | Param | Type | Description | | --- | --- | --- | | target | `String` \| `Element` \| `D3Selection` | Where to draw the chart | | [data] | `Object` | The data to draw | **Example** ```js bar().width(600).render('#chart', data); ``` ## exports~BarChartData : `Array.

CPU load GHz

CPU 1 GHz