CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vue-chartjs

Vue.js wrapper for Chart.js that provides reactive chart components with full Chart.js v4 support.

—

Pending
Overview
Eval results
Files

event-utilities.mddocs/

Event Utilities

Event handling utilities for extracting chart elements and datasets from user interaction events. These functions enable interactive features like tooltips, data point highlighting, and click handlers.

Capabilities

Get Dataset At Event

Extracts the entire dataset from a mouse click event, useful for highlighting or processing an entire data series.

/**
 * Get dataset from mouse click event
 * @param chart - Chart.js instance from component ref
 * @param event - Mouse click event from chart canvas
 * @returns Array of active dataset elements at the event location
 */
function getDatasetAtEvent(chart: Chart, event: MouseEvent): InteractionItem[];

Usage Example:

import { ref } from 'vue';
import { Bar, getDatasetAtEvent } from 'vue-chartjs';
import type { ChartComponentRef } from 'vue-chartjs';

const chartRef = ref<ChartComponentRef>();

const handleChartClick = (event: MouseEvent) => {
  if (chartRef.value?.chart) {
    const elements = getDatasetAtEvent(chartRef.value.chart, event);
    if (elements.length > 0) {
      const datasetIndex = elements[0].datasetIndex;
      console.log('Clicked on dataset:', datasetIndex);
      // Handle dataset interaction
    }
  }
};

Get Element At Event

Extracts a single element closest to the mouse click event, ideal for point-specific interactions.

/**
 * Get single dataset element from mouse click event
 * @param chart - Chart.js instance from component ref
 * @param event - Mouse click event from chart canvas
 * @returns Array containing the single element nearest to event location
 */
function getElementAtEvent(chart: Chart, event: MouseEvent): InteractionItem[];

Usage Example:

import { ref } from 'vue';
import { Line, getElementAtEvent } from 'vue-chartjs';
import type { ChartComponentRef } from 'vue-chartjs';

const chartRef = ref<ChartComponentRef>();

const handlePointClick = (event: MouseEvent) => {
  if (chartRef.value?.chart) {
    const elements = getElementAtEvent(chartRef.value.chart, event);
    if (elements.length > 0) {
      const { datasetIndex, index } = elements[0];
      const value = chartRef.value.chart.data.datasets[datasetIndex].data[index];
      console.log('Clicked point value:', value);
      // Handle specific data point interaction
    }
  }
};

Get Elements At Event

Extracts all elements at the same index across all datasets, useful for cross-dataset comparisons at a specific data point.

/**
 * Get all dataset elements from mouse click event
 * @param chart - Chart.js instance from component ref
 * @param event - Mouse click event from chart canvas
 * @returns Array of all elements at the same index as the event location
 */
function getElementsAtEvent(chart: Chart, event: MouseEvent): InteractionItem[];

Usage Example:

import { ref } from 'vue';
import { Bar, getElementsAtEvent } from 'vue-chartjs';
import type { ChartComponentRef } from 'vue-chartjs';

const chartRef = ref<ChartComponentRef>();

const handleCategoryClick = (event: MouseEvent) => {
  if (chartRef.value?.chart) {
    const elements = getElementsAtEvent(chartRef.value.chart, event);
    if (elements.length > 0) {
      const index = elements[0].index;
      const label = chartRef.value.chart.data.labels?.[index];
      console.log('Clicked category:', label);
      
      // Process all datasets at this index
      elements.forEach((element) => {
        const dataset = chartRef.value.chart.data.datasets[element.datasetIndex];
        const value = dataset.data[element.index];
        console.log(`${dataset.label}: ${value}`);
      });
    }
  }
};

Vue Template Integration

These utilities are commonly used with Vue event handlers on chart components:

<template>
  <div>
    <Bar 
      ref="chartRef"
      :data="chartData" 
      :options="chartOptions"
      @click="handleChartClick"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Bar, getElementAtEvent } from 'vue-chartjs';
import type { ChartComponentRef } from 'vue-chartjs';

const chartRef = ref<ChartComponentRef>();

const handleChartClick = (event: MouseEvent) => {
  if (chartRef.value?.chart) {
    const elements = getElementAtEvent(chartRef.value.chart, event);
    // Handle click interaction
  }
};
</script>

Types

// Re-exported from Chart.js
interface InteractionItem {
  datasetIndex: number;
  index: number;
}

// Chart.js Chart type (available via chart component ref)
import type { Chart, InteractionItem } from 'chart.js';

Install with Tessl CLI

npx tessl i tessl/npm-vue-chartjs

docs

event-utilities.md

index.md

tile.json