{"id":20525974,"url":"https://github.com/codeyellowbv/chartist-plugin-legend","last_synced_at":"2025-04-04T10:09:03.585Z","repository":{"id":29052904,"uuid":"32580621","full_name":"CodeYellowBV/chartist-plugin-legend","owner":"CodeYellowBV","description":"Legend plugin for Chartist.js.","archived":false,"fork":false,"pushed_at":"2020-05-17T19:48:26.000Z","size":85,"stargazers_count":117,"open_issues_count":25,"forks_count":62,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-28T09:08:54.988Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://codeyellowbv.github.io/chartist-plugin-legend/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodeYellowBV.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":"2015-03-20T11:41:13.000Z","updated_at":"2024-12-07T23:29:26.000Z","dependencies_parsed_at":"2022-09-16T13:10:44.327Z","dependency_job_id":null,"html_url":"https://github.com/CodeYellowBV/chartist-plugin-legend","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeYellowBV%2Fchartist-plugin-legend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeYellowBV%2Fchartist-plugin-legend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeYellowBV%2Fchartist-plugin-legend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeYellowBV%2Fchartist-plugin-legend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeYellowBV","download_url":"https://codeload.github.com/CodeYellowBV/chartist-plugin-legend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247157283,"owners_count":20893220,"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":[],"created_at":"2024-11-15T23:11:37.995Z","updated_at":"2025-04-04T10:09:03.565Z","avatar_url":"https://github.com/CodeYellowBV.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# chartist-plugin-legend\n\n[![Build Status](https://travis-ci.org/CodeYellowBV/chartist-plugin-legend.svg?branch=master)](https://travis-ci.org/CodeYellowBV/chartist-plugin-legend)\n[![Coverage Status](https://coveralls.io/repos/github/CodeYellowBV/chartist-plugin-legend/badge.svg?branch=master)](https://coveralls.io/github/CodeYellowBV/chartist-plugin-legend?branch=master)\n\nImplements a legend for [Chartist](https://github.com/gionkunz/chartist-js) charts.\n\n**[Demo](https://codeyellowbv.github.io/chartist-plugin-legend/)**\n\n## Install\n\n```\n$ npm install chartist-plugin-legend --save\n```\n\nAs styles are very different with each project, no CSS is included. You can copy paste this to use as base:\n\n```scss\n.ct-legend {\n    position: relative;\n    z-index: 10;\n\n    li {\n        position: relative;\n        padding-left: 23px;\n        margin-bottom: 3px;\n    }\n\n    li:before {\n        width: 12px;\n        height: 12px;\n        position: absolute;\n        left: 0;\n        content: '';\n        border: 3px solid transparent;\n        border-radius: 2px;\n    }\n\n    li.inactive:before {\n        background: transparent;\n    }\n\n    \u0026.ct-legend-inside {\n        position: absolute;\n        top: 0;\n        right: 0;\n    }\n\n    @for $i from 0 to length($ct-series-colors) {\n        .ct-series-#{$i}:before {\n            background-color: nth($ct-series-colors, $i + 1);\n            border-color: nth($ct-series-colors, $i + 1);\n        }\n    }\n}\n```\n\n## Usage\n\nIn an example chart:\n\n```js\nrequire('chartist-plugin-legend');\n\nnew Chartist.Bar('.ct-chart', data, {\n        stackBars: true,\n        plugins: [\n            Chartist.plugins.legend()\n        ]\n    },\n});\n```\n\n| __Option__ | __Description__ | __Type__ | __Default__ |\n| ---        | ---             | ---      | ---         |\n| `className` | Adds a class to the `ul` element. | `string` | `''` |\n| `clickable` | Sets the legends clickable state; setting this value to `false` disables toggling graphs on legend click. | `bool` | `true` |\n| `legendNames` | Sets custom legend names. By default the `name` property of the series will be used if none are given. Multiple series can be associated with a legend item using this property as well. See examples for more details. | `mixed` | `false` |\n| `onClick` | Accepts a function that gets invoked if `clickable` is true. The function has the `chart`, and the click event (`e`), as arguments. | `mixed` | `false` |\n| `classNames` | Accepts a array of strings as long as the chart's series, those will be added as classes to the `li` elements. | `mixed` | `false` |\n| `removeAll` | Allow all series to be removed at once. | `bool` | `false` |\n| `position` | Sets the position of the legend element. `top`, `bottom` or any DOM2 Element are currently accepted. If a DOM Element is given, the legend will be appended as it's last child. | `'top'|'bottom'|HTMLElement` | `'top'` |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeyellowbv%2Fchartist-plugin-legend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeyellowbv%2Fchartist-plugin-legend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeyellowbv%2Fchartist-plugin-legend/lists"}