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

The ultimate Microsoft Fabric, Power BI, Azure AI & SQL learning event! Join us in Las Vegas from March 26-28, 2024. Use code MSCUST for a $100 discount. Register Now

Reply
Markzolotoy
Impactful Individual
Impactful Individual

Adding HighCharts as custom visual

I am working on adding HighCharts custom visual. A basic example is works fine. Here is chart's definition used in visual.ts:

Highcharts.chart(optionMain.id, {

            title: {
                text: 'Solar Employment Growth by Sector, 2010-2016'
            },
        
            subtitle: {
                text: 'Source: thesolarfoundation.com'
            },
        
            yAxis: {
                title: {
                    text: 'Number of Employees'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
        
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    pointStart: 2010
                }
            },
        
            series: [{
                name: 'Installation',
                data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
                type: undefined
            }, {
                name: 'Manufacturing',
                data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
                type: undefined
            }, {
                name: 'Sales & Distribution',
                data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
                type: undefined
            }, {
                name: 'Project Development',
                data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
                type: undefined
            }, {
                name: 'Other',
                data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
                type: undefined
            }],
        
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }
        
        });

I am looking for making this chart working with real data. Two things should happen. Chart definition must be real. The one in this code is just a very simplistic example. Second, the data. So both parts can  vary. Not sure if this is the right way but I can provide both in a single json being read from the SQL database. It will be pretty big though. So is it possible to provide such json at the runtime?

What are your thoughts?

 

Thanks

 

 

5 REPLIES 5
Markzolotoy
Impactful Individual
Impactful Individual

But in my case I can provide the complete chart definition at runtime with colors and everything. Another words, the users will not use this custom visual for a normal chart design. Am I toally wrong?

Hi @Markzolotoy ,

 

If you are talking about static custom visual, you can only store the data in JSON.

 

Best Regards,
Liang
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Can you please elaborate?

V-lianl-msft
Community Support
Community Support

Hi @Markzolotoy ,

 

Defining visualTransform will allow you to convert DataView into a view model your visual will use. IVisualHost is required because when defining individual data points, you will want to assign colors and selection to them.

https://github.com/microsoft/PowerBI-visuals-sampleBarChart/blob/master/Tutorial/DataBinding.md#defi... 

Please refer to this sample.

https://github.com/Microsoft/PowerBI-visuals-sampleBarChart/commit/3c6e8186436b63bf0cf97d2cdd5dde8aa... 

 

Best Regards,
Liang
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Markzolotoy
Impactful Individual
Impactful Individual

Just  to clarify. This visual is not to replace native Power BI charts meaning I don't need fully functional interactive UI for this chart. The visual is to show specific Highcharts chart in paginated reports. Both chart definition and data can be provided at the runtime if that is the way to go. Please provide your thoughts.

Helpful resources

Announcements
Fabric Community Conference

Microsoft Fabric Community Conference

Join us at our first-ever Microsoft Fabric Community Conference, March 26-28, 2024 in Las Vegas with 100+ sessions by community experts and Microsoft engineering.

February 2024 Update Carousel

Power BI Monthly Update - February 2024

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

Fabric Career Hub

Microsoft Fabric Career Hub

Explore career paths and learn resources in Fabric.

Fabric Partner Community

Microsoft Fabric Partner Community

Engage with the Fabric engineering team, hear of product updates, business opportunities, and resources in the Fabric Partner Community.