🎨 Demo

📦 Installation

Install the plugin via npm:

npm install chartjs-plugin-line-value-label

Or using yarn:

yarn add chartjs-plugin-line-value-label

🚀 Quick Start

import { Chart, registerables } from 'chart.js';
import LineValueLabelPlugin from 'chartjs-plugin-line-value-label';

Chart.register(...registerables, LineValueLabelPlugin);

const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [{
      label: 'Sales',
      data: [12, 19, 15, 25, 22]
    }]
  },
  options: {
    plugins: {
      lineValueLabel: {
        enabled: true,
        text: 'Max Value',
        dataset: {
          label: 'Sales'
        },
        position: 'left',
        style: {
          color: '#21B800',
          backgroundColor: '#F5F5F5'
        }
      }
    }
  }
});

⚙️ Configuration Options

Plugin Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | enabled | boolean | true | Enable or disable the plugin | | text | string | required | The text to display in the label | | dataset | object | required | Configuration for targeting a dataset | | position | 'left' \| 'right' | 'left' | Position of the label relative to the chart | | offset | number | 0 | Horizontal offset in pixels | | style | object | {} | Style options for the label |

Dataset Configuration

| Option | Type | Description | |--------|------|-------------| | label | string | Target dataset by its label (alternative to index) | | index | number | Target dataset by its index (alternative to label) |

Style Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | color | string | '#21B800' | Text color | | backgroundColor | string | '#F5F5F5' | Background color of the label badge | | padding | number | 6 | Padding around the text (in pixels) | | radius | number | 6 | Border radius of the label badge (in pixels) | | font | string | '12px sans-serif' | Font specification (CSS font property) |

📚 Examples

Basic Usage

Custom Styling

options: {
  plugins: {
    lineValueLabel: {
      text: 'Maximum',
      dataset: { index: 0 },
      position: 'left',
      offset: 10,
      style: {
        color: '#FFFFFF',
        backgroundColor: '#4F46E5',
        padding: 10,
        radius: 8,
        font: 'bold 14px Arial'
      }
    }
  }
}

Multiple Labels (Using Multiple Charts)

// Chart 1 - Label on left
const chart1 = new Chart(ctx1, {
  // ... config
  options: {
    plugins: {
      lineValueLabel: {
        text: 'Start Value',
        dataset: { index: 0 },
        position: 'left'
      }
    }
  }
});

// Chart 2 - Label on right
const chart2 = new Chart(ctx2, {
  // ... config
  options: {
    plugins: {
      lineValueLabel: {
        text: 'End Value',
        dataset: { index: 0 },
        position: 'right'
      }
    }
  }
});

Targeting by Dataset Index

options: {
  plugins: {
    lineValueLabel: {
      text: 'Dataset 0 Maximum',
      dataset: { index: 0 }, // First dataset
      position: 'left'
    }
  }
}

Targeting by Dataset Label

options: {
  plugins: {
    lineValueLabel: {
      text: 'Sales Peak',
      dataset: { label: 'Sales' }, // Dataset with label "Sales"
      position: 'right'
    }
  }
}

📝 TypeScript Support

The package includes full TypeScript definitions:

import LineValueLabelPlugin, { LineValueLabelOptions } from 'chartjs-plugin-line-value-label';

const options: LineValueLabelOptions = {
  enabled: true,
  text: 'Max Value',
  dataset: {
    label: 'Sales'
  },
  position: 'left',
  style: {
    color: '#21B800',
    backgroundColor: '#F5F5F5',
    padding: 6,
    radius: 6,
    font: '12px sans-serif'
  }
};

🤝 Compatibility

• Chart.js: ^4.5.0
• TypeScript: ^5.0.0 (for TypeScript users)

Made with ❤️ for the Chart.js community