FAQ Database Discussion Community


Change Y axis labels in C3 charts

jquery,c3
Is it possible to change or categorize the Y axis labels in C3 line chart. Is it possible to categorize and display the Y axis labels as "Beginner","Intermediate", "Advanced" and "Mastery" where the values would be ranging between 0-25, 25-50, 50-75, 75-100 respectively?...

How to remove cursor pointer from d3 Pie chart

d3.js,pie-chart,c3
Is there an option that disables the "cursor: pointer" style from the c3|d3 pie chart? I simply display slices and on hover just show the % percentage and a label, do not need the pointer because it is misunderstood as a link to somewhere, yet it is the default cursor......

C3 js line chart getting error for date

javascript,charts,c3
I am trying to use c3.js timeseries line chart (URL : http://c3js.org/samples/timeseries.html). The only difference being that I am using the CDN link to the js files instead of downloading them. However I keep getting the following error Chrome Uncaught Error: x is not defined for id = "date". Firefox...

Creating c3 graphs with dynamic values

php,jquery,mysql,c3
Below is the code i'm using to generate a line graph using c3.js . In the variable 'value' I'll get the values to be plotted as comma separated values. I've hard coded the values now. With this code, the graph generated has only one value - '0'. This code doesn't...

custom attribute type directive to set the background color of c3 chart

angularjs,charts,angularjs-directive,c3.js,c3
I am using Wasil C3 angularjs directives (http://wasil.org/angularjs-directive-for-c3-js-tutorial) and there is also a sample plunker through compilation (http://plnkr.co/edit/wiiUMk2KoHHrK4D1HdNu?p=preview). As need to set the back ground color of the sub chart, I am trying to create a custom attribute directive (subChartBgColor), so that on which ever chart I want to set...

C3js, Papaparse, Parse CSV to C3js

csv,c3,papaparse
I've been trying to parse a CSV file with Papaparse4 to use it on charts created with C3js, but I can't get it to work. I want to be able to load different CSV files, so I'm using a file input, the file gets parsed (I can see it on...

radio button in conjunction with c3 does not show text

html,d3.js,c3
I am creating a custom legend, that contains radio inputs, of a pie chart created with c3. I create radio inputs via D3 API. I haven't been able to show the text on the side of radio input. d3.select('.container').insert('div', '.chart') .selectAll('input') .data(['data', 'data10', 'data5']) .enter().append('input') .attr('type', function (id) { return...

Updating C3 charts on props change with React

reactjs,c3
I am trying to beautify the update of a C3 chart written as a React component when its data change. The data flows to the component from a parent component via its props. The solutions I have now "works" but do not seem optimal: when new data comes in, the...

How to increase size of pie segment on hover in d3

javascript,d3.js,pie-chart,c3
I created pie chart using d3. How to increase size of pie segment on hover? As you can see, green segment is so small so I want to change it size like red segment. How can I do this? My code: var w = 400; var h = 400; var...

c3 graph in a dark background; how to change axis and tick value color

javascript,jquery,d3.js,c3
I have plotted a graph on a dark background but due to the axis-color and tick-value color it is very difficult to read. How do I change to color of the axis, ticks and axis tick value to white?

How to create stacked bar chart using C3 for string data?

bar-chart,c3
I am trying to created stacked bar chart using C3 chart. But i am facing problem as i am trying to plot a graph with string values. My data looks like this var data1=["Country", "Denmark", "India"] var data2=["Value", 1, 1] var X=["Item",'Item1','Item2] c3.generate({ data: { x:'Item', columns:[[data1],[data2]], type: 'bar' ,...

Position an inset legend at the top-center

javascript,dom,d3.js,c3
According to the C3 documentation, legend.inset.postition only supports top-left, top-right, bottom-left and bottom-right positions. I would like to have my legend positioned at the top-center. Here is the JS that creates the plot: var chart = c3.generate({ data: { columns: [ ['data1', 100, 200, 50, 300, 200, 50, 250, 100,...

How to show values in C3.js in Donut Legend?

javascript,d3.js,charts,c3
here goes a simple example screenshot where you can see a donut chart. Is it possible to show the real values (not the %-calculated ones) in the legend of the chart like marked with red arrows in the screenshot? Everybody want's to know "22.7 percent of WHAT" when watching the...

C3 Charts: Hiding Keys on Bar Graphs

javascript,charts,c3
I've looked through all of the documentation and can't find a way to hide the keys for a bar graph. Basically, I'd like to remove the 'total' and color at the bottom. Has anyone found a way to do this? ...

c3.js how to get a onclick event for DataGroups

javascript,jquery,angularjs,d3.js,c3
I have been using c3.js and cant figure out how to get a JavaScript event for onClick of the Data group labels which is displayed in X Axis. Basically i need event to which I can register a event handler in the below Circled area. ...

Setting the graph name in C3.js

javascript,d3.js,c3.js,c3
I have a graph that in which I load new data, using the following function: function insertGraph(yAxis, xAxis, Header) { setTimeout(function () { chart.load ({ bindto: "#graph", xs: { 'y':'x' }, columns: [ yAxis, xAxis ] }); }, 100); } An Example of values for yAxis, xAxis, and Header that...

How to display the message in the popup?

jquery,razor,model-view-controller,c3
i have a popup that was designed in a html page. i need to show the message "This batch contains " + TargetCount+ " records. Please press Continue to finish importing your data.", near the buttons outside the border,where the "TargetCount" returns from controller. I have my controller like, [HttpPost]...

LineChart with C3 using JSON

json,c3
I can't understand because my chart is not working properly. Anything is displayed. Below my simple code: <div id="chartc3"></div> <script> var scene; $.getJSON('assets/json/chartc3.json', function(data) { scene=data; var chart = c3.generate({ bindto: '#chartc3', data: { json: scene, keys: { value: ['round','val'], } } }); }); </script> and the following json file:...

c3 JS scroll bar jumping when loading new data

javascript,css,angularjs,d3.js,c3
We are using c3 as a wrapper around d3 javascript charting library. You can see even in their own demo when the data is updated the scroll bar flickers momentarily. This isn't a problem when there is already a scrollbar on the page as it is in their case. But...

How to fit Y axis in c3

javascript,angularjs,c3
I want to use rotated axis and I want to fit Y axis. How can I do this? I tried : c3.generate({ data: { x: 'x', columns: [ ['x', '2013-10-31', '2013-12-31', '2014-01-31', '2014-02-28'], ['sample', 30, 100, 400, 150], ] }, axis : { rotated: true, x : { type :...

how to style style line chart points in c3js

javascript,d3.js,charts,linechart,c3
I have a general c3js question. I'm trying to make the points in a C3JS line chart "hollow" (white fill, with a colored stroke), but am having a hard time figuring out how to do that. I've tried to add my own CSS, but it gets overwritten by the direct...

How to Create Dojo Widget using C3

javascript,dojo,widget,c3
I couldn't find any example describing the creation of Dojo Widget using C3 library. Before trying to create a widget, I tried to create a module, and it worked. I am new with Dojo ... so here is what I tried to create a Widget with c3 : require([ "dojo/_base/declare",...

Defining a category axis using c3.js

javascript,d3.js,c3
I just started using c3.js and I haven`t figure out how to specify the values of ticks in x axis. The values are type1, type2, type3... and here is my code: $(document).ready(function(){ var mammoReconstructionsAcceptedChart = c3.generate({ bindto: '#mammo_reconstructions_accepted', data: { x: 'x', columns: [ ['x', 'type1', 'type2', 'type3', 'type4', 'type5',...

c3js line chart all data unselected how to show tick values

javascript,d3.js,data-visualization,c3
I have a simple c3js line chart w/3 different lines. When I "unselect" all 3 data sources, the x-axis tick values disappear. I was wondering if there was anyway to reverse this behavior? I'd like to show the x-axis tick values even when there is no data present. The xaxis...