{"id":16255789,"url":"https://github.com/jjppof/chartjs-plugin-zoom-pan-select","last_synced_at":"2025-07-22T05:05:04.740Z","repository":{"id":124665382,"uuid":"236635726","full_name":"jjppof/chartjs-plugin-zoom-pan-select","owner":"jjppof","description":"A chartjs plugin for zooming, panning and select data in a chartjs instance.","archived":false,"fork":false,"pushed_at":"2021-03-05T23:15:39.000Z","size":199,"stargazers_count":19,"open_issues_count":2,"forks_count":8,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-03T11:11:31.739Z","etag":null,"topics":["chartjs","chartjs-plugin","panning","zoom"],"latest_commit_sha":null,"homepage":"","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/jjppof.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-01-28T01:40:05.000Z","updated_at":"2024-10-03T08:10:02.000Z","dependencies_parsed_at":"2023-08-08T13:53:53.293Z","dependency_job_id":null,"html_url":"https://github.com/jjppof/chartjs-plugin-zoom-pan-select","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/jjppof/chartjs-plugin-zoom-pan-select","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjppof%2Fchartjs-plugin-zoom-pan-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjppof%2Fchartjs-plugin-zoom-pan-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjppof%2Fchartjs-plugin-zoom-pan-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjppof%2Fchartjs-plugin-zoom-pan-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jjppof","download_url":"https://codeload.github.com/jjppof/chartjs-plugin-zoom-pan-select/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjppof%2Fchartjs-plugin-zoom-pan-select/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266430676,"owners_count":23927167,"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-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":["chartjs","chartjs-plugin","panning","zoom"],"created_at":"2024-10-10T15:43:49.650Z","updated_at":"2025-07-22T05:05:04.715Z","avatar_url":"https://github.com/jjppof.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chart control functions enhancement for ChartJS\nA [chartjs](https://www.chartjs.org/) plugin for **zooming**, **panning** and **selecting** data in a chartjs instance.\n\nSee the [example](https://jjppof.github.io/chartjs-plugin-zoom-pan-select/example/index).\n\n### Install:\n\n```\nnpm install @jjppof/chartjs-plugin-zoom-pan-select\n```\n\n### Usage:\n\n```javascript\nimport ChartJSEnhancements from '@jjppof/chartjs-plugin-zoom-pan-select';\n\nlet enhancer = new ChartJSEnhancements(chartjs_object);\nenhancer.initialize(mouse_buttons);\n/* \nmouse_buttons is an optional object with the mouse button number for each chart action (pan, zoom or select).\nMore info about the numbers: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons#Return_value\n\nExample:\nmouse_buttons = {\n    zoom: zoom_button_value, //optional\n    select: select_button_value, //optional\n    pan: pan_button_value //optional\n};\n*/\n```\n\n### Default behavior\n\n - Click, hold and drag on the plot area to create a select region;\n - Double click on canvas to reset zoom and pan;\n - Use the mouse wheel to zoom;\n - Hold shift and drag the chart to pan.\n\n### Methods:\n\n```javascript\nChartJSEnhancements(chartjs_object, change_point_radius); //change_point_radius: default true, when selecting points, if this is set to true, the radius of the bullets changes\ninitialize(mouse_buttons, background_color); // mouse_buttons explained on Usage section. background_color if the background color of your chart. Default: white\nsetAction(action); //sets the mode of the chart if no mouse button is defined. The arg is a string that can be \"zoom\", \"pan\" or \"select\"\nsetAfterSelectHandler(callable); //callable that receives the selected points array as arg\nsetAfterUnselectHandler(callable);\nsetZoomXFactor(factor); //factor is a number\nsetZoomYFactor(factor);\nsetBackgroundColor(color); //updates the background color of the chart\nsetMinMax(); //updates the ticks.max and ticks.min chart properties without updating the chart\nunselectPoints(update); //boolean that says if the chart is going to update or not\nresetZoom(update, update_options); //boolean that says if the chart is going to update or not. update_options is the update options from chartjs update() function\nremoveEventListeners(); //removes all event listeners added by this plugin\ndestroy(); //remove all external references\n```\n\n### Limitations\n\n - For now, this plugin only works for linear x axis type.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjjppof%2Fchartjs-plugin-zoom-pan-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjjppof%2Fchartjs-plugin-zoom-pan-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjjppof%2Fchartjs-plugin-zoom-pan-select/lists"}