Skip to content
Plugin for Chart.js to add labels between columns to show the % progress in the same dataset
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
LICENSE
README.md
chartjs-plugin-funnel-labels.js
package.json

README.md

chartjs-plugin-funnel-label

Plugin for Chart.js to add labels between columns to show the % progress in the same dataset. Chart.js 2.6.0 or above required.

Written by Albert Gonzalez and released under the Unlicense.

See it in action!

Starting

Add the chartjs-plugin-funnel-label.js and use the funnel_labels options to enable the plugin and override the default values.

It works only in bar charts with one dataset and will show the % difference between each bar.

new Chart($("#chart"), {
  type: 'bar',
  data: {
    labels: ["Alpha Value", "Beta Value", "Charlie Value", "Delta Value"],
    datasets: [{
      label: 'First Dataset',
      data: [555, 302, 175, 50],
      backgroundColor: "rgba(75, 192, 192, 1)"
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        barPercentage: 0.3
      }]
    },
    funnel_labels: {
      enabled: true,
      background_color: "red"
    }
  }
});

Current options

They're set in the label_options object with these default values:

label_options: {
  enabled: false,
  font_style: "normal",
  font_family: "Arial",
  font_color: "white",
  background_color: "#FFBA4B",
  rectangle_width_scale_factor: 5,
  show_zeros: true,
  min_width_upper_label: 150,
  allow_upper_label: true,
  force_upper_label: false,
}

rectangle_width_scale_factor

width for each label rectangle = width between two bars / rectangle_width_scale_factor

show_zeros

If true will show the labels with a 0% value (otherwise will hide them).

min_width_upper_label

If the width between two bars is smaller than this value the labels will appear over them.

allow_upper_label

If set to false, the labels over the bars won't appear (it won't draw anything).

force_upper_label

If true will always show the labels over the bars (this will override the allow_upper_label option).

Known issues

  • The plugin can't handle more than one dataset and it just won't draw anything.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.