Power BI is turning 10, and we’re marking the occasion with a special community challenge. Use your creativity to tell a story, uncover trends, or highlight something unexpected.
Get startedJoin us for an expert-led overview of the tools and concepts you'll need to become a Certified Power BI Data Analyst and pass exam PL-300. Register now.
Is there a way to put this D3 visual https://c3js.org/samples/chart_gauge.html or this one http://bl.ocks.org/msqr/3202712
into PowerBI? I've just inserted the JS Code inside de D3.JS Visual but it shows just a blank space...
Here is the code
var chart = c3.generate({ data: { columns: [ ['data', 91.4] ], type: 'gauge', onclick: function (d, i) { console.log("onclick", d, i); }, onmouseover: function (d, i) { console.log("onmouseover", d, i); }, onmouseout: function (d, i) { console.log("onmouseout", d, i); } }, gauge: { // label: { // format: function(value, ratio) { // return value; // }, // show: false // to turn off the min/max labels. // }, // min: 0, // 0 is default, //can handle negative min e.g. vacuum / voltage / current flow / rate of change // max: 100, // 100 is default // units: ' %', // width: 39 // for adjusting arc thickness }, color: { pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], // the three color levels for the percentage values. threshold: { // unit: 'value', // percentage is default // max: 200, // 100 is default values: [30, 60, 90, 100] } }, size: { height: 180 } }); setTimeout(function () { chart.load({ columns: [['data', 10]] }); }, 1000); setTimeout(function () { chart.load({ columns: [['data', 50]] }); }, 2000); setTimeout(function () { chart.load({ columns: [['data', 70]] }); }, 3000); setTimeout(function () { chart.load({ columns: [['data', 0]] }); }, 4000); setTimeout(function () { chart.load({ columns: [['data', 100]] }); }, 5000);
Any help is much appreciated!
Solved! Go to Solution.
Code sample you show uses C3 library.
D3.JS visual supports only D3.js. Pleae use the second example you have shown.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Code sample you show uses C3 library.
D3.JS visual supports only D3.js. Pleae use the second example you have shown.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.
Check out the June 2025 Power BI update to learn about new features.