Join us at FabCon Atlanta from March 16 - 20, 2026, for the ultimate Fabric, Power BI, AI and SQL community-led event. Save $200 with code FABCOMM.
Register now!The Power BI Data Visualization World Championships is back! Get ahead of the game and start preparing now! Learn more
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
Check out the November 2025 Power BI update to learn about new features.
Advance your Data & AI career with 50 days of live learning, contests, hands-on challenges, study groups & certifications and more!
| User | Count |
|---|---|
| 7 | |
| 5 | |
| 4 | |
| 2 | |
| 2 |