c3.js

Adding icons to bar charts made using c3js

由 感情迁移 提交于 2019-12-10 12:16:46
问题 I have made a stacked bar chart using c3 libraries and would like to add icons to each column (using c3 or d3). I went through their documentation but there doesnt seem to be any relevant functionality! var chart = c3.generate({ data: { columns: [ ['data1', 30, 200, 100], ['data2', 130, 100, 140] ], type: 'bar', groups: [['data1', 'data2']] }, }); 回答1: You can import font-awesome and then (mis)use c3's label format configuration to set an icon for each series var chart = c3.generate({ data: {

Stacked Donut Chart in c3.js

由 时光毁灭记忆、已成空白 提交于 2019-12-08 14:20:25
I would like to customize a donut chart from c3.js so it that has 2 layers. This is the code for the very basic out of box c3.js based donut chart. var chart = c3.generate({ data: { columns: [ ['bulls', 30], ['lakers', 50], ], type : 'donut' }, }); This is an image of something similar to what i want to achieve: I did find this fiddle but I am not sure on how to implement it in c3.js. Here is a link to my fiddle . The D3 fiddle is actually creating three charts, each with a different radius. Each dataset uses "d3.pie" to create the arc that each piece of data will inhabit, and then the graph

Dynamic timeseries C3js chart

由 ￡可爱￡侵袭症＋ 提交于 2019-12-08 04:57:32
问题 I am new to C3.js and trying to create a dynamic timeseries chart, please run the code in fiddle http://jsfiddle.net/roytirthadeep/54v7r0ab/ var chart = c3.generate({ data: { x: 'x', xFormat: '%Y-%m-%dT%H:%M:%S', columns: [] }, axis: { x: { type: 'timeseries', tick: { format: '%H:%M:%S', } } }, legend: { position: 'right' } }); //"2013-01-01T00:00:01" var timeInc = 1; var value = 1; var interval = setInterval(function () { value = value + 1; timeInc++; var str; if (timeInc > 59) {

Stacked Donut Chart in c3.js

由 ♀尐吖头ヾ 提交于 2019-12-08 03:33:06
问题 I would like to customize a donut chart from c3.js so it that has 2 layers. This is the code for the very basic out of box c3.js based donut chart. var chart = c3.generate({ data: { columns: [ ['bulls', 30], ['lakers', 50], ], type : 'donut' }, }); This is an image of something similar to what i want to achieve: I did find this fiddle but I am not sure on how to implement it in c3.js. Here is a link to my fiddle. 回答1: The D3 fiddle is actually creating three charts, each with a different

How to swap out data via unload and load in C3.js

由 前提是你 提交于 2019-12-07 23:18:59
问题 I'm trying to swap out data sets in a C3.js graph. The code I assumed would work based on the C3 docs looks like this: chart.unload(); chart.load({ columns: [ ['data3', 100, 90, 80, 70, 60, 50] ] }); But this doesn't work. You'll notice that the graph rendered on the following Plunkr renders improperly, so I'm clearly doing something wrong: https://jsfiddle.net/7rfm9om9/ What is the idiomatic way to replace data in a C3 chart? 回答1: Ah, it appears that chart.unload() does some asynchronous

Modify Donut Chart Slices in C3/D3

由 左心房为你撑大大i 提交于 2019-12-07 18:16:28
问题 I have created a simple donut chart using c3.js. Here is the FIDDLE. If you hover over a slice of the Donut it will stick out. I was wondering if it is possible for the slice to stick out by default without hovering over. For example i want slice A, slice B, and C to stickout by default How can I do that? Here is my Code var currentSlice; var chart = c3.generate({ data: { x: 'x', columns: [ ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'], ['A', 30,

SVG to PDF conversion working for Plotly.js but not for C3.js

由 ◇◆丶佛笑我妖孽 提交于 2019-12-07 16:47:20
问题 I am using css2pdf for saving my svg chart to pdf after onclick event. It works nicely for plotly.js, but not for c3.js - please see my fiddle: http://jsfiddle.net/3hs7cs4f/ I am sure it has to do something with the c3.js svg properties, but I have no idea how to solve this. Here is the code: <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" /> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <script src="http://www.cloudformatter.com

C3.js - Show/hide points independently for a data series

由 此生再无相见时 提交于 2019-12-07 11:02:46
问题 I am creating a line chart for a data series using C3.js. I am struggling in trying to show the "points" only for one of the series. Basically, first I am creating a multiple series line chart with some reference data, and then I am loading (with char.load) a new particular data line in which I want to show points, only for that particular line while the other reference lines remain with hidden points. Is that possible via C3.js? If so, could you instruct me to do so, thanks! Also, any method

c3js position of data labels

由 别等时光非礼了梦想. 提交于 2019-12-06 18:58:31
问题 Is there any possible way to change a positions of labels above the data in c3 bar chart? In official documentation there is well explained how to change positions of labels on x and y measurement axis with manipulation of y and x integer, but I did not found anything for data labels. I've tried to point to it with plain d3 on which c3 is based but console.log returns me null: d3.selectAll(".c3-texts .c3-text").each(function () { var yOrigin = d3.select(this).attr('y'); console.log(yOrigin);

How can I add a title to c3.js chart

由 送分小仙女□ 提交于 2019-12-06 17:11:51
问题 Can any one suggest me the way of adding title to the C3.js line and bar charts ? I have got the following sample but it is for gauge chart. For any c3 chart is there any option to set the chart title? donut: { title: 'Title' } 回答1: You'd need to fall back to using D3 to add a chart title. Something like: d3.select("svg").append("text") .attr("x", 100 ) .attr("y", 50) .style("text-anchor", "middle") .text("Your chart title goes here"); 回答2: This was a top google result, so I thought I'd add
订阅 c3.js