Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
Krunalbpatel
Helper III
Helper III

Create new custom visuals from the scratch code

Hi,

 

I want to create custom Power BI visuals for the report. I follow the different links to create custom visuals. But did't get the code for that. I need to know how to write a code in the visuals.ts file. Can you please provide me some basic Idea, How can I write the code? Or Is there any document fot it How to write a code?

 

I have some inbuilt code but I am getting the following error

 

Argument of type '{ value: string | number | boolean | Date; identity: string; }' is not assignable to parameter of type 'CategoryViewModel'.
  Types of property 'value' are incompatible.
    Type 'string | number | boolean | Date' is not assignable to type 'string'.
      Type 'number' is not assignable to type 'string'.

 

 

Thanks

10 REPLIES 10
BhaveshPatel
Community Champion
Community Champion

Hi Krunal, 

 

You can find more information on below github repository.

 

https://github.com/Microsoft/PowerBI-visuals

 

 

 

Thanks & Regards,
Bhavesh

Love the Self Service BI.
Please use the 'Mark as answer' link to mark a post that answers your question. If you find a reply helpful, please remember to give Kudos.

Hi @BhaveshPatel,

 

I see this post, But how can I write a code? Is there any documentation for how to code? I am using the code but it gives me an error.

 

Argument of type '{ value: string | number | boolean | Date; identity: string; }' is not assignable to parameter of type 'CategoryViewModel'.
  Types of property 'value' are incompatible.
    Type 'string | number | boolean | Date' is not assignable to type 'string'.
      Type 'number' is not assignable to type 'string'

 

 

You would find more information on the below VIDEO POST by Sachin Patney.

 

https://www.youtube.com/watch?v=_thcxwFmH9A

 

Thanks & Regards,
Bhavesh

Love the Self Service BI.
Please use the 'Mark as answer' link to mark a post that answers your question. If you find a reply helpful, please remember to give Kudos.

Hi @BhaveshPatel,

 

I see this video but I am not able understand properly. Is there any documentation available for basic codes?

@Krunalbpatel,

 

Sample Bar Chart Repo could be the start point, and you'll need to learn TypeScript first. As for the error message, check Type assertions.

Community Support Team _ Sam Zha
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Hi @v-chuncz-msft,

 

Thanks for your reply. I have follow the Sample Bar Chart Repo and write the same code as explain, but when look in the Power BI I am not able to see the report data.

 

Thanks

@Krunalbpatel,

 

Make sure that all necessary files are added to the files array in tsconfig.json. This allows the TypeScript compiler to load them and in what order. For tips about debugging your custom visual, see the debugging guide.

Community Support Team _ Sam Zha
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Hi @v-chuncz-msft,

 

Thanks for your reply, and I got the solution for this. It was the D3 folder and node_module folder is not able to find the correct file. So it was giving an error.

 

Hi,

 

Now I am stuck on color selection for the bar or text. I got the color selection option in theproperty window but I am not able to apply the color to the bars or color. For this I have to add any file which I have forgottotn to add? I am getting error on getSelection() for the color.

 

Thanks

Krunal Patel

@Krunalbpatel,

 

This is another error, better to raise a new thread. That way, community members could easily find the solution to a specific problem. By the way, you may post some screenshots and the related code snippet to better illustrate this issue.

Community Support Team _ Sam Zha
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Helpful resources

Announcements
Europe Fabric Conference

Europe’s largest Microsoft Fabric Community Conference

Join the community in Stockholm for expert Microsoft Fabric learning including a very exciting keynote from Arun Ulag, Corporate Vice President, Azure Data.

Power BI Carousel June 2024

Power BI Monthly Update - June 2024

Check out the June 2024 Power BI update to learn about new features.

PBI_Carousel_NL_June

Fabric Community Update - June 2024

Get the latest Fabric updates from Build 2024, key Skills Challenge voucher deadlines, top blogs, forum posts, and product ideas.