{"id":19399000,"url":"https://github.com/poboisvert/next-chartist","last_synced_at":"2026-01-04T12:59:20.925Z","repository":{"id":237096864,"uuid":"793804959","full_name":"poboisvert/next-chartist","owner":"poboisvert","description":"⚛ NPM Package for React Chartist.js component - 1.5K+ Downloads","archived":false,"fork":false,"pushed_at":"2024-07-16T23:11:52.000Z","size":746,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-19T10:41:22.685Z","etag":null,"topics":["chartist","chartist-library","library","nextjs","nextjs13","nextjs14","npm","react-chartist","reactjs"],"latest_commit_sha":null,"homepage":"https://miro.medium.com/v2/resize:fit:720/format:webp/1*JD93nmwkfsG4Suoi43daMQ.jpeg","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/poboisvert.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-29T22:39:34.000Z","updated_at":"2024-10-18T01:18:40.000Z","dependencies_parsed_at":"2024-07-17T02:39:14.061Z","dependency_job_id":null,"html_url":"https://github.com/poboisvert/next-chartist","commit_stats":null,"previous_names":["poboisvert/next-chartist"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poboisvert%2Fnext-chartist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poboisvert%2Fnext-chartist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poboisvert%2Fnext-chartist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poboisvert%2Fnext-chartist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/poboisvert","download_url":"https://codeload.github.com/poboisvert/next-chartist/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244918354,"owners_count":20531681,"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":["chartist","chartist-library","library","nextjs","nextjs13","nextjs14","npm","react-chartist","reactjs"],"created_at":"2024-11-10T11:07:54.307Z","updated_at":"2026-01-04T12:59:20.920Z","avatar_url":"https://github.com/poboisvert.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⚡ React Chartist for Next.js - Blazing Fast SVG Charts ⚡\n\n**The best React Chartist component for Next.js** - Create beautiful, responsive charts with Chartist.js. Fully compatible with React, Next.js, and TypeScript.\n\n\u003e A modern continuation of [react-chartist](https://github.com/fraserxu/react-chartist) with Next.js support, TypeScript declarations, and enhanced features.\n\n[![NPM Version](https://img.shields.io/npm/v/next-chartist?style=flat\u0026color=blue)](https://www.npmjs.com/package/next-chartist)\n[![NPM monthly downloads](https://img.shields.io/npm/dm/next-chartist.svg?style=flat)](https://npmjs.org/package/next-chartist)\n[![NPM total downloads](https://img.shields.io/npm/dt/next-chartist.svg?style=flat)](https://npmjs.org/package/next-chartist)\n[![Typescript](https://img.shields.io/badge/TypeScript-supported-blue?logo=typescript\u0026style=flat)](https://typescriptlang.org/)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat\u0026logo=prettier)](https://github.com/prettier/prettier)\n[![License: MIT](https://img.shields.io/npm/l/next-chartist?style=flat)](https://github.com/poboisvert/next-chartist/blob/main/LICENSE)\n\n\n\u003e **React Chartist** | **Next.js Charts** | **React Chart Library** | **Chartist.js React Component**\n\nThe most popular React Chartist wrapper for Next.js. Perfect for building responsive charts in React and Next.js applications with full TypeScript support.\n\n**🔍 Search terms:** `react chartist`, `chartist react`, `react chart`, `next chart`, `next.js chart`, `react charts`, `nextjs charts`, `chartist.js react`, `react-chartist`\n\n**📦 NPM Package:** https://www.npmjs.com/package/next-chartist\n\n## Install\n\n```bash\nnpm install --save next-chartist\n```\n\n**Note:** Chartist.js 1.5.0 is bundled with this package, so you don't need to install it separately!\n\n\n![Preview of NextChartist Example App](./preview.png)\n\n\n## Usage\n\nFirst, make sure to include the Chartist CSS in your project:\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css\"\n/\u003e\n```\n\n### Basic Example\n\n```jsx\nimport React from 'react'\nimport NextChartist from 'next-chartist'\n\nconst MyChart = () =\u003e {\n  const dataChart = {\n    labels: ['Speed'],\n    series: [1000]\n  }\n\n  const options = {\n    high: 2500,\n    low: 0,\n    reverseData: true,\n    distributeSeries: true,\n    horizontalBars: true,\n    chartPadding: {\n      right: 50\n    },\n    axisY: {\n      offset: 125,\n      onlyInteger: true\n    },\n    axisX: {\n      onlyInteger: true\n    }\n  }\n\n  return (\n    \u003cNextChartist\n      className='ct-octave'\n      data={dataChart}\n      options={options}\n      type='BarChart'\n    /\u003e\n  )\n}\n\nexport default MyChart\n```\n\n### Line Chart Example\n\n```jsx\nimport React from 'react'\nimport NextChartist from 'next-chartist'\n\nconst LineChartExample = () =\u003e {\n  const data = {\n    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],\n    series: [[5, 2, 4, 2, 0]]\n  }\n\n  const options = {\n    fullWidth: true,\n    chartPadding: {\n      right: 40\n    }\n  }\n\n  return \u003cNextChartist type='LineChart' data={data} options={options} /\u003e\n}\n```\n\n### Pie Chart Example\n\n```jsx\nimport React from 'react'\nimport NextChartist from 'next-chartist'\n\nconst PieChartExample = () =\u003e {\n  const data = {\n    labels: ['Bananas', 'Apples', 'Grapes', 'Berries'],\n    series: [20, 10, 30, 40]\n  }\n\n  const options = {\n    labelInterpolationFnc: function (value) {\n      return value + '%'\n    }\n  }\n\n  return \u003cNextChartist type='PieChart' data={data} options={options} /\u003e\n}\n```\n\n### With Event Listeners\n\n```jsx\nimport React from 'react'\nimport NextChartist from 'next-chartist'\n\nconst ChartWithEvents = () =\u003e {\n  const data = {\n    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],\n    series: [[5, 2, 4, 2, 0]]\n  }\n\n  const listener = {\n    draw: function (data) {\n      if (data.type === 'bar') {\n        data.element.animate({\n          opacity: {\n            begin: (data.index + 1) * 80,\n            dur: 500,\n            from: 0,\n            to: 1,\n            easing: 'easeOutQuart'\n          }\n        })\n      }\n    }\n  }\n\n  return \u003cNextChartist type='BarChart' data={data} listener={listener} /\u003e\n}\n```\n\n### With Responsive Options\n\n```jsx\nimport React from 'react'\nimport NextChartist from 'next-chartist'\n\nconst ResponsiveChart = () =\u003e {\n  const data = {\n    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n    series: [[5, 2, 4, 2, 0, 3, 2]]\n  }\n\n  const options = {\n    fullWidth: true\n  }\n\n  const responsiveOptions = [\n    [\n      'screen and (min-width: 640px)',\n      {\n        chartPadding: 30,\n        labelOffset: 100,\n        labelDirection: 'explode',\n        labelInterpolationFnc: function (value) {\n          return value\n        }\n      }\n    ],\n    [\n      'screen and (min-width: 1024px)',\n      {\n        labelOffset: 80,\n        chartPadding: 20\n      }\n    ]\n  ]\n\n  return (\n    \u003cNextChartist\n      type='LineChart'\n      data={data}\n      options={options}\n      responsiveOptions={responsiveOptions}\n    /\u003e\n  )\n}\n```\n\n## Examples\n\nThis package includes a comprehensive example application in the `example/` folder demonstrating all chart types and configurations.\n\n### Running the Examples\n\nTo run the examples locally:\n\n```bash\n# Navigate to the example folder\ncd example\n\n# Install dependencies\nnpm install\n\n# Start the development server\nnpm start\n```\n\nThe example application includes:\n\n- **Line Charts**: Basic, multi-series, with area, with points, responsive\n- **Bar Charts**: Vertical, horizontal, multi-series, stacked, distributed\n- **Pie Charts**: Basic, with labels, donut, gauge charts\n- **Event Listeners**: Chart animations and interactions\n- **Responsive Options**: Breakpoint-based chart configurations\n\nAll examples are organized in tabs for easy navigation and showcase the full capabilities of NextChartist with Chartist.js 1.5.\n\n## Props\n\n| Prop                | Type     | Required | Description                                              |\n| ------------------- | -------- | -------- | -------------------------------------------------------- |\n| `type`              | `string` | Yes      | Chart type: `'LineChart'`, `'BarChart'`, or `'PieChart'` |\n| `data`              | `object` | Yes      | Chart data with `labels` and `series`                    |\n| `options`           | `object` | No       | Chart options (supports all Chartist 1.5 options)        |\n| `responsiveOptions` | `array`  | No       | Responsive breakpoint configurations                     |\n| `className`         | `string` | No       | CSS class name for the chart container                   |\n| `style`             | `object` | No       | Inline styles for the chart container                    |\n| `listener`          | `object` | No       | Event listeners object (supports all Chartist events)    |\n| `plugins`           | `array`  | No       | Chartist plugins array                                   |\n| `children`          | `node`   | No       | React children                                           |\n\n## Why Choose next-chartist?\n\nLooking for a **React Chartist** component? Need **Next.js charts**? This is the perfect solution:\n\n- 🚀 **Best React Chartist Integration** - Seamlessly use Chartist.js in React and Next.js\n- 📊 **Complete Chart Types** - Line charts, bar charts, and pie charts with full customization\n- ⚡ **Next.js Optimized** - Built specifically for Next.js with SSR support\n- 🔷 **TypeScript Ready** - Full TypeScript declarations included\n- 📱 **Fully Responsive** - Mobile-first responsive chart configurations\n- 🎨 **Highly Customizable** - All Chartist.js options and plugins supported\n- 🎯 **Zero Configuration** - Works out of the box with minimal setup\n\n## Features\n\n- ✅ **React 16.8+ Compatible** - Uses hooks for modern React development\n- ✅ **Next.js Compatible** - Server-side rendering support\n- ✅ **Chartist 1.5 Support** - All chart types and features\n- ✅ **TypeScript Ready** - Full type declarations and IntelliSense support\n- ✅ **Responsive** - Built-in responsive options support\n- ✅ **Event Handlers** - Full event listener support\n- ✅ **Plugin Support** - Compatible with Chartist plugins\n- ✅ **Performance Optimized** - Efficient updates and memory management\n\n## Related Packages \u0026 Alternatives\n\nIf you're searching for:\n\n- **react-chartist** - This is the modern Next.js-compatible version\n- **chartist react** - You found it! This package provides React Chartist integration\n- **react chart library** - A lightweight, performant chart library for React\n- **next.js chart component** - Perfect for Next.js applications with SSR support\n- **chartist.js react wrapper** - Complete React wrapper for Chartist.js\n\n## Comparison\n\n| Feature         | next-chartist | react-chartist | Other React Charts |\n| --------------- | ------------- | -------------- | ------------------ |\n| Next.js Support | ✅ Full SSR   | ❌ Limited     | ⚠️ Varies          |\n| TypeScript      | ✅ Full Types | ❌ No Types    | ⚠️ Partial         |\n| Chartist 1.5    | ✅ Latest     | ⚠️ Older       | N/A                |\n| React Hooks     | ✅ Modern     | ⚠️ Class-based | ⚠️ Varies          |\n| Maintenance     | ✅ Active     | ⚠️ Stale       | ⚠️ Varies          |\n\n## Contributing\n\nContributions are welcome! This package aims to be the **best React Chartist solution** for Next.js developers.\n\n## License\n\nMIT © [poboisvert](https://github.com/poboisvert)\n\n---\n\n**Keywords for search:** react chartist, chartist react, react chart, next chart, next.js chart, react charts, nextjs charts, chartist.js react, react-chartist, react chart library, next.js chart component, chartist react component, react charting library, nextjs chart library, typescript charts react\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpoboisvert%2Fnext-chartist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpoboisvert%2Fnext-chartist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpoboisvert%2Fnext-chartist/lists"}