I'm trying to create a formatLabel function that can reach "this" in typescript.
This populates the labels with the correct date, but i need to reach a variable in the class to check the resolution so i can format the date accordingly.
formatLabel: function (value) { var d = new Date(value.Time); return d.getDate() + "/" + (d.getMonth()+1); }
When i do this i successfully trigger the desired method and generate the correct string based on the resolution, but it fails to populate the labels in the chart.
formatLabel: ((value) => { this.formatSeriesLabel(value) })
formatSeriesLabel(value) {
switch (this.dataSource.Resolution) { case 7: var d = new Date(value.Time); return d.getHours().toString(); case 20: var d = new Date(value.Time); return d.getDate() + "/" + (d.getMonth() + 1); } }
Changing the method to just return a test string does not return properly either.
formatSeriesLabel(value){
return "test";
}
Why isn't this populating the labels in the chart?
Hello Kristoffer ,
Thank you for contacting Infragistics Developer Support.
The `this` in your formatSeriesLabel function does not point to the chart object itself.
You should get a reference to the chart object/or the property of the chart inside the formatLabel function.
For example your function may look like:
formatLabel: function(value) {
var resolution = $('.chart_selector').igDataChart('option', 'dataSource').Resolution;
switch (resolution) {
// code to follow
Let me know if I may be of further assistance
Yes, the "this" is not refering to the datacharts datasource. I may have a bad variable name, but "this.dataSource" is refering to an object in my class. This is because i have several objects i pull data from to populate the chart.
The problem is that where i configure the datachart and the formatLabel as a function, i cannot reach my class (by using this). But when i use the arrow-function where i configure the formatLabel, i am able to reach the class, but not able to return the value.
Is there a way to use an external method to generate the labels?
Hi,
Yes there is. You can use an external function that returns a closure with your dataSource class bound in its scope.
For example:
var customLabelFormatter = (dataSource) => (value) => { // dataSource is your class // value is the item passed from the igDataChart switch (dataSource.Resolution) { case 7: // ... case 20: // ... }};
And in igDataChart initialization:
$('.selector').igDataChart({
formatLabel: customLabelFormatter(dataSource) // <- pass the instance of your class
})