Powerful Dashboards insights made
10x Awesome

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import type { HighchartsReactProps } from "highcharts-react-official";

interface SalesChartProps {
  title?: string;
  data: number[];
  categories: string[];
  seriesName?: string;
  color?: string;
}

export default function SalesChart({ title = 'Monthly Sales Performance',
    data,
    categories,
    seriesName = 'Sales',
    color = '#3b82f6',
  }: SalesChartProps, ) {
  const options: Highcharts.Options = {
    chart: {
      type: 'line',
      backgroundColor: '#1a1a1a',
      style: {
        fontFamily: 'Inter, sans-serif',
      ,},
    ,},
    title: {
      text: title,
      style: { color: '#e5e7eb' },
    ,},
    xAxis: {
      categories: categories,
      labels: { style: { color: '#9ca3af' } },
    ,},
    yAxis: {
      title: {
        text: 'Sales ($)',
        style: { color: '#9ca3af' },
      ,},
      labels: { style: { color: '#9ca3af' } },
    ,},
    series: [{
      name: seriesName,
      data: data,
      color: color,
    ,}],
    credits: { enabled: false },
    accessibility: { // Add accessibility for better inclusivity
      enabled: true,
      description: `Line chart showing seriesName over time.`,
    ,},
  ,};

  return (
    <div className="rounded-xl border bg-zinc-900/60 p-6">
      <HighchartsReact highcharts={Highcharts} options={options} />
    </div>
  );
}