{"id":41206784,"url":"https://github.com/pyatyispyatil/flame-chart-js","last_synced_at":"2026-01-22T22:09:55.325Z","repository":{"id":40262028,"uuid":"340648479","full_name":"pyatyispyatil/flame-chart-js","owner":"pyatyispyatil","description":"Extensible component for incredibly fast viewing of flame charts","archived":false,"fork":false,"pushed_at":"2024-06-07T13:34:59.000Z","size":3469,"stargazers_count":120,"open_issues_count":3,"forks_count":28,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-10-21T10:56:22.272Z","etag":null,"topics":["canvas","chart","flame","flame-chart-js","frontend","graph","performance","react","timeline","vanilla","vue"],"latest_commit_sha":null,"homepage":"https://pyatyispyatil.github.io/flame-chart-js/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pyatyispyatil.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":"pyatyispyatil","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2021-02-20T12:23:34.000Z","updated_at":"2025-09-24T13:31:13.000Z","dependencies_parsed_at":"2023-02-19T01:46:09.764Z","dependency_job_id":"74e94ced-331c-4edb-a9fc-c55ece72d784","html_url":"https://github.com/pyatyispyatil/flame-chart-js","commit_stats":{"total_commits":205,"total_committers":7,"mean_commits":"29.285714285714285","dds":0.4585365853658536,"last_synced_commit":"096773686ca188b634c19cc481dd31019a3c8333"},"previous_names":[],"tags_count":51,"template":false,"template_full_name":null,"purl":"pkg:github/pyatyispyatil/flame-chart-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyatyispyatil%2Fflame-chart-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyatyispyatil%2Fflame-chart-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyatyispyatil%2Fflame-chart-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyatyispyatil%2Fflame-chart-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pyatyispyatil","download_url":"https://codeload.github.com/pyatyispyatil/flame-chart-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyatyispyatil%2Fflame-chart-js/sbom","scorecard":{"id":751120,"data":{"date":"2025-08-11","repo":{"name":"github.com/pyatyispyatil/flame-chart-js","commit":"ec9d1e24ddc4531fe5783c70aad1c80824594f6f"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.8,"checks":[{"name":"Code-Review","score":0,"reason":"Found 2/30 approved changesets -- score normalized to 0","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":"Maintained","score":0,"reason":"0 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","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":"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":"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":"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":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/ci.yml:1","Warn: no topLevel permission defined: .github/workflows/github-pages.yml:1","Warn: no topLevel permission defined: .github/workflows/tagged-release.yml:1","Info: no jobLevel write permissions found"],"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":"Pinned-Dependencies","score":5,"reason":"dependency not pinned by hash detected -- score normalized to 5","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/pyatyispyatil/flame-chart-js/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/pyatyispyatil/flame-chart-js/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/github-pages.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/pyatyispyatil/flame-chart-js/github-pages.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/github-pages.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/pyatyispyatil/flame-chart-js/github-pages.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/github-pages.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/pyatyispyatil/flame-chart-js/github-pages.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/tagged-release.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/pyatyispyatil/flame-chart-js/tagged-release.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tagged-release.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/pyatyispyatil/flame-chart-js/tagged-release.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tagged-release.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/pyatyispyatil/flame-chart-js/tagged-release.yml/master?enable=pin","Info:   0 out of   6 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   2 third-party GitHubAction dependencies pinned","Info:   3 out of   3 npmCommand dependencies pinned"],"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":"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":"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: MIT License: 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":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"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":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 2 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":"18 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-prr3-c3m5-p7q2","Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","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-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"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-22T20:24:47.862Z","repository_id":40262028,"created_at":"2025-08-22T20:24:47.863Z","updated_at":"2025-08-22T20:24:47.863Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28672629,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-22T20:48:19.482Z","status":"ssl_error","status_checked_at":"2026-01-22T20:48:14.968Z","response_time":144,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["canvas","chart","flame","flame-chart-js","frontend","graph","performance","react","timeline","vanilla","vue"],"created_at":"2026-01-22T22:09:54.377Z","updated_at":"2026-01-22T22:09:55.319Z","avatar_url":"https://github.com/pyatyispyatil.png","language":"TypeScript","funding_links":["https://patreon.com/pyatyispyatil"],"categories":[],"sub_categories":[],"readme":"# flame-chart-js\n\n[![npm flame-chart-js package](https://img.shields.io/npm/v/flame-chart-js)](https://www.npmjs.com/package/flame-chart-js)\n\n![image](https://github.com/pyatyispyatil/flame-chart-js/assets/4976306/0e48f413-ead8-46f9-9fb6-9da3fbb2b44e)\n\n### Installation\n\n`npm i flame-chart-js`\n\n### Demo\n\nhttps://pyatyispyatil.github.io/flame-chart-js\n\n### Roadmap\n\nYou can find some [plans on the wiki](https://github.com/pyatyispyatil/flame-chart-js/wiki/Roadmap)\n\n### Usage\n\n#### Initialization\n\nYou can ignore any of the marks, data, or waterfall arguments to initialize only the items you want. The flame chart will automatically adjust and hide unused plugins.\n\n```js\nimport { FlameChart } from 'flame-chart-js';\n\nconst canvas = document.getElementById('canvas');\n\ncanvas.width = 800;\ncanvas.height = 400;\n\nconst flameChart = new FlameChart({\n    canvas, // mandatory\n    data: [\n        {\n            name: 'foo',\n            start: 300,\n            duration: 200,\n            type: 'task',\n            children: [\n                {\n                    name: 'foo',\n                    start: 310,\n                    duration: 50,\n                    type: 'sub-task',\n                    color: '#AA0000',\n                },\n            ],\n        },\n    ],\n    marks: [\n        {\n            shortName: 'DCL',\n            fullName: 'DOMContentLoaded',\n            timestamp: 500,\n        },\n    ],\n    waterfall: {\n        /* ... */\n    },\n    timeseries: [/* ... */],\n    timeframeTimeseries: [/* ... */],\n    colors: {\n        task: '#FFFFFF',\n        'sub-task': '#000000',\n    },\n    settings: {\n        hotkeys: {\n          active: true,  // enable navigation using arrow keys\n          scrollSpeed: 0.5, // scroll speed (ArrowLeft, ArrowRight)\n          zoomSpeed: 0.001, // zoom speed (ArrowUp, ArrowDown, -, +)\n          fastMultiplayer: 5, // speed multiplier when zooming and scrolling (activated by Shift key)\n        },\n        options: {\n            tooltip: () =\u003e {\n                /*...*/\n            }, // see section \"Custom Tooltip\" below\n            timeUnits: 'ms',\n        },\n        styles: customStyles, // see section \"Styles\" below\n    },\n});\n\nflameChart.on('select', (node, type) =\u003e {\n    /*...*/\n});\n```\n\n#### Public methods\n\n```ts\nclass FlameChart {\n    // set zoom, which start argument is a left bound and end argument is a right bound\n    setZoom = (start: number, end: number) =\u003e boolean\n\n    // set only position of the flame-chart\n    setFlameChartPosition = ({ x: number, y: number }) =\u003e void 0\n\n    // render all when animationFrame fired\n    render = () =\u003e void 0\n\n    // set new data for the flame-chart\n    setNodes = (nodes: FlameChartNodes) =\u003e void 0\n\n    // set marks for marks plugin\n    setMarks = (data: Marks) =\u003e void 0\n\n    // set chart data for timeseries plugin\n    setTimeseries = (data: Timeseries) =\u003e void 0\n\n    // resize canvas\n    resize = (width: number, height: number) =\u003e void 0\n\n    // apply new settings, which includes styles or something else\n    setSettings = (settings: Object) =\u003e void 0\n\n    // enable/disable navigation using arrow keys\n    hotkeys = (status: boolean) =\u003e void 0\n}\n```\n\n#### Usage with plugins\n\n```ts\nimport { FlameChartContainer, TimeGridPlugin, MarksPlugin, FlameChartPlugin } from 'flame-chart-js';\n\nconst canvas = document.getElementById('canvas');\n\ncanvas.width = 800;\ncanvas.height = 400;\n\nconst flameChart = new FlameChartContainer({\n    canvas, // mandatory\n    plugins: [\n        new TimeGridPlugin({ styles: timeGridPluginStyles }),\n        new MarksPlugin({ data: marks }),\n        new FlameChartPlugin({ data: flameChartData1, colors: flameChartColors, name: 'flameChart1' }),\n        new FlameChartPlugin({ data: flameChartData2, colors: flameChartColors, name: 'flameChart2' }),\n    ],\n});\n```\n\n#### Usage with React\n\nDefault flame chart:\n```tsx\nimport { FlameChartComponent } from 'flame-chart-js/react';\n\nexport const DefaultFlameChart = ({\n    flameChartData,\n    stylesSettings,\n    onSelect,\n}) =\u003e {\n    const settings = useMemo(\n        () =\u003e ({\n            styles: stylesSettings,\n        }),\n        [stylesSettings],\n    );\n\n    return (\n        \u003cFlameChartComponent\n            data={flameChartData}\n            settings={settings}\n            onSelect={onSelect}\n            className={styles.flameChart}\n        /\u003e\n    );\n};\n```\n\nCustom flame chart:\n```tsx\nimport { FlameChartContainerComponent } from 'flame-chart-js/react';\n\nconst CustomFlameChart = ({ flameChartData, stylesSettings }) =\u003e {\n  const plugins = useMemo(() =\u003e {\n    return [\n      new TimeGridPlugin(),\n      new TogglePlugin('FlameChart 1'),\n      new FlameChartPlugin({\n        name: 'flameChart1',\n        data: flameChartData[0],\n      }),\n      new TogglePlugin('FlameChart 2'),\n      new FlameChartPlugin({\n        name: 'flameChart2',\n        data: flameChartData[1],\n      }),\n    ];\n  }, [flameChartData]);\n\n  const settings = useMemo(\n    () =\u003e ({\n      styles: stylesSettings,\n    }),\n    [stylesSettings],\n  );\n\n  return \u003cFlameChartContainerComponent settings={settings} plugins={plugins} className={styles.flameChart} /\u003e;\n};\n```\n\n#### Settings\n\n##### Patterns\n\nFor each span, it is possible to set their display style. \nTo do this, you need to define these styles using pattern settings.\n\n```ts\nconst flameChart = new FlameChart({\n    settings: {\n        patterns: [\n            {\n                name: 'your-pattern-name',\n                pattern: 'stripes',\n                config: { /* ... */ }\n            }\n        ]\n    }\n});\n```\n\nNext, you need to specify the name of the created pattern in one of the nodes in data.\n```ts\nconst node = {\n    name: 'your-node-name',\n    start: 0,\n    duration: 100,\n    type: 'your-node-type',\n    pattern: 'your-pattern-name',\n}\n```\n\nor in waterfall interval\n```ts\nconst interval = {\n    name: 'your-interval-name',\n    type: 'block',\n    start: 'your-start-timing-name',\n    end: 'your-end-timing-name',\n    pattern: 'your-pattern-name',\n}\n```\n\n##### Default patterns\n\n###### Stripes\n```ts\ntype StripesPattern = {\n    type: 'stripes',\n    name: string, // your pattern name\n    config: {\n        color?: string, // color of the stripes\n        background?: string, // background color\n        lineWidth?: number, // width of the stripes\n        spacing?: number, // spacing between stripes\n        angle?: number, // angle of the stripes (for example: 90 - vertical, 45 - diagonal, 180 - horizontal)\n        dash: number[], // dash of the stripes (for example: [10, 5] - 10px line, 5px space)\n    }    \n}\n```\n###### Dots\n```ts\ntype DotsPattern = {\n    type: 'dots',\n    name: string, // your pattern name\n    config: {\n        color?: string; // color of the dots\n        background?: string; // background color\n        size?: number; // diameter of the dots\n        rows?: number; // number of rows\n        align?: 'center' | 'top' | 'bottom'; // align of the dots\n        spacing?: number; // spacing between dots\n        verticalSpicing?: number; // vertical spacing between rows (default = spacing)\n        horizontalSpicing?: number; // horizontal spacing between dots (default = spacing)\n    }\n}\n```\n\n###### Gradient\n```ts\ntype GradientPattern = {\n    type: 'gradient',\n    name: string, // your pattern name\n    config: {\n        colors: {\n            offset: number; // offset of the color (from 0 to 1) \n            color: string // color of the gradient point\n        }[]\n    }\n}\n```\n\n###### Triangles\n```ts\ntype TrianglesPattern = {\n    type: 'triangles',\n    name: string, // your pattern name\n    config: {\n        color?: string; // color of the triangles\n        background?: string; // background color\n        width?: number; // width of the triangles\n        height?: number; // height of the triangles\n        align?: 'center' | 'top' | 'bottom'; // align of the triangles\n        // direction of the triangles (the direction where the vertex of the triangle will face)\n        direction?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n        spacing?: number; // spacing between triangles\n    }\n}\n```\n\n###### Combined\nA combined pattern will allow you to combine several patterns.\nFor each pattern, you can use transparency using the color or \nbackground config option (`color: 'rgba(75, 25, 10, 0.5)'`) and then\nyou will get a beautiful layering of layers on top of each other.\n```ts\ntype CombinedPattern = {\n    type: 'combined',\n    name: string, // your pattern name\n    config: Array\u003cStripesPattern | DotsPattern | GradientPattern | TrianglesPattern\u003e\n}\n```\n\n###### Custom\nYou can also create your own pattern.\n\n```ts\nimport FlameChart from './flame-chart';\n\nconst flameChart = new FlameChart({\n    settings: {\n        patterns: [\n            {\n                name: 'your-pattern-name',\n                creator: (engine) =\u003e {\n                    const canvas = document.createElement('canvas')!;\n                    const ctx = canvas.getContext('2d')!;\n                    \n                    // set canvas size\n                    canvas.width = 20;\n                    canvas.height = engine.blockHeight;\n                    \n                    // draw something on canvas\n                    ctx.fillStyle = 'red';\n                    ctx.fillRect(0, 0, 10, 10);\n                    \n                    return {\n                        pattern: engine.ctx.createPattern(canvas, 'repeat')!,\n                    }\n                } \n            }\n        ]\n    }\n});\n```\n\n##### Styles\n\nYou can override whatever style you want. For example:\n\n```ts\nconst flameChart = new FlameChart({\n    settings: {\n        styles: {\n            'main': {\n                'blockHeight': 20\n            }\n        }\n    }\n});\n```\n\nAfter applying this style, the blocks of the flame chart will be 20 pixels high instead of 16 pixels.\n\nTo learn more about styles, you can take a look at [the example](https://pyatyispyatil.github.io/flame-chart-js) - \nall styles will be available in one of the dropdowns on the left side of the interface.\n\n##### Custom Tooltip\n\nYou can override or prevent the tooltip render by defining this within the settings objet.\n\n```ts\nconst flameChart = new FlameChart({\n    settings: {\n        options: {\n            tooltip: undefined\n        }\n    }\n});\n```\n\nFor example:\n\n```ts\n// prevent tooltip render\nchart.setSettings({ options: { tooltip: false } });\n\n// override tooltip render\nchart.setSettings({\n    options: {\n        tooltip: (data, renderEngine, mouse) =\u003e undefined,\n    },\n});\n```\n\n#### [Data types](https://github.com/pyatyispyatil/flame-chart-js/blob/master/src/types.ts#L1)\n\n```ts\ntype Mark = {\n    shortName: string;\n    fullName: string;\n    timestamp: number;\n    color: string;\n};\n\ntype Marks = Array\u003cMark\u003e;\n\ntype Node = {\n    name: string; // node name\n    start: number; // node start time\n    duration: number; // node duration\n    type?: string; // node type (use it for custom colorization)\n    color?: string; // node color (use it for current node colorization)\n    pattern?: string; // node pattern (use it for customize node view - see section Patterns)\n    badge?: string; // node badge color (if present, the badge will be displayed in the upper left corner of the node)\n    children?: Array\u003cNode\u003e; // node children (same structure as for node)\n};\n\ntype Nodes = Array\u003cNode\u003e;\n\ntype WaterfallItems = Array\u003c{\n    name: string;\n    intervals: string | WaterfallInterval; // if you use a string, then the intervals will be taken from the array of intervals\n    timing: {\n        [string: key]: number; // The timing name must match the start and end fields within the described intervals\n    };\n}\u003e;\n\ntype WaterfallInterval = {\n    name: string;\n    color: string;\n    pattern?: string; // interval pattern (use it for customize interval view - see section Patterns)\n    type: 'block' | 'line';\n    start: string; // timing name\n    end: string; // timing name\n    // if true, then the interval will be displayed on the timeframe chart, \n    // if color string, then the interval will be displayed on the timeframe chart with the specified color (same colors will be merged)\n    timeframeChart: boolean | string;\n};\n\ntype WaterfallIntervals = {\n    [string: intervalName]: WaterfallInterval;\n};\n\ntype Waterfall = {\n    items: WaterfallItems;\n    intervals: WaterfallIntervals;\n};\n\ntype TimeseriesChart = {\n  points: [number, number][]; // data points to render - the first element of the internal array is the timestamp and the second element is the value of the point\n  group?: string; // group to calculate common minimum, maximum for multiple charts\n  units?: string; // points to be used for grouping (if the group field is missing) and for rendering the tooltip (for example '%', 'mb', 'kb/s')\n  name?: string; // the name will be used to display the tooltip\n  style?: Partial\u003cChartStyle\u003e;\n  min?: number; // if absent, then min and max will be calculated from points\n  max?: number; // same\n  dynamicMinMax?: boolean; // dynamically calculate minimum and maximum based on current zoom level \n};\n\ntype Timeseries = TimeseriesChart[];\n```\n\n#### Updating\n\n```js\nflameChart.setData(newData);\nflameChart.setMarks(newMarks);\nflameChart.setWaterfall(newWaterfall);\nflameChart.setTimeseries(newTimeseries);\n```\n\n#### Scaling\n\n```js\nwindow.addEventListener('resize', () =\u003e {\n    flameChart.resize(window.innerWidth, window.innerHeight);\n});\n```\n\n#### Plugins\n\n##### You can create your own plugin\n\n```ts\nimport { UIPlugin } from 'flame-chart-js';\n\nclass MyPlugin extends UIPlugin {\n    constructor({ name = 'myOwnPlugin' }) {\n        super(name);\n    }\n\n    height = 100; // height of the plugin in pixels\n\n    // this method will be called on each render\n    override render() {\n        // do something\n        this.renderEngine.addRect({ color: 'red', x: 10, y: 10, w: 20 });\n    }\n}\n```\n\n## Local Development\n\n```bash\nnpm i \u0026\u0026 npm start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpyatyispyatil%2Fflame-chart-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpyatyispyatil%2Fflame-chart-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpyatyispyatil%2Fflame-chart-js/lists"}