{"id":18332918,"url":"https://github.com/anychart/chart-editor","last_synced_at":"2025-06-10T10:08:50.773Z","repository":{"id":44164945,"uuid":"123373943","full_name":"AnyChart/chart-editor","owner":"AnyChart","description":"AnyChart Editor is an Extension of AnyChart that allows to configure charts via UI","archived":false,"fork":false,"pushed_at":"2022-12-08T04:01:19.000Z","size":1895,"stargazers_count":11,"open_issues_count":4,"forks_count":2,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-04-06T03:33:55.536Z","etag":null,"topics":["anychart","chart-component","chart-library","charting","charting-library","charts"],"latest_commit_sha":null,"homepage":"https://docs.anychart.com/Chart_Editor/Overview","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/AnyChart.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}},"created_at":"2018-03-01T02:58:51.000Z","updated_at":"2024-11-08T01:01:23.000Z","dependencies_parsed_at":"2023-01-24T09:45:38.309Z","dependency_job_id":null,"html_url":"https://github.com/AnyChart/chart-editor","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnyChart%2Fchart-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnyChart%2Fchart-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnyChart%2Fchart-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnyChart%2Fchart-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnyChart","download_url":"https://codeload.github.com/AnyChart/chart-editor/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnyChart%2Fchart-editor/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259053539,"owners_count":22798438,"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":["anychart","chart-component","chart-library","charting","charting-library","charts"],"created_at":"2024-11-05T19:40:37.857Z","updated_at":"2025-06-10T10:08:50.746Z","avatar_url":"https://github.com/AnyChart.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[\u003cimg src=\"https://cdn.anychart.com/images/logo-transparent-segoe.png?2\" width=\"234px\" alt=\"AnyChart - Robust JavaScript/HTML5 Chart library for any project\"\u003e](https://www.anychart.com)\n\nAnyChart Chart Editor\n=========\n\nIntuitive and easy to use web application that allows you to create and work with [AnyChart JavaScript Charts](https://www.anychart.com).\n\n## Table of Contents\n\n* [Download and Install](#download-and-install)\n* [Getting started](#getting-started)\n* [Using](#using)\n* [Building](#building)\n* [Contacts](#contacts)\n* [Links](#links)\n* [License](#license)\n\n## Download and install\n\nYou can download all project binaries from [dist](https://github.com/AnyChart/chart-editor/tree/master/dist) folder.\n\n## Getting started\n\nTo use AnyChart Chart Editor on a web page you should include AnyChart library first:\n```html\n\u003c!-- anychart --\u003e\n\u003cscript src=\"https://cdn.anychart.com/releases/v8/js/anychart-bundle.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- anychart css --\u003e\n\u003clink href=\"https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css\" type=\"text/css\" rel=\"stylesheet\"\u003e\n\u003clink href=\"https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css\" type=\"text/css\" rel=\"stylesheet\"\u003e\n\n\u003c!-- Include this if you plan to use Maps --\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js\"\u003e\u003c/script\u003e\n```\n\nIf you want to have any theming options on the Theming tab of Visual appearance step of Chart Editor you should include desired themes:\n```html\n\u003cscript src=\"https://cdn.anychart.com/releases/v8/themes/dark_blue.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.anychart.com/releases/v8/themes/dark_glamour.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.anychart.com/releases/v8/themes/light_glamour.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.anychart.com/releases/v8/themes/coffee.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.anychart.com/releases/v8/themes/monochrome.min.js\"\u003e\u003c/script\u003e\n```\n \nAnd at last include Chart Editor's binaries that you can find in a project's [dist](https://github.com/AnyChart/chart-editor/tree/master/dist) folder.\n```html\n\u003c!-- anychart chart editor --\u003e\n\u003clink href=\"anychart-editor.min.css\" type=\"text/css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"anychart-editor.min.js\"\u003e\u003c/script\u003e\n```\n\nNow you can create Chart Editor instance and render it to dom container. \n```javascript\nanychart.onDocumentReady(function() {\n  // Create chart editor instance\n  var editor = anychart.editor();\n\n  // Render to div#container\n  editor.render(document.getElementById(\"container\"));\n\n  // Listen 'complete' event to get result code\n  editor.listen('editorComplete', function() {\n    console.log(editor.getJavascript());\n  });\n});\n```\n\nThe full working example you can find in index.html and index.js from [dist](https://github.com/AnyChart/chart-editor/tree/master/dist) folder.\n\n## Using\n\n#### Render options\nMethod | Description\n--- | ---\n*render()* | Renders the component.  If a parent element is supplied, the component's element will be appended to it.  If there is no optional parent element and the element doesn't have a parentNode then it will be appended to the document body.\n*decorate()* | Decorates the element for the UI component.\n*dialogRender()* | Renders the Chart Editor as modal dialog. To set dialog visible or hidden use *dialogVisible(Boolean)* method.\n\n#### Data\nYou can pass your data to Chart Editor using user interface of the Prepare Data step. Or you can pass data using data() method:\n```javascript\n// Pass only data\neditor.data([\n    {name: 'Jan', val1: 10, price: 20.5, amount: 100},\n    {name: 'Feb', val1: 20, price: 30, amount: 200},\n    {name: 'Mar', val1: 5, price: 115, amount: 10}\n]);\n\n// Pass data and some settings\neditor.data({\n    data: [\n        {name: 'Jan', val1: 10, price: 20.5, amount: 100},\n        {name: 'Feb', val1: 20, price: 30, amount: 200},\n        {name: 'Mar', val1: 5, price: 115, amount: 10}\n    ],\n    chartType: 'column',\n    fieldNames: {\n      name: 'Month',\n      val1: 'Value 1'\n    },\n    title: 'Awesome Chart'\n});\n\n// You also may want to disable one or more of the four steps\neditor.step('data', false);\n\n// Or disable some tabs on Appearance or Export steps\neditor.step('appearance').tab('contextMenu', false);\n```\n\n\n#### Result code\nAfter all you can get the result code of a chart that you have configured. You can get code by these methods:\n\nMethod | Description | Arguments\n--- | --- | ---\n*getJavascript()* | Returns JS code string that creates a configured chart. | opt_outputOptions - object with configuration options.\n*getJson()* | Returns configured chart in JSON representation. | -\n*getXml()* | Returns configured chart in XML representation. | -\n \n\n## Building\nIf you want to build your own binaries from project's source code first you should install remaining dependencies using following command\n```\nnpm install\n```\n\nTo compile chart editor from source run following command\n```\n./bin/build_release.sh\n```\nIn this case you can find builded binaries in a *dist* folder.\n\nOr you can build by build.sh script. In this case you can find builded binaries in a *out* folder.\n\n\nBuild everything\n```bash\n./bin/build.sh\n\n#! or using npm\nnpm run build\n```\n\n\nBuild only javascript binary\n```bash\n./bin/build.sh compile\n\n#! or using npm \nnpm run compile\n```\n\n\nBuild only css\n```bash\n./bin/build.sh css\n\n#! or using npm \nnpm run css\n```\n\nBuild only dependencies \n```bash\n./bin/build.sh deps\n\n#! or using npm \nnpm run deps\n```\n\n## Contacts\n\n* Web: [www.anychart.com](https://www.anychart.com)\n* Email: [contact@anychart.com](mailto:contact@anychart.com)\n* Twitter: [anychart](https://twitter.com/anychart)\n* Facebook: [AnyCharts](https://www.facebook.com/AnyCharts)\n* LinkedIn: [anychart](https://www.linkedin.com/company/anychart)\n\n## Links\n\n* [Report Issues](https://github.com/AnyChart/AnyChart-React/issues)\n* [AnyChart Website](https://www.anychart.com)\n* [Download AnyChart](https://www.anychart.com/download/)\n* [AnyChart Licensing](https://www.anychart.com/buy/)\n* [AnyChart Support](https://www.anychart.com/support/)\n* [AnyChart Playground](https://playground.anychart.com)\n* [AnyChart Documentation](https://docs.anychart.com)\n* [AnyChart API Reference](https://api.anychart.com)\n* [AnyChart Sample Solutions](https://www.anychart.com/solutions/)\n* [AnyChart Integrations](https://www.anychart.com/integrations/)\n\n## License\n\n[© AnyChart.com - JavaScript charts](https://www.anychart.com). All rights reserved.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanychart%2Fchart-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanychart%2Fchart-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanychart%2Fchart-editor/lists"}