ppmazur / chartjs-plugin-funnel-label Goto Github PK

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!

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"
    }
  }
});

They're setted 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,
}

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

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

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

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

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

• The plugin can't handle more than one dataset and it just won't draw anything.