{"id":14384799,"url":"https://github.com/kensho-technologies/orama","last_synced_at":"2025-08-23T18:30:58.884Z","repository":{"id":57316021,"uuid":"91098315","full_name":"kensho-technologies/orama","owner":"kensho-technologies","description":"Plug and play React charts","archived":true,"fork":false,"pushed_at":"2019-12-13T16:46:20.000Z","size":2986,"stargazers_count":122,"open_issues_count":11,"forks_count":11,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-08-09T12:46:55.413Z","etag":null,"topics":["charts","data-visualization","react","react-components","reactjs","visualization"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kensho-technologies.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-12T14:14:11.000Z","updated_at":"2025-05-29T16:57:52.000Z","dependencies_parsed_at":"2022-08-25T20:40:41.731Z","dependency_job_id":null,"html_url":"https://github.com/kensho-technologies/orama","commit_stats":null,"previous_names":[],"tags_count":51,"template":false,"template_full_name":null,"purl":"pkg:github/kensho-technologies/orama","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kensho-technologies%2Forama","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kensho-technologies%2Forama/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kensho-technologies%2Forama/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kensho-technologies%2Forama/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kensho-technologies","download_url":"https://codeload.github.com/kensho-technologies/orama/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kensho-technologies%2Forama/sbom","scorecard":{"id":555610,"data":{"date":"2025-08-11","repo":{"name":"github.com/kensho-technologies/orama","commit":"18423e03df2ff6d93f40c94fb19453348db8a208"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.5,"checks":[{"name":"Code-Review","score":3,"reason":"Found 9/30 approved changesets -- score normalized to 3","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"project is archived","details":["Warn: Repository is archived."],"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: Apache License 2.0: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 10 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"90 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg","Warn: Project is vulnerable to: GHSA-36jr-mh4h-2g58","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-3gx7-xhv7-5mx3","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6","Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9","Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f","Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p","Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv","Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8","Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65","Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-593f-38f6-jp5m","Warn: Project is vulnerable to: GHSA-x2rg-q646-7m2v","Warn: Project is vulnerable to: GHSA-jgmv-j7ww-jx2x","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx","Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94","Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp","Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-29xr-v42j-r956","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-20T12:15:16.386Z","repository_id":57316021,"created_at":"2025-08-20T12:15:16.387Z","updated_at":"2025-08-20T12:15:16.387Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271755887,"owners_count":24815496,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-23T02:00:09.327Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["charts","data-visualization","react","react-components","reactjs","visualization"],"created_at":"2024-08-28T18:01:40.804Z","updated_at":"2025-08-23T18:30:58.405Z","avatar_url":"https://github.com/kensho-technologies.png","language":"JavaScript","readme":"# Orama [DEPRECATED]\n\n[![travis](https://img.shields.io/travis/kensho-technologies/orama.svg)](https://travis-ci.org/kensho-technologies/orama)\n[![npm](https://img.shields.io/npm/v/orama.svg)](https://npm.im/orama)\n\n\u003e This package has been deprecated as it is no longer used by Kensho internally and we do not plan to continue maintaining it. We hope it can serve as inspiration for other data visualization libraries!\n\nPlug and play [React](https://facebook.github.io/react/) charts.\n\n- Responsive layout\n- Automatic data type extraction\n- Freely composable marks\n- Canvas rendering and caching optimizations\n- Configurable theme\n\nOrama has been powering [Kensho](https://kensho.com)'s charts in production for more than a year.\n\n\u003e /horáō, \"to see, spiritually and mentally\" – a vision, focusing on the impact it has on the one beholding the vision.\n\n## Quick Start\n\n```\n$ npm install orama\n```\n\n1. Get an array of objects: `[{key1, key2}, {key1, key2}, ...]`, or array of arrays for multi-lines and multi-areas.\n2. Choose which marks to use: `\u003cLines /\u003e`, `\u003cPoints /\u003e`, `\u003cBars /\u003e`, `\u003cAreas /\u003e`, etc.\n3. Choose which keys in the data map to which visual dimensions: `x`, `y`, `fill`, `stroke`, etc.\n\n```js\nimport {Chart, Lines} from 'orama'\n\nconst data = [\n {date: new Date('2010-01-01'), value: 10},\n {date: new Date('2010-02-01'), value: 17},\n {date: new Date('2010-03-01'), value: 9},\n {date: new Date('2010-04-01'), value: 12},\n {date: new Date('2010-05-01'), value: 20},\n]\n\nconst chart = (\n \u003cChart\u003e\n \u003cLines data={data} x=\"date\" y=\"value\" /\u003e\n \u003c/Chart\u003e\n)\n```\n\n# API\n\nOrama charts are all wrapped by the `\u003cChart\u003e` tag, inside of which you can freely compose visual marks. The available marks are: `\u003cLines /\u003e`, `\u003cPoints /\u003e`, `\u003cAreas /\u003e`, `\u003cGuides /\u003e`, `\u003cRanges /\u003e`, and `\u003cText /\u003e`.\n\nThe `data` for each mark can be an array of objects `[{}, {}]` or an array of arrays of objects `[ [{}, {}], [{}, {}] ]`. You can use arrays of arrays to get multi-lines or multi-areas in the `\u003cLines /\u003e` and `\u003cAreas /\u003e` marks. Values in the objects can be `Number`s, `String`s or `Date`s\n\nEach key from the data objects can be mapped to a visual dimension on the marks. The available visual dimensions are: `x`, `x0`, `x1`, `x2`, `y`, `y0`, `y1`, `y2`, `radius`, `fill`, `stroke`, `lineWidth`, `lineDash`, `alpha`, `text`, `textAlign`, `xOffset`, and `yOffset`. Not all dimensions are available in all marks.\n\nTo map the values from the key `date` in the data objects to the `x` position of a `\u003cPoints /\u003e` mark, you can do:\n\n```js\nimport {Chart, Points} from 'orama'\n\nconst data = [\n {date: new Date('2010-01-01')},\n {date: new Date('2010-02-01')},\n {date: new Date('2010-03-01')},\n]\n\nconst chart = (\n \u003cChart\u003e\n \u003cPoints data={data} x=\"date\" /\u003e\n \u003c/Chart\u003e\n)\n```\n\nThe values' types are automatically extracted from the data, and the data domain for each visual dimension is calculated using all marks inside of a chart. If a chart has both `\u003cLines /\u003e` and `\u003cPoints /\u003e` using the `x` dimension, the domain of the `x` dimension will be calculated using the data in both marks.\n\nMost of the props accepted by the components follow a schema that combines the dimension name with a specific property. For example, to manually set the axis name for the `x` dimension you can pass the prop: `xName=\"custom name\"`, to set the `fill` dimension to a constant value (instead of mapping from the data) you can use the prop: `fillValue=\"steelblue\"`.\n\nThroughout this documentation, we will refer to this use of dimension + property as `[dim]PropertyName`. All dimensions can be configured this way.\n\nThe dimension props can also be set specifically for during hover behavior, by adding hover before the name of the prop: `hover[Dim]PropertyName`.\n\n## `\u003cChart /\u003e`\n\nThe chart component can be configured with the following properties:\n\n| Prop | Description |\n| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `width` | **Number**\u003cbr /\u003eSets the width of the chart, if this property is not used the chart gets the dimension from its parent. |\n| `proportion` | **Number = 0.5**\u003cbr /\u003eThe height of the chart is calculated by multiplying the `width` by the `proportion` value. If `height` is defined, this value is ignored. |\n| `height` | **Number**\u003cbr /\u003eIf height is not defined, its value is calculated by multiplying the `width` the `proportion`. If `height` is defined, the `proportion` is ignored. |\n| `margin` | **Object**\u003cbr /\u003eOverrides the margins of the chart. The margins are automatically calculated so that the axis labels can fit inside of the chart. \u003cbr /\u003e `\u003cChart margin={{top: 20, left: 20, bottom: 20, right: 20}} /\u003e` |\n| `theme` | **Object = DEFAULT_THEME**\u003cbr /\u003eCustomizes the theme of the chart. [See the theme object schema](#theme-configuration) |\n| `[dim]Name` | **String**\u003cbr /\u003eThe name to be used for the dimension axis label and tooltip. Defaults to the accessor key. |\n| `[dim]ZeroBased` | **boolean = false**\u003cbr /\u003eSets if the domain of the dimension should include zero. |\n| `[dim]Type` | **String**\u003cbr /\u003eOverrides the type of the dimension. Accepted values are: `linear`, `ordinal`, `time` and `log`. |\n| `[dim]Domain` | **Array**\u003cbr /\u003eOverrides the domain of the dimension. \u003cbr /\u003e`\u003cChart xRange={[-10, 10]}/\u003e` |\n| `[dim]Range` | **Array**\u003cbr /\u003eOverrides the range of the dimension. \u003cbr /\u003e`\u003cChart radiusRange={[1, 20]}/\u003e` \u003cbr /\u003e`\u003cChart fillRange={[\"green\", \"blue\"]}/\u003e` |\n| `[dim]Nice` | **boolean = false**\u003cbr /\u003eIf sets to `true` extends the domain of dimension to nice round values. |\n| `[dim]ShowTicks` | **boolean = true**\u003cbr /\u003eShow or hide the axis ticks for the dimension. |\n| `[dim]ShowGuides` | **boolean = true**\u003cbr /\u003eShow or hide the axis guides for the dimension. |\n| `[dim]ShowLabel` | **boolean = true**\u003cbr /\u003eShow or hide the axis label for the dimension. |\n| `[dim]TickSpace` | **Number**\u003cbr /\u003eOverrides the sugested space between axis ticks. For numbers and dates, the tick count on the axis is calculated by dividing the size of the axis by the `[dim]TickSpace` prop. For strings, all values become ticks on the axis, since there's no way to select a representative subset of them on a timeline.\u003cbr /\u003eThe tickSpace defaults to `50` for the `x` dimension and `40` for the `y` dimension. |\n| `[dim]TickCount` | **Number**\u003cbr /\u003eOverrides the number of ticks used on the axis of the dimension. For axes with datatypes string of number, the `[dim]TickCount` is automatically calculated by dividing the size of the axis by the `[dim]TickSpace` prop. For strings, all values become ticks on the axis, since there's no way to select a representative subset of them on a timeline. |\n| `[dim]TickFormat` | **Function**\u003cbr /\u003eOverrides the function used to format the values of the dimension on the axis and tooltip. \u003cbr /\u003e `\u003cChart xTickFormat={d =\u003e Math.round(d)}/\u003e` |\n| `[dim]TickOffset` | **Number**\u003cbr /\u003eOverrides the distance between the tick text and the axis. |\n| `[dim]LabelOffset` | **Number**\u003cbr /\u003eOverrides the distance between the axis label text and the axis. |\n\n### Configuring the Tooltip\n\nThe tooltip can be configured by passing additional props to the Chart. You can also provide your own React component to be displayed as the tooltip.\n\n| Prop | Description |\n| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `Tooltip` | **React Component**\u003cbr /\u003eOverride the tooltip component. |\n| `tooltipExtraDimensions` | **Array\\\u003c{accessor: string, name: string, format: function}\\\u003e**\u003cbr /\u003eAdd extra dimensions to the tooltip. You can also pass an array of strings if you plan to use the default name and formatters. |\n| `[dim]TooltipFormat` | **function**\u003cbr /\u003eOverride the value formatter for the specified key. |\n| `tooltipShowKeys` | **boolean = false**\u003cbr /\u003eShow or hide the keys row on the tooltip. |\n\n## Marks\n\nMarks can be freely composed inside of the `\u003cChart /\u003e`. Orama offers the following marks components: `\u003cLines /\u003e`, `\u003cPoints /\u003e`, `\u003cAreas /\u003e`, `\u003cGuides /\u003e`, `\u003cRanges /\u003e`, and `\u003cText /\u003e`.\n\nEach mark needs a data input and at least one dimension accessor defined. The input data for the mark can be an array of objects or an array of arrays of objects, the latter denoting grouped data such as multi-lines or multi-areas. Accepted values for the data objects are: `Number`, `String`, and `Date`.\n\n### Configuring Marks\n\nThe available visual dimensions that can be used to map data values to the marks are: `x`, `x0`, `x1`, `x2`, `y`, `y0`, `y1`, `y2`, `radius`, `fill`, `stroke`, `lineWidth`, `lineDash`, `alpha`, `text`, `textAlign`, `xOffset`, and `yOffset`. Not all dimensions are available in all marks, see below for the specific dimensions supported by each mark.\n\nAll marks can be configured with the following props:\n\n| Prop | Description |\n| ------------ | --------------------------------------------------------------------------------------------------------------------------- |\n| `data` | **Array**\u003cbr /\u003eThe input data for the mark component, see above for what format is accepted. |\n| `[dim]` | **String**\u003cbr /\u003eSets the key data accessor for the specified dimension. |\n| `[dim]Value` | **Any**\u003cbr /\u003eA constant to be used for the dimension. \u003cbr /\u003e`\u003cPoints radiusValue={10}/\u003e` \u003cbr /\u003e`\u003cLines alphaValue={0.25}/\u003e` |\n| `showHover` | **boolean = true**\u003cbr /\u003eSets the tooltip hover behaviour for the mark. |\n\n## `\u003cLines /\u003e`\n\nMark for drawing lines or multi-lines. To draw multi-lines, use an array of arrays as the data input.\n\nIt accepts the following dimensions: `x`, `y`, `fill`, `stroke`, `lineWidth`, `lineDash` and `alpha`.\n\n```js\nimport {Chart, Lines} from 'orama'\n\nconst data = [\n [\n {date: new Date('2010-01-01'), value: 10, name: 'A'},\n {date: new Date('2010-02-01'), value: 17, name: 'A'},\n {date: new Date('2010-03-01'), value: 9, name: 'A'},\n ],\n [\n {date: new Date('2010-01-01'), value: 16, name: 'B'},\n {date: new Date('2010-02-01'), value: 13, name: 'B'},\n {date: new Date('2010-03-01'), value: 15, name: 'B'},\n ],\n]\n\nconst chart = (\n \u003cChart\u003e\n \u003cLines data={data} x=\"date\" y=\"value\" stroke=\"name\" /\u003e\n \u003c/Chart\u003e\n)\n```\n\n## `\u003cAreas /\u003e`\n\nMark for drawing areas on the charts.\n\nIt accepts the following dimensions: `x`, `x0`, `y`, `y0`, `radius`, `fill`, `stroke`, `lineWidth`, `lineDash` and `alpha`.\n\nTo map the lower bound of the area to the data, use the `x0` or `y0` accessors.\n\n```js\nimport {Chart, Areas} from 'orama'\n\nconst data = [\n {date: new Date('2010-01-01'), value: 10},\n {date: new Date('2010-02-01'), value: 17},\n {date: new Date('2010-03-01'), value: 3},\n]\n\nconst chart = (\n \u003cChart yZeroBased\u003e\n \u003cAreas data={data} x=\"date\" y=\"value\" /\u003e\n \u003c/Chart\u003e\n)\n```\n\n## `\u003cPoints /\u003e`\n\nMark for drawing circles on the charts.\n\nIt accepts the following dimensions: `x`, `y`, `radius`, `fill`, `stroke`, `lineWidth`, `lineDash` and `alpha`.\n\n```js\nimport {Chart, Points} from 'orama'\n\nconst data = [\n {value1: 16, value2: 10, size: 1},\n {value1: 13, value2: 17, size: 5},\n {value1: 15, value2: 14, size: 10},\n]\n\nconst chart = (\n \u003cChart\u003e\n \u003cPoints data={data} x=\"value1\" y=\"value2\" radius=\"size\" /\u003e\n \u003c/Chart\u003e\n)\n```\n\n## `\u003cBars /\u003e`\n\nMark for drawing bars on the charts.\n\nIt accepts the following dimensions: `x`, `x1`, `x2`, `y`, `y1`, `y2`, `fill`, `stroke`, `lineWidth`, `lineDash` and `alpha`.\n\nYou can define the exact start and end of the bars by using the `x1`, `x2`, `y1` and `y2` dimensions.\n\n```js\nimport {Chart, Bars} from 'orama'\n\nconst data = [\n {type: 'type 1', value: 10},\n {type: 'type 2', value: 20},\n {type: 'type 3', value: -7},\n]\n\nconst chart = (\n \u003cChart yZeroBased\u003e\n \u003cBars data={data} x=\"type\" y=\"value\" /\u003e\n \u003c/Chart\u003e\n)\n```\n\n## `\u003cGuides /\u003e`\n\nMark for drawing vertical or horizontal guides on the charts.\n\nIt accepts the following dimensions: `x`, `y`, `stroke`, `lineWidth`, `lineDash` and `alpha`.\n\n```js\nimport {Chart, Guides} from 'orama'\n\nconst data = [{x: 1}, {x: 5}, {x: 8}, {x: 10}, {y: 1}, {y: 5}, {y: 8}, {y: 10}]\n\nconst chart = (\n \u003cChart yZeroBased\u003e\n \u003cGuides data={data} x=\"x\" y=\"y\" strokeValue=\"steelblue\" lineDashValue={[5, 5]} /\u003e\n \u003c/Chart\u003e\n)\n```\n\n## `\u003cRanges /\u003e`\n\nMark for drawing vertical or horizontal ranges on the charts.\n\nIt accepts the following dimensions: `x1`, `x2`, `y1`, `y2`, `fill`, `stroke`, `lineWidth`, `lineDash` and `alpha`.\n\n```js\nimport {Chart, Ranges} from 'orama'\n\nconst data = [\n {start: 1, end: 5},\n {start: 10, end: 20},\n {start: 40, end: 50},\n {start: 60, end: 80},\n]\n\nconst chart = (\n \u003cChart\u003e\n \u003cRanges data={data} x1=\"start\" x2=\"end\" y1=\"start\" y2=\"end\" fillValue=\"lightgray\" /\u003e\n \u003c/Chart\u003e\n)\n```\n\n## `\u003cText /\u003e`\n\nMark for text on the charts.\n\nIt accepts the following dimensions: `x`, `y`, `alpha`, `text`, `textAlign`, `xOffset` and `yOffset`.\n\n```js\nimport {Chart, Points, Text} from 'orama'\n\nconst data = [\n {date: new Date('2010-01-01'), value: 10, letter: 'A'},\n {date: new Date('2010-02-01'), value: 17, letter: 'B'},\n {date: new Date('2010-03-01'), value: 9, letter: 'C'},\n]\n\nconst chart = (\n \u003cChart\u003e\n \u003cPoints data={data} x=\"date\" y=\"value\" /\u003e\n \u003cText\n data={data}\n x=\"date\"\n y=\"value\"\n text=\"letter\"\n fillValue=\"white\"\n textAlignValue=\"center\"\n yOffsetValue={5}\n /\u003e\n \u003c/Chart\u003e\n)\n```\n\n## Theme configuration\n\nThe theme can be configured by passing a `theme` prop to the `\u003cChart /\u003e` component, which will be merged with the [default theme](https://github.com/kensho-technologies/orama/blob/01b204d61dde0058c79f5f286a57bf4ea7e3d566/src/defaults.js#L82-L130).\n\n```js\nimport {Chart, Points} from 'orama'\n\nconst data = [\n {date: new Date('2010-01-01'), value: 10},\n {date: new Date('2010-02-01'), value: 17},\n {date: new Date('2010-03-01'), value: 9},\n {date: new Date('2010-04-01'), value: 12},\n {date: new Date('2010-05-01'), value: 10},\n]\n\nconst theme = {\n textFill: 'white',\n backgroundFill: 'black',\n plotBackgroundFill: 'hsl(0, 0%, 20%)',\n guideStroke: 'hsl(0, 0%, 30%)',\n guideZeroStroke: 'hsl(0, 0%, 55%)',\n plotFill: 'white',\n}\n\nconst chart = (\n \u003cChart theme={theme}\u003e\n \u003cPoints data={data} x=\"date\" y=\"value\" /\u003e\n \u003c/Chart\u003e\n)\n```\n\n## Acknowledgment\n\nMade with ♥ by [Luis Carli](http://luiscarli.com)\n\n_This library is heavily influenced by the work of Mike Bostock, Hadley Wickham, and many other academics and practitioners from the data visualization community._\n\n## License\n\nLicensed under the Apache 2.0 License. Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.\n\nCopyright 2018 Kensho Technologies, LLC.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkensho-technologies%2Forama","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkensho-technologies%2Forama","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkensho-technologies%2Forama/lists"}