Svelte Chart Component

This npm package provides a reusable chart component using the Chart.js library. It is designed to work seamlessly with Svelte applications and supports various chart types.

Installation

Install the package using npm:

npm install @icgcat/chart

The package automatically includes the required Chart.js dependency, so there is no need for additional installations.

Features

• Chart Types: Supports bar, line, pie, and other chart types supported by Chart.js.
• Customizable: Easily configure labels, datasets, and chart options.
• Responsive Design: Charts adapt to different screen sizes.
• Legend Management: Position and display customization for chart legends.

Props

Configurable Properties

• chartData: (Required) Configuration object for the chart. This includes:
  • type: Type of the chart (e.g., bar, line, pie).
  • data: Chart data, including labels and datasets.
  • options: Additional Chart.js options for customization.

Example chartData Object

{
  type: "bar",
  data: {
    labels: ["January", "February", "March"],
    datasets: [
      {
        label: "Sample Data",
        data: [10, 20, 30],
        backgroundColor: "rgba(255, 99, 132, 0.2)",
        borderColor: "rgba(255, 99, 132, 1)",
        borderWidth: 1,
      },
    ],
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        display: true,
        position: "top",
      },
    },
  },
}

Usage Example

<script>
    import Chart from '@icgcat/chart';

    const chartData = {
        type: "line",
        data: {
            labels: ["January", "February", "March"],
            datasets: [
                {
                    label: "Monthly Sales",
                    data: [50, 75, 100],
                    backgroundColor: "rgba(54, 162, 235, 0.2)",
                    borderColor: "rgba(54, 162, 235, 1)",
                    borderWidth: 2,
                },
            ],
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: true,
                    position: "bottom",
                },
            },
        },
    };
</script>

<ChartComponent {chartData} />

Styling

The component comes with minimal styling for the canvas element. Customize it as needed:

canvas {
    max-width: 100%;
    margin: 20px 0;
}

Dependencies

• chart.js

This dependency is included automatically when you install the package.

License

This project is licensed under the MIT License.