{"id":14959621,"url":"https://github.com/balexandermunoz/draggable-charts","last_synced_at":"2025-10-06T09:30:30.089Z","repository":{"id":232281453,"uuid":"783435638","full_name":"balexandermunoz/draggable-charts","owner":"balexandermunoz","description":"Streamlit component that displays a line chart with draggable points. Users can click and drag points on the chart to adjust their values. The updated data of the chart is returned.","archived":false,"fork":false,"pushed_at":"2024-06-28T17:40:52.000Z","size":538,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-16T04:51:18.986Z","etag":null,"topics":["chartjs","python","react-components","streamlit","streamlit-component","visualization"],"latest_commit_sha":null,"homepage":"https://pypi.org/project/draggable-line-chart/","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/balexandermunoz.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":"2024-04-07T21:41:19.000Z","updated_at":"2024-12-06T16:47:55.000Z","dependencies_parsed_at":"2024-04-08T23:12:54.072Z","dependency_job_id":"51bfb788-b88b-42e5-a219-e7221b1c2ad0","html_url":"https://github.com/balexandermunoz/draggable-charts","commit_stats":null,"previous_names":["balexandermunoz/draggable-line-chart","balexandermunoz/draggable-charts"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balexandermunoz%2Fdraggable-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balexandermunoz%2Fdraggable-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balexandermunoz%2Fdraggable-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balexandermunoz%2Fdraggable-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/balexandermunoz","download_url":"https://codeload.github.com/balexandermunoz/draggable-charts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235515427,"owners_count":19002481,"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":["chartjs","python","react-components","streamlit","streamlit-component","visualization"],"created_at":"2024-09-24T13:20:15.724Z","updated_at":"2025-10-06T09:30:24.744Z","avatar_url":"https://github.com/balexandermunoz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# draggable-charts\n\nStreamlit component that displays a interactive charts with draggable points. Users can click and drag points on the chart to adjust their values. The updated data of the chart is returned.\n\n## Installation instructions\n\n```sh\npip install draggable-charts\n```\n\n\n## Usage\n\n## Line Chart:\nDisplays a line chart with draggable points in one axis.\n- `data` (`pd.Series`, `pd.DataFrame`): The data to display in the chart. Index is always X values and columns are Y values. Columns should have only numeric values. Series.name is the trace name. If a DataFrame is provided, the column names are the trace names.\n\n- `options` (`dict[str: any]`, optional): A dictionary of options for the chart. See [Options](#options) for more details.\n\n- `on_change` (`Callable`, optional): A callback function that is called with the new data of the chart after user interaction.\n\n- `args` (`tuple`, optional): The arguments to pass to the callback function.\n\n- `kwargs` (`dict`, optional): The keyword arguments to pass to the callback function.\n\n- `key` (`str`, optional): An optional string to use as the unique key for the widget. If this is None, and the component's arguments are changed, the component will be re-mounted in the Streamlit frontend and lose its current state.\n\n#### Returns\n\n- `new_data` (`pd.Series`, `pd.DataFrame`): The data of the chart after user interaction. The format is the same as the input format.\n\n\n## Scatter Chart:\nDisplays a scatter chart with draggable points. Axes can be categorical or numerical.\n- `data` (`dict`): The data to display in the chart. Control points will be added in between. It has the form \n`{\"trace 1\": {\"x\": [1,2,3], \"y\": [1, 4, 9]},\n    \"trace 2\": ...\n    }`\n- `options` (`dict`): A dictionary of options for the chart. See [Options](#options) for more details.\n\n- `on_change` (`Callable`, optional): A callback function that is called with the new data of the chart after user interaction.\n\n- `args` (`tuple`, optional): The arguments to pass to the callback function.\n\n- `kwargs` (`dict`, optional): The keyword arguments to pass to the callback function.\n\n- `key` (`str`, optional): An optional string to use as the unique key for the widget. If this is None, and the component's arguments are changed, the component will be re-mounted in the Streamlit frontend and lose its current state.\n\n#### Returns\n\n- `new_data` (`dict[str, dict]`): The data of the chart after user interaction. The format is the same as the input format.\n\n\n## Bezier Chart:\nDisplays a quadratic Bezier chart with draggable points to adjust the curvature with one control point per each two data points.\n- `data` (`dict`): The data to display in the chart. It has the form \n`{\"trace 1\": {\"x\": [1,2,3], \"y\": [1, 4, 9]},\n    \"trace 2\": ...\n    }`\n- `options` (`dict`): A dictionary of options for the chart. See [Options](#options) for more details.\n\n- `on_change` (`Callable`, optional): A callback function that is called with the new data of the chart after user interaction.\n\n- `args` (`tuple`, optional): The arguments to pass to the callback function.\n\n- `kwargs` (`dict`, optional): The keyword arguments to pass to the callback function.\n\n- `key` (`str`, optional): An optional string to use as the unique key for the widget. If this is None, and the component's arguments are changed, the component will be re-mounted in the Streamlit frontend and lose its current state.\n\n#### Returns\n\n- `new_data` (`dict[str, dict]`): The data of the interpolated Bezier curve after user interaction. The format is the same as the input format.\n\n## Cuadratic Bezier Chart:\nDisplays a cubic Bezier chart with draggable points to adjust the curvature with two control point per each two data points. The movement between control points is attached to create a smooth interaction.\n- `data` (`dict`): The data to display in the chart. It has the form \n`{\"trace 1\": {\"x\": [1,2,3], \"y\": [1, 4, 9]},\n    \"trace 2\": ...\n    }`\n- `options` (`dict`): A dictionary of options for the chart. See [Options](#options) for more details.\n\n- `on_change` (`Callable`, optional): A callback function that is called with the new data of the chart after user interaction.\n\n- `args` (`tuple`, optional): The arguments to pass to the callback function.\n\n- `kwargs` (`dict`, optional): The keyword arguments to pass to the callback function.\n\n- `key` (`str`, optional): An optional string to use as the unique key for the widget. If this is None, and the component's arguments are changed, the component will be re-mounted in the Streamlit frontend and lose its current state.\n\n#### Returns\n\n- `new_data` (`dict[str, dict]`): The data of the interpolated Bezier curve after user interaction. The format is the same as the input format.\n\n\n\n## Options:\nAll options are sent in the same dictionary `options`. There are common options that applies to the canvas, and specific options applied to traces. Canvas options are:\n\n### Canvas options:\n  - `'title'`: The title of the chart.\n  - `'x_label'`: Text in x-axis.\n  - `'y_label'`: Text in y-axis.\n  - `'x_grid'`: A boolean indicating whether to display the grid for the x-axis.\n  - `'y_grid'`: A boolean indicating whether to display the grid for the y-axis.\n  - `'legend'`: A boolean indicating whether to display the legend. If not provided, the legend will be displayed by default.\n  - `'legend_position'`: The position of the legend. It can be `'top'`, `'left'`, `'bottom'`, or `'right'`.\n  - `'legend_align'`: The alignment of the legend. It can be `'start'`, `'center'`, or `'end'`.\n  If not provided, default options will be used.\n  - `'labels'`: Default {}. Dictionary with a map from original labels to custom labels.\n  - `'x_format'`: Default None. A printf-style format string controlling how the canvas should display X numeric ticks. Check [D3 Format](https://d3js.org/d3-format#locale_format).\n  - `'y_format'`: Default `\".2~s\"`. A printf-style format string controlling how the canvas should display Y numeric ticks.\n\n  ### Chart options:\n  - `'show_line`: Boolean that indicates whether to display the line connecting the points on the graph.\n  - `'colors'`: A list of colors for the chart traces. Each color must be a hexadecimal color code. The order of the colors corresponds to the order of the columns.\n  - `'tension'`: The tension of the lines. 0 gives straight lines, 0.5 gives smooth lines. Default is 0.3.\n  - `'fill_gaps'`: A Boolean that indicates whether NaN values are filled in the lines. If False, lines will be broken at NaN values. Default is False.\n  - `'fixed_lines'`: List of column names that cannot be dragged. Default is an empty list.\n  - `'border_dash'`: Default [(0,0)]. A list of tuples with length and spacing of dashes per every trace. It will repeat if more traces than tuples are provided.\n  - `'point_radius'`: Default [3]. The radius of the point shape per trace. If set to 0, the point is not rendered. \n  - `'fill'`: Default [False]. Boolean or int. Fill area between one dataset and origin or one dataset to another. Check [Fill Options](https://www.chartjs.org/docs/latest/charts/area.html#filling-modes).\n\n\n## Example\n\n```python\nimport streamlit as st\n\nfrom draggable_charts import scatter_chart\n\nst.subheader(\"Scatter\")\nx_cat = [\"A\", \"B\", \"C\", \"D\", \"E\"]\nscatter_data = {\n    \"trace 1\": {\"x\": x_cat, \"y\": [1, 4, 9, 16, 25]},\n    \"trace 2\": {\"x\": x_cat, \"y\": [1, 8, 27, 64, 125]},\n    \"trace 3\": {\"x\": x_cat, \"y\": [1, 16, 81, 256, 625]},\n}\nnew_scatter_data = scatter_chart(\n    data=scatter_data,\n    options={\"x_labels\": x_cat, \"show_line\": True,\n             \"tension\": 0, \"fixed_lines\": [\"trace 1\"]}\n)\nnew_scatter_data\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbalexandermunoz%2Fdraggable-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbalexandermunoz%2Fdraggable-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbalexandermunoz%2Fdraggable-charts/lists"}