@simuratli/charts

A simple, customizable chart library for React.js. This package provides reusable chart components, like LineChart, to quickly integrate data visualizations into your React applications.

Installation

Install the package via npm:

npm install @simuratli/charts

Usage

Line Chart

After installing, you can import and use the LineChart component in your project as shown below.

Example

import { LineChart } from '@simuratli/charts';

const App = () => {
  return (
    <div>
      <LineChart 
        data={[
          { xValue: 2, yValue: 10 },
          { xValue: 3, yValue: 15 },
          { xValue: 7, yValue: 17 },
          { xValue: 3, yValue: 25 },
        ]}
        width={560}
        height={560}
        lineColor='orange'
        xAxisLabel='X axis'
        yAxisLabel='Y axis'
      />
    </div>
  );
};

export default App;

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | data | Array | - | Required. Array of objects with xValue and yValue keys. | | width | number | 560 | Optional. The width of the chart. | | height | number | 400 | Optional. The height of the chart. | | xAxisLabel | string | - | Optional. Label for the x-axis. | | yAxisLabel | string | - | Optional. Label for the y-axis. | | lineColor | string | orange | Optional. Color of the line in the chart. |

Data Format

The data prop should be an array of objects, each containing:

• xValue: The x-coordinate (number)
• yValue: The y-coordinate (number)

Example:

data={[
  { xValue: 2, yValue: 10 },
  { xValue: 3, yValue: 15 },
  { xValue: 7, yValue: 17 },
  { xValue: 3, yValue: 25 },
]}

Customization

• Dimensions: Adjust width and height to control the chart's size.
• Axis Labels: Use xAxisLabel and yAxisLabel to add labels to your axes.
• Line Color: Change the line color with lineColor.

BarChart

The BarChart component allows you to create a bar chart with customizable dimensions and colors.

Example

import React from 'react';
import { BarChart } from '@simuratli/charts';

const App = () => {
  return (
      <div>
        <BarChart 
            data={[
            { name: 'A', value: 30 },
            { name: 'B', value: 80 },
            { name: 'C', value: 45 },
            { name: 'D', value: 60 },
            ]}
            width={460}
            height={500}
            color='#69b3a2'
        />
    </div>
  );
};

export default App;

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | data | Array | - | Required. Array of objects with name and value keys. | | width | number | 460 | Optional. The width of the chart. | | height | number | 500 | Optional. The height of the chart. | | color | string | #69b3a2 | Optional. Color of the bars in the chart. |

Data Format

The data prop should be an array of objects, each containing:

• name: The name of the category (string)
• value: The value for the category (number)

Example:

data={[
  { name: 'A', value: 30 },
  { name: 'B', value: 80 },
  { name: 'C', value: 45 },
  { name: 'D', value: 60 },
]}

Customization

• Dimensions: Adjust width and height to control the chart's size.
• Bar Color: Change the bar color with color.

License

This project is licensed under the MIT License.

Contributing

Contributions are welcome! Please open issues or pull requests for any features, bug fixes, or suggestions.

Questions?

For any questions or issues, feel free to reach out.

Happy charting with @simuratli/charts!