Customizations in Wijmo BarChart

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  
    _bars[index].hide();  
    //hide the chart label  
    elem.hide();  
   }  
});

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[i];  
    var newText = canvas.text(x, y + textBounds.height / 2, c)  
    .attr({  
           font: style["font"],  
           "font-size": style["font-size"],  
           "text-anchor": "start",  
           "fill": colors[i]  
         });  
    x += newText.wijGetBBox().width;  
   }  
  legend.hide();  
});

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. WijBarChart_HideChartLabels_Bars WijBarChart_CustomiseLegendText WijBarChart_RoundedBox_ChartLabels You may also refer to this blog for more customizations in Wijmo charts.