Displaying Month Name on Charts

  • 2
  • Question
  • Updated 3 years ago
  • Answered
I am having trouble figuring out how to change the axis labels on charts. I found another topic that used a snippet for a table, but was not able to make it work. 

I've gotten my model grouped by "CALENDAR_MONTH" and my category axis using the same model field. So my chart looks great, except it's got 1, 2, 3, etc when I want it to display the actual month name.

Thank you for your help. 

 
Photo of Josh Merritt

Josh Merritt

  • 918 Points 500 badge 2x thumb
  • sad

Posted 3 years ago

  • 2
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
I think you will need a before render snippet that translates the values provided by the aggregate model into actual month names. 

You could build off this one:  https://community.skuidify.com/skuid/topics/funnel-visualization-colors  except that you'd be replacing the chart lable instead of reordering... 
Photo of John Watson

John Watson

  • 584 Points 500 badge 2x thumb
Finally found the answer:

var chartObj = arguments[0],

$ = skuid.$;

$.extend(true, chartObj.xAxis[0],{

labels: {

formatter: function(){
if(this.value == 1) return "January";
else if(this.value == 2) return "February";
else if(this.value == 3) return "March";
else if(this.value == 4) return "April";
else if(this.value == 5) return "May";
else if(this.value == 6) return "June";
else if(this.value == 7) return "July";
else if(this.value == 8) return "August";
else if(this.value == 9) return "September";
else if(this.value == 10) return "October";
else if(this.value == 11) return "November";
else if(this.value == 12) return "December";
else return this.value;
}

}

});