Custom Visual - Accepting the Data Modelling Date Format

[mattapq]

In the Desktop version of Power BI, you can select a Date field and in the ribbon you can change the Modelling > Format of the date.

In the default Power BI line chart, this changes the x-axis dates to match your selected formatting. I can't recreate this functionality in my custom visual though. Is this chosen formatting somehow accessible from the visual's code?

My visual is using a categorical data model, the x-axis is a Time scale, and the dates are not being formatted manually in the visual's code.

EDIT

For anyone that stumbles into this post with this problem or a similar one, I'm using d3 5.7.2 and version 2.5.0 of the Power BI API. I just had to do the following:

1. Install the powerbi-visuals-utils-formattingutils library

2. Create a formatter and set its "format" property to the format we pulled from the categories source, i.e.

    myFormatter = valueFormatter.create({format: dataViews[0].categorical.categories[0].source.format});

3. Format your value:

    formattedDate = formatter.format(myDate);

4. Use this new formatted date as the x-axis label value instead of the date itself.

[dm-p]

Hi @mattapq,

If you check the categorical column definition in the data view, there is a format property exposed under the higher-level source property, e.g.:

If your fields doesn't have a format applied to it, this will just say "G" instead of the applied format.

Assuming that you're working with a single category field, you'd access with dataViews[0].categorical.categories[0].source.format when resolving your formatting. If you are iterating through categories when mapping it would just be current category variable name.source.format.

Good luck!

Daniel

[mattapq]

Thanks @dm-p!

What I'm struggling with is applying that format value to the x-axis label for the date.

When setting the x-axis text, I'm using the values from the category but they still just display as a full date string like "Sat Sep 23 2017 00:00:00 GMT-0400 (Eastern Daylight Time)"

Is there a trick to apply that format variable to the values in the category so that my x-axis labels display with that format?

[dm-p · Accepted solution]

Hi @mattapq - fundamentally, you just need to install powerbi-visuals-utils-formattingutils to your project and using valueFormatter but it's also going to depend on you've chosen to implement your code. For instance, if you're using v3 of the visuals SDK vs. 1/2, or whether you're using D3 to do your chart, or something else.

D3 v3 (which is supported by the older SDKs) can handle the format strings as standard but some stuff changed in v4/5 and the v3 SKD recommends that version. The implementation of axis tick formatting is a little different for those, so I just want to make sure I provide you with more targeted advice, if possible. I can definitely help with D3 but if it's something else I might need to do a bit of digging.

If you're able to share anything code-wise, I can take a look for you and provide something that will hopefully get you on the path to your desired solution.

Cheers,

Daniel

[mattapq]

That library was the missing piece of the puzzle. Thanks, @dm-p !

For anyone that stumbles into this post with this problem or a similar one, I'm using d3 5.7.2 and version 2.5.0 of the Power BI API. I just had to do the following:

1. Install the powerbi-visuals-utils-formattingutils library

2. Create a formatter and set its "format" property to the format we pulled from the categories source, i.e.

    myFormatter = valueFormatter.create({format: dataViews[0].categorical.categories[0].source.format});

3. Format your value:

    formattedDate = formatter.format(myDate);

4. Use this new formatted date as the x-axis label value instead of the date itself.

[dm-p]

Awesome - glad you're all sorted! 🙂