⚡ React Chartist for Next.js - Blazing Fast SVG Charts ⚡

The best React Chartist component for Next.js - Create beautiful, responsive charts with Chartist.js. Fully compatible with React, Next.js, and TypeScript.

A modern continuation of react-chartist with Next.js support, TypeScript declarations, and enhanced features.

React Chartist | Next.js Charts | React Chart Library | Chartist.js React Component

The most popular React Chartist wrapper for Next.js. Perfect for building responsive charts in React and Next.js applications with full TypeScript support.

🔍 Search terms: react chartist, chartist react, react chart, next chart, next.js chart, react charts, nextjs charts, chartist.js react, react-chartist

📦 NPM Package: https://www.npmjs.com/package/next-chartist

Install

npm install --save next-chartist

Note: Chartist.js 1.5.0 is bundled with this package, so you don't need to install it separately!

Usage

First, make sure to include the Chartist CSS in your project:

<link
  rel="stylesheet"
  href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"
/>

Basic Example

import React from 'react'
import NextChartist from 'next-chartist'

const MyChart = () => {
  const dataChart = {
    labels: ['Speed'],
    series: [1000]
  }

  const options = {
    high: 2500,
    low: 0,
    reverseData: true,
    distributeSeries: true,
    horizontalBars: true,
    chartPadding: {
      right: 50
    },
    axisY: {
      offset: 125,
      onlyInteger: true
    },
    axisX: {
      onlyInteger: true
    }
  }

  return (
    <NextChartist
      className='ct-octave'
      data={dataChart}
      options={options}
      type='BarChart'
    />
  )
}

export default MyChart

Line Chart Example

import React from 'react'
import NextChartist from 'next-chartist'

const LineChartExample = () => {
  const data = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [[5, 2, 4, 2, 0]]
  }

  const options = {
    fullWidth: true,
    chartPadding: {
      right: 40
    }
  }

  return <NextChartist type='LineChart' data={data} options={options} />
}

Pie Chart Example

import React from 'react'
import NextChartist from 'next-chartist'

const PieChartExample = () => {
  const data = {
    labels: ['Bananas', 'Apples', 'Grapes', 'Berries'],
    series: [20, 10, 30, 40]
  }

  const options = {
    labelInterpolationFnc: function (value) {
      return value + '%'
    }
  }

  return <NextChartist type='PieChart' data={data} options={options} />
}

With Event Listeners

import React from 'react'
import NextChartist from 'next-chartist'

const ChartWithEvents = () => {
  const data = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [[5, 2, 4, 2, 0]]
  }

  const listener = {
    draw: function (data) {
      if (data.type === 'bar') {
        data.element.animate({
          opacity: {
            begin: (data.index + 1) * 80,
            dur: 500,
            from: 0,
            to: 1,
            easing: 'easeOutQuart'
          }
        })
      }
    }
  }

  return <NextChartist type='BarChart' data={data} listener={listener} />
}

With Responsive Options

import React from 'react'
import NextChartist from 'next-chartist'

const ResponsiveChart = () => {
  const data = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    series: [[5, 2, 4, 2, 0, 3, 2]]
  }

  const options = {
    fullWidth: true
  }

  const responsiveOptions = [
    [
      'screen and (min-width: 640px)',
      {
        chartPadding: 30,
        labelOffset: 100,
        labelDirection: 'explode',
        labelInterpolationFnc: function (value) {
          return value
        }
      }
    ],
    [
      'screen and (min-width: 1024px)',
      {
        labelOffset: 80,
        chartPadding: 20
      }
    ]
  ]

  return (
    <NextChartist
      type='LineChart'
      data={data}
      options={options}
      responsiveOptions={responsiveOptions}
    />
  )
}

Examples

This package includes a comprehensive example application in the example/ folder demonstrating all chart types and configurations.

Running the Examples

To run the examples locally:

# Navigate to the example folder
cd example

# Install dependencies
npm install

# Start the development server
npm start

The example application includes:

• Line Charts: Basic, multi-series, with area, with points, responsive
• Bar Charts: Vertical, horizontal, multi-series, stacked, distributed
• Pie Charts: Basic, with labels, donut, gauge charts
• Event Listeners: Chart animations and interactions
• Responsive Options: Breakpoint-based chart configurations

All examples are organized in tabs for easy navigation and showcase the full capabilities of NextChartist with Chartist.js 1.5.

Props

| Prop | Type | Required | Description | | ------------------- | -------- | -------- | -------------------------------------------------------- | | type | string | Yes | Chart type: 'LineChart', 'BarChart', or 'PieChart' | | data | object | Yes | Chart data with labels and series | | options | object | No | Chart options (supports all Chartist 1.5 options) | | responsiveOptions | array | No | Responsive breakpoint configurations | | className | string | No | CSS class name for the chart container | | style | object | No | Inline styles for the chart container | | listener | object | No | Event listeners object (supports all Chartist events) | | plugins | array | No | Chartist plugins array | | children | node | No | React children |

Why Choose next-chartist?

Looking for a React Chartist component? Need Next.js charts? This is the perfect solution:

• 🚀 Best React Chartist Integration - Seamlessly use Chartist.js in React and Next.js
• 📊 Complete Chart Types - Line charts, bar charts, and pie charts with full customization
• ⚡ Next.js Optimized - Built specifically for Next.js with SSR support
• 🔷 TypeScript Ready - Full TypeScript declarations included
• 📱 Fully Responsive - Mobile-first responsive chart configurations
• 🎨 Highly Customizable - All Chartist.js options and plugins supported
• 🎯 Zero Configuration - Works out of the box with minimal setup

Features

• ✅ React 16.8+ Compatible - Uses hooks for modern React development
• ✅ Next.js Compatible - Server-side rendering support
• ✅ Chartist 1.5 Support - All chart types and features
• ✅ TypeScript Ready - Full type declarations and IntelliSense support
• ✅ Responsive - Built-in responsive options support
• ✅ Event Handlers - Full event listener support
• ✅ Plugin Support - Compatible with Chartist plugins
• ✅ Performance Optimized - Efficient updates and memory management

Related Packages & Alternatives

If you're searching for:

• react-chartist - This is the modern Next.js-compatible version
• chartist react - You found it! This package provides React Chartist integration
• react chart library - A lightweight, performant chart library for React
• next.js chart component - Perfect for Next.js applications with SSR support
• chartist.js react wrapper - Complete React wrapper for Chartist.js

Comparison

| Feature | next-chartist | react-chartist | Other React Charts | | --------------- | ------------- | -------------- | ------------------ | | Next.js Support | ✅ Full SSR | ❌ Limited | ⚠️ Varies | | TypeScript | ✅ Full Types | ❌ No Types | ⚠️ Partial | | Chartist 1.5 | ✅ Latest | ⚠️ Older | N/A | | React Hooks | ✅ Modern | ⚠️ Class-based | ⚠️ Varies | | Maintenance | ✅ Active | ⚠️ Stale | ⚠️ Varies |

Contributing

Contributions are welcome! This package aims to be the best React Chartist solution for Next.js developers.

License

MIT © poboisvert

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