Customizations in Wijmo Chart

Wijmo Chart provides a large range of options for customizing its appearance according to user requirements. In this blog, I have provided the code snippets for few common requirements as mentioned below.

1. Hiding or Changing color of Chart labels for a selected series
2. Increasing the space between legend symbol and legend text
3. Modifying font styles of Header text and legend text
4. Color a specific bar in Bar chart
5. Formatting labels of Pie Chart

1. Hiding or Changing color of Chart labels for a selected series In order to hide the chart labels of a specific series or to change its color, you may use the below code:

    var path = $("#testChart").wijlinechart("getLinePath", 0);  
    var chartLabels = path.labels;  
      //change the color  
    chartLabels.attr({  
            fill: "red"  
    });  
    //hide the chartlabels  
    chartLabels.hide();  

2. Increasing the space between legend symbol and legend text If you want to widen the gap between the symbol and the series label which is displayed in the legend then the following code will do this work :

  var legendTexts = $("#testChart").data("wijlinechart").legends;  
  if (legendTexts) {  
    $.each(legendTexts, function (i, legendText) {  
    legendText.transform("...T20 0");  
    });  
  }  

3. Modifying font styles of Header text and legend text The font styles like font size, font family etc. of header and legend can be easily customized by the below code:

  legend: {  
   textStyle: {  
     “font-weight”:”bold”,  
     “font-family”:”Monotype Corsiva”  
   }  
 },  
 header: {  
   text: “Console Wars”,  
   textStyle: {  
     “font-weight”: “bold”,  
     “font-family”: “Monotype Corsiva”  
    }  
  }  

4. Color a specific bar in Bar chart The following code snippet would help you in coloring a specific bar of a single series in a Bar chart.

//changes the color of bar initially  
  painted: function (args) {  
    var bar = $(this).wijbarchart(“getBar”, 1);  
    bar.attr({  
      fill: “red”,  
      stroke: “black”  
   });  
  }  
//keeps the color retained when mouse is hovered  
  mouseOut: function (e, data) {  
    var bar = $(this).wijbarchart(“getBar”, 1);  
    bar.attr({  
       fill: “red”,  
       stroke: “black”  
    });  
  }  

5. Formatting labels of Pie Chart We can easily format the labels of the PieChart as per our needs by handling formatter event of labels like below:

   $("#wijpiechart").wijpiechart({  
     labels： {  
       formatter: function () {  
           return this.chartLabel + " : " + Globalize.format(this.value / this.total, "p2");  
     }  
   });