RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/yunusemrejs/chartjs-image-label below:

yunusemrejs/chartjs-image-label: An chartjs plugin to add image labels to doughnut charts

Chart.js Image Label Plugin

The Chart.js Image Label Plugin is an extension for Chart.js that allows you to add images as labels to a Doughnut chart. This plugin enables you to enhance your charts with images, making the visualization more engaging and informative.

What it looks like:

You can install the Chart.js Image Label Plugin using npm or yarn:

npm install chartjs-plugin-image-label

To use this plugin, follow these steps:

Include the plugin in your Chart.js setup.

import { Chart } from 'chart.js';
import ChartPluginImageLabel from 'chartjs-plugin-image-label';
const ctx = document.getElementById('myDoughnutChart');

new Chart(ctx, {
  // other chart configuration
  plugins: [ChartPluginImageLabel]
})

Create your Doughnut chart and configure it with image labels:

const ctx = document.getElementById('myDoughnutChart');

const data = {
  labels: ['Label 1', 'Label 2', 'Label 3'],
  datasets: [
    {
      data: [30, 40, 30],
      backgroundColor: ['red', 'blue', 'green'],
    },
  ],
};

new Chart(ctx, {
  type: 'doughnut',
  data: data,
  options: {
    plugins: {
      imageLabel: {
        verticalAlign: 'middle',
        horizontalAlign: 'middle',
        offset: 10,
        imagesList: [{
          imageUrl: 'https://picsum.photos/40',
          imageWidth: 40,
          imageHeight: 40
        },
        {
          imageUrl: 'https://picsum.photos/40',
          imageWidth: 40,
          imageHeight: 40
        },
        {
          imageUrl: 'https://picsum.photos/40',
          imageWidth: 40,
          imageHeight: 40
        }]
      }
    }
  },
});

The plugin supports the following configuration options:

Option Values Description verticalAlign top, middle, bottom Specifies the vertical alignment of the image label within the chart slice. horizontalAlign start, middle, end Specifies the horizontal alignment of the image label within the chart slice. offset Number Horizontal offset between slices imagesList Array of objects An array of objects that define the images to be used as labels. imagesList Object Structure

Each object in the imagesList array should have the following structure:

Property Type Description imageUrl String The URL of the image to be used as a label. imageWidth Number The width of the image in pixels. imageHeight Number The height of the image in pixels.

MIT

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4