Get certified for free when you join Fabric Data Days 2026 and dive into Fabric, Power BI, SQL, AI, and other essential data skills.
Join nowData Days is here! Join us now for 60+ days of learning, challenges, and connection. 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
Don't miss out on Data Days, June 15 through August 7. Learn Fabric, Power BI, SQL, AI and more.
Check out the May 2026 Power BI update to learn about new features.
| User | Count |
|---|---|
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 |