Every day, we have so many requests from our customers for customizing WijBarChart as per their requirements. So, I thought why not discuss some of them here so that it may help other customers as well. In this blog, I would demonstrate how you can access the three important elements of bar chart i.e. Bars, ChartLabels and Legend and modify them as per the requirement. Here are some common customizations:

  1. Hide Bars and ChartLabels based on condition
  2. Apply different style on Legend text
  3. Display chart labels in rectangle

Hide Bars and ChartLabels based on Condition
For doing so, you need to access the bars and chart label collection and traverse them till their value matches the given condition like this:

//get the chartlabels
var _chartLabels = $("#wijbarchart").wijbarchart().data().fields.chartElements.chartLabels;
//get the bars
var _bars = $("#wijbarchart").wijbarchart().data().fields.chartElements.bars;

//traverse to find the value of each chartlabel and check for required condition
$.each(_chartLabels, function (index, elem) {
  if (elem.attrs.text == 0) {
    //hide the respective bar
    //hide the chart label

Apply Different Style on Legend Text
We can apply different fontcolor, fontsize to each character of the legend text and you may use the code below for the same:

colors = ["#ff0000", "#00ff00", "#0000ff", "#ff00ff", "#00ffff", "#ffff00"];

//access the canvas and legend object of the barchart
var barChart = $("#wijbarchart").data("wijbarchart"),
canvas = barChart.canvas,
legends = barChart.legends;

//travese through the legend items
$.each(legends, function (key, legend) {
  //retrieve the text
  var text = legend.attr("text"),
  textBounds = legend.wijGetBBox(),
  style = legend.attr();
  x = textBounds.x,
  y = textBounds.y;
  //change style attributes of each character
  for (var i = 0, ii = text.length; i < ii; i++) {
    var c = text;
    var newText = canvas.text(x, y + textBounds.height / 2, c)
           font: style["font"],
           "font-size": style["font-size"],
           "text-anchor": "start",
           "fill": colors
    x += newText.wijGetBBox().width;

Display Chart Labels in Rectangle
In order to display custom drawing i.e. rectangle for each chart label, you need to access the canvas of the wijbarchart and use the rect method of Raphael js to create rectangle. Here is the script which can help you :

//get the canvas object and chartlabels of the chart
var barchart = $("#wijbarchart").data("wijbarchart"),
canvas = barchart.canvas,
chartElems = $("#wijbarchart").wijbarchart().data().fields.chartElements.chartLabels;

//traverse through the chartlabels
$.each(chartElems, function (idx, chartLabelEle) {
      //check for chart label
   if ($(chartLabelEle.node).attr("class") === "wijbarchart-label") {
     var bounds = chartLabelEle.wijGetBBox();
     //draw the rectangle rect(x, y,width, height, radius)
      canvas.rect(bounds.x - 2, bounds.y, bounds.width + 5, bounds.height + 2, 2)
      .attr({ stroke: "#000", "stroke-width": 1 });

You can refer to the attached samples for complete implementation of the above customizations.

You may also refer to this blog for more customizations in Wijmo charts.