{"id":20893412,"url":"https://github.com/arction/lcjs-example-0701-bandsconstantlines","last_synced_at":"2025-03-12T19:14:28.949Z","repository":{"id":98723660,"uuid":"259618376","full_name":"Arction/lcjs-example-0701-bandsconstantlines","owner":"Arction","description":"A demo application showcasing using LightningChart JS to display Bands and Constant lines.","archived":false,"fork":false,"pushed_at":"2025-02-05T11:38:20.000Z","size":9722,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-05T12:32:04.438Z","etag":null,"topics":["band","constant-line","demo","example","javascript","lcjs","lightningchart-js","webgl"],"latest_commit_sha":null,"homepage":"https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0701-bandsConstantlines.html","language":"JavaScript","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/Arction.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2020-04-28T11:32:30.000Z","updated_at":"2025-02-05T11:36:20.000Z","dependencies_parsed_at":"2025-02-05T12:28:50.051Z","dependency_job_id":null,"html_url":"https://github.com/Arction/lcjs-example-0701-bandsconstantlines","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arction%2Flcjs-example-0701-bandsconstantlines","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arction%2Flcjs-example-0701-bandsconstantlines/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arction%2Flcjs-example-0701-bandsconstantlines/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arction%2Flcjs-example-0701-bandsconstantlines/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Arction","download_url":"https://codeload.github.com/Arction/lcjs-example-0701-bandsconstantlines/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243277498,"owners_count":20265352,"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","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":["band","constant-line","demo","example","javascript","lcjs","lightningchart-js","webgl"],"created_at":"2024-11-18T10:15:44.589Z","updated_at":"2025-03-12T19:14:28.936Z","avatar_url":"https://github.com/Arction.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JavaScript Chart Bands and Constant lines\n\n![JavaScript Chart Bands and Constant lines](bandsConstantLines-darkGold.png)\n\nThis demo application belongs to the set of examples for LightningChart JS, data visualization library for JavaScript.\r\n\r\nLightningChart JS is entirely GPU accelerated and performance optimized charting library for presenting massive amounts of data. It offers an easy way of creating sophisticated and interactive charts and adding them to your website or web application.\r\n\r\nThe demo can be used as an example or a seed project. Local execution requires the following steps:\r\n\r\n-   Make sure that relevant version of [Node.js](https://nodejs.org/en/download/) is installed\r\n-   Open the project folder in a terminal:\r\n\r\n          npm install              # fetches dependencies\r\n          npm start                # builds an application and starts the development server\r\n\r\n-   The application is available at _http://localhost:8080_ in your browser, webpack-dev-server provides hot reload functionality.\r\n\n\n## Description\n\nAlso known as Highlighters.\r\n\r\nThis example shows the basic usage of Bands and Constantlines in a XY Chart.\r\n\r\nBands and Constantlines are attached to the Axes of a XY Chart.\r\nBands and Constantlines can be interacted with mouse and touch controls.\r\n\r\nDepending where you touch on the band, you can move either end of the Band separately by touching the edge of the Band, or you can move the entire Band by touching the center of the Band.\r\n\r\nThey can be easily added to an Axis:\r\n\r\n```javascript\r\n// Add a Constantline to an Axis\r\nconst constantline = axis.addConstantLine()\r\n\r\n//Add a Band to an Axis\r\nconst band = axis.addBand()\r\n\r\n// By default, the Band and Constantline are placed above all Series in the Chart.\r\n// They can also be placed below all Series by passing *true* as argument when creating one.\r\nconst constantLline = axis.addConstantLine(false)\r\n\r\nconst band = axis.addBand(false)\r\n```\r\n\r\n## Positioning\r\n\r\nThe position of a Constantline can be set using the _setValue()_ API:\r\n\r\n```javascript\r\n// Set the position of a Constantline\r\nconstantline.setValue(50)\r\n```\r\n\r\nThe position and size of a Band is set by using the _setValueStart()_ and _setValueEnd()_ API:\r\n\r\n```javascript\r\n// Set the start value of a Band\r\nband.setValueStart(20)\r\n// Set the end value of a Band\r\nband.setValueEnd(40)\r\n```\r\n\r\n## Styling\r\n\r\nConstantlines can be styled by using the _setStrokeStyle()_ API:\r\n\r\n```javascript\r\n// Style the Constantline\r\nconstantline.setStrokeStyle(\r\n    new SolidLine({\r\n        thickness: 5\r\n        fillStyle: new SolidFill({\r\n            color: ColorHEX('#fff')\r\n        })\r\n    })\r\n)\r\n```\r\n\r\nBands can be styled by using the _setStrokeStyle()_ and _setFillStyle()_ API accordingly:\r\n\r\n```javascript\r\n// Style the Band border\r\nband.setStrokeStyle(\r\n    new SolidLine({\r\n        thickness: 5\r\n        fillStyle: new SolidFill({\r\n            color: ColorHEX('#fff')\r\n        })\r\n    })\r\n)\r\n// Style the Band's fillStyle\r\nband.setFillStyle(\r\n    new SolidFill({\r\n        color: ColorHEX('#fff')\r\n    })\r\n)\r\n```\r\n\n\n## API Links\n\n* [XY cartesian chart]\n* [Line series]\n* [HEX color factory]\n* [Bands]\n* [ConstantLines]\n\n\n## Support\n\nIf you notice an error in the example code, please open an issue on [GitHub][0] repository of the entire example.\r\n\r\nOfficial [API documentation][1] can be found on [LightningChart][2] website.\r\n\r\nIf the docs and other materials do not solve your problem as well as implementation help is needed, ask on [StackOverflow][3] (tagged lightningchart).\r\n\r\nIf you think you found a bug in the LightningChart JavaScript library, please contact sales@lightningchart.com.\r\n\r\nDirect developer email support can be purchased through a [Support Plan][4] or by contacting sales@lightningchart.com.\r\n\r\n[0]: https://github.com/Arction/\r\n[1]: https://lightningchart.com/lightningchart-js-api-documentation/\r\n[2]: https://lightningchart.com\r\n[3]: https://stackoverflow.com/questions/tagged/lightningchart\r\n[4]: https://lightningchart.com/support-services/\r\n\n© LightningChart Ltd 2009-2022. All rights reserved.\r\n\n\n[XY cartesian chart]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/classes/ChartXY.html\n[Line series]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/classes/LineSeries.html\n[HEX color factory]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/functions/ColorHEX.html\n[Bands]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/classes/Band.html\n[ConstantLines]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/classes/ConstantLine.html\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farction%2Flcjs-example-0701-bandsconstantlines","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farction%2Flcjs-example-0701-bandsconstantlines","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farction%2Flcjs-example-0701-bandsconstantlines/lists"}