When I try to remove the Legend. For example:

    legend: {
        show: false
    },

I get an "Uncaught TypeError: Cannot call method 'selectAll' of null" error. The variable "legend" seem to be NULL

        l = legend.selectAll('.legend-item')

Uncaught TypeError: Cannot call method 'selectAll' of null c3.js:2779
updateLegend c3.js:2779
redraw c3.js:2489
init c3.js:1868
c3.generate c3.js:3118

I am using C3.js downloaded March 4, 2014.

  var chart = c3.generate({
    bindto: '#chart',
    data: {
      x : 'date',
      x_format : '%Y%m%d',
      columns: [
        ['date', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
        ['sample', 30, 200, 100, 400, 150, 250]
      ],
      type: 'bar'
    },
    axis : {
      x : {
        type : 'timeseries',
        tick : {
          format : "%b %d %Y"
        }
      }
    },
    legend: {
        show: false
    }
  });

Thanks,
Michael

I had tried to use region option with bar chart, it work but the result is not so precise as you had did with line chart. Is that possible to add an option bar chart with regions. I would propose using gradient or fill pattern with the selected region. Thanks.

Merge data contained in target and show as a target.

Hello, maybe someone could provide quick fix for this problem:
http://jsfiddle.net/z6Ebm/

Without custom x-axis configuration it works just fine.

The margin between labels being set with the current API does not work effectively with many items in the legend.. for example:
item: {
width: '10'
}

Would it be possible to (rather than specifying a width..) position the legend onto a new line if they exceed the chart length?

At the moment, we have turned off the legend as it does not display well with many items in the legend... however, this has a caused an issue with the pie chart...

Could we choose to display no values in the pie chart and be able to use a legend with the little transition when selecting a section of the pie?

For example... this pie chart would have no legend or values but would have a tooltip to display the values?

Hi,

I am using your great library to display some charts on a dashboard.
Using the line-chart I am running into the problem: The tick-values on the Y-axis are clipped off. (see attached screenshot)

I am using the following format for the y-axis:
axis: { y: { format: d3.format(",") }}

In the attached screenshot the first tick should be 100,000 and the last tick should be -80,000. Even when I remove the format from the options the values are clipped.

How can I format these ticks or expand the area that is used to display the tick-values.

Thanks in advance.

Regards,

Paul

Hi.

Any plans to support legend/caption in X/Y-bar? The classic one instead of tooltip. Because at the moment, you cannot do a subtitle to the X-Axis as far as I understand.

Can I have some default configuration to disable tooltip?

Thanks.

Hello Masayuki,

When using IE10, the tooltip does not hover correctly on the x-axis. It follows the mouse along the y-axis, but stays flush with the left edge of the chart and does not move along the x. It seems to work fine in Chrome.

I tested it both in my local copy, and on the c3js.org website.

Thank you.

I have websites as chart labels, and they do not unload properly.

http://jsfiddle.net/e482V/3/

I tried to hack around it using something like

this.compare_chart.unload("www.google.com".replace('/./g', '\.'));

but there are a cascade of issues with this.

for now, I'm just doing

chart.load({
columns: [
['www.google.com'.replace('/./g', ''), 30, 20, 10, 40]
]
});
this.compare_chart.unload("www.google.com".replace('/./g', ''));

but it's not optimal.

I also tried using

names: {
'www_google_com': "www.google.com"
}

but that doesn't seem to work during dynamically loading data. I will not know the names of the websites when I generate the chart the first time.

In given example, subchart labels should be [0, 1, 2, 3, 4, 5] .

Hi @masayuki0812 , i find your library quite awesome and I am using it in my project. However I met a trouble. When you have line chart and it's width is small and there are a lot of data lines and legend items, the legend won't display correctly. The legend items will exceed the chart limits. So the solution I think of is not to try place all legend items in one line, however split on a few. If you don't mind I want to expand your library with this idea. What do you think?

Setting the y-axis min to zero for a bar chart results in it not being respected. Setting it to a small value like 0.00001 is currently a workaround to get the desired visual result.

I'm having an issue in Chrome when my line graph contains decimal values and they are not displaying correctly. This graph works correctly in IE, but the same chart contains errors in Chrome.

This is the chart in IE. The y-axis starts at 97.6 and goes up to 100.2.

Here's the same chart in Chrome. As you can see, the values on the y-axis are now being display as 00001 or 00002 with the exceptions of 98.4 and 99.4. If anyone has any knowledge on this issue, I would certainly appreciate it.

implement 'toPie' interface

Is there any special actions to take if i want to completely remove graph? For example, i want to initialize new graph with different options and data in the same container.

Hello,

I have a couple questions about formatting the axes.

For X axis, is there a way to display arbitrary category tick labels? For instance, I would like to display text instead of number for categories (like 'America' 'Europe' 'Afria' etc. rather than 1, 2, 3.

For Y axis, how can I format the ticks as currency, for example?

I like the simplicity of the library and the output. Thanks for writing it!

Affects Bar Chart at least, reason: getXDomainRatio returns -Infinity .

Add filled versions of Line chart and Spline chart. I've already implemented this, just need some time to merge changes to upstream.

Hi @masayuki0812
In the recent commits you should broken the X Domain. When it has lot of values it trys to draw all the values overlapped.

Any ideas?

Hi @masayuki0812, I very do love your library.
I spotted a bug, if you have several charts on the same page the window.onresize function actually re-set the width only for the first one. I think it should work for all the C3's svgs in the DOM.

Thank you man, you'r doing a great work.

https://github.com/masayuki0812/c3/blob/master/c3.css#L107-L109.-tooltip

  -webkit-box-shadow: 7px 7px 12px -9px rgba(119,119,119,10);
     -moz-box-shadow: 7px 7px 12px -9px rgba(119,119,119,10);
          box-shadow: 7px 7px 12px -9px rgba(119,119,119,10);

has an invalid alpha value, and crashes sass with this message:

"Alpha channel 10 must be between 0 and 1 for `rgba'"

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

I changed this to

  -webkit-box-shadow: 7px 7px 12px -9px rgba(119,119,119,1);
     -moz-box-shadow: 7px 7px 12px -9px rgba(119,119,119,1);
          box-shadow: 7px 7px 12px -9px rgba(119,119,119,1);

I can't PR because I don't know what the css is supposed to do (new user) so I don't know if you wanted transparent/opaque. I just set it to 1 in my own install.

chart.toBar(); is an example you have but cannot see chart.toPie() implemented, any chance of that?

Three format styles located in this fiddle.
http://jsfiddle.net/wXJTL/

I would like to have the y-axis tick marks follow the first format, while having the tooltip on hover be the complete number, possibly with additional formatting.

I tried using
tooltip: {
contents: function (d) {
//lots of code repeated from c3.js
//lots of namespacing issues and references to functions internal to c3
}
}

But it's not a great workaround.

Perhaps:
tooltip: {
format: {
title: uppercase,
value: commify
}
}
as a format, with y axis and x axis as defaults?

Sometimes i get this error in console:

Error: Invalid negative value for attribute height="-2278.5"

but mostly all negatives are converted to zeros.

Fiddle

shows the issue in the basic example. The browser is chrome in the image, but firefox and IE are worse usually.

I tried Y-axis padding, but that's not the same thing.

The gut reaction was to use:
padding: {
top: 10,
bottom: 10
left: 40,
right: 10
}
to create the effect desired, but only left and right padding is available currently.

Hi Masayuki,

Is there an option to force to start the Y-axis always with 0?
I know you could add an optional grid-line on the Y-axis in 0, but I want to force the chart's y-axis always to start in 0.

Thanks in advance!

Regards,

Paul

Sorry, I am not good at English....

I was able to confirm that the "Tooltip" is not displayed under the following conditions.

1. If using <base> in <head>
2. If URL in address bar does not match URL specified in the <base>
3. If browser is Firefox

I think the cause is a method of generating "clipPath".
I've solved using "location.href".

<example>
clipPath = "url (" + location.href + "#" + clipId + ")";

main.append("g")
...
.attr("clip-path", __axis_rotated ? "" : "url("+location.href+"#xaxis-clip)")
...

Because C3.js is a great library, I hope the development of future!!

Case3 in http://jsfiddle.net/e482V/1/

implement toArea interface

Event rects need to be updated

Could we have an API call to enable scrolling while the mouse is over a chart?
Currently it must be due to the zoom feature but could you choose between zoom:true or scroll:true?

Move from #57

Hi! Is there any way to, on chart.load or any other event, set custom grid line values? I have several permutations/views on a single chart and their y-axis values are wildly different; I'd only like to show my custom gridlines on certain views.

Thanks!

Is there a way to display gridlines? If not, would you consider adding it as an enhancement? Thanks.

Enhancement Request: Add Option (e.g. "Show: False") for Tooltips to disable the display of tooltips.

Hello Masayuki,

This issue appears in both Chrome and IE10. Using a formatter for the y-axis, it renders correctly on the initial draw. When the window is resized, the format is reset to basic numbers.

Strangely, it also changes the x-axis format from the initial draw even when it is not specified. You can see this behavior at http://c3js.org/samples/axes_y_tick_format.html

Thank you.

For instance, if you put several chart with bars and put some of them hide, the max value of the y will be calculated with the hidden columns also.

Can you open up access to resize() externally, i.e. c3.resize()? We have widgets that resize and need to poll an event to make the chart resize with it. Thank you!

If you want to add a couple of donuts in say 4 divs next to each other. The way xLegend position is computed is not space efficient. It uses the maximum width/margin for all boxes and text in legend. While this looks better visually, but sometimes doesnot work well if you need to fit multiple donuts next to each other.

I suggest adding an option to compute space as efficiently as possible. This is my approach to making this happen.

function updateLegend(targets, options) {
            var ids = getTargetIds(targets), l;
            var total_width = 0, x = 0;
            var xMap = {}; // add xMap here
            var xForLegend, xForLegendText, xForLegendRect, yForLegend, yForLegendText, yForLegendRect;
//            var item_height = 0, item_width = 0, paddingTop = 4, paddingRight = 30, margin, updateSizes;
            var item_height = 0, item_width = 0, paddingTop = 4, paddingRight = 10, margin, updateSizes;
            var withTransition;

            options = isUndefined(options) ? {} : options;
            withTransition = isDefined(options.withTransition) ? options.withTransition : true;

            if (isLegendRight) {
                xForLegend = function () { return legendWidth * 0.2; };
                yForLegend = function (d, i) { return margin + item_height * i; };
            } else {
//                xForLegend = function (d, i) { return margin + item_width * i; };
                xForLegend = function (d, i) { console.log('d', d, 'margin', margin, 'xMap', xMap, 'xMap[d]', xMap[d]); return margin*i + xMap[d]; }; // use  xMap to place boxes
                yForLegend = function () { return legendHeight * 0.2; };
            }
            xForLegendText = function (d, i) { return xForLegend(d, i) + 14; };
            yForLegendText = function (d, i) { return yForLegend(d, i) + 9; };
            xForLegendRect = function (d, i) { return xForLegend(d, i) - 4; };
            yForLegendRect = function (d, i) { return yForLegend(d, i) - 7; };
            updateSizes = function (textElement) {
                var box = textElement.getBBox(),
                    width = Math.ceil((box.width + paddingRight) / 10) * 10,
                    height = Math.ceil((box.height + paddingTop) / 10) * 10;
                xMap[textElement.textContent] = total_width; // keep a reference to where this box should be placed
                total_width += width; // append to total width
                if (! isLegendRight) {
                    margin = (legendWidth - total_width) / 2; // recompute margin
                }
//                if (width > item_width) {
//                    item_width = width;
//                    if (! isLegendRight) {
//                        margin = (legendWidth - item_width * Object.keys(targets).length) / 2;
//                    }
//                }
                if (height > item_height) {
                    item_height = height;
                    if (isLegendRight) {
                        margin = (legendHeight - item_height * Object.keys(targets).length) / 2;
                    }
                }
            };

Putting several columns into a bar chart, the bars do not fit onto one timestamp and spread across others. Here is an example.

is there a possibility of taking the columns of data and dividing them to get the appropriate width?

The same data works fine for the line graph..

Do I have to change the x axis to categories for them to bunch correctly on the x-axis?

Furthermore, there seems to be an issue with the stacked bar chart:

As you can see, 'employers-national-insurance' is only 2154 but appears above 'salaries' which is 25188. 'Accounts-Recievable' is correct but 'employers-national-insurance' should be below 'salaries'

It'd be really nice if line, spline, line-area, and spline-are charts could be stacked. It doesn't seem to function like this currently.

It'd be great for timeseries graphs, so a few different related metrics (like http status codes, sale types) could add up to a total(like number of requests, or sales).

Hi,

Is it possible to set the number of items in the x axis at a given time? for example.. currently for the chart, the x axis contains the same amount of values..:

Small screen size

Medium screen size

Large screen size

Regardless of the chart size, there is 7 items on the x-axis... is there an option in the API to limit this such as:

axis: {
x: {
values: 3
}
}

this would produce the following:

axis: {
x: {
values: 5
}
}

would produce the following: