C3: Line chart including range filled area

[jjasonclark]

I have a line chart that no matter what I do to the data is shows a triangle shaped filled area that corresponds to the min and max of the whole chart. How do I get rid of this thing?

The giant black triangle from 1 to 9 is not based on data. If I remove all columns it goes away. And if I put back any columns it shows up again with the min/max of the data.

[jjasonclark]

Here is another screen shot showing a spike in the middle. This show that the box is some how attached to the first and last elements of the columns.

[masayuki0812]

Hi, Are you loading c3.css? This css is needed to render the chart properly.
Please see this tutorial. http://c3js.org/gettingstarted.html

[jjasonclark]

You are correct @masayuki0812 ! Thank you. I needed to include the css file. I didn't see that part of the install setup even though its in the same place as the JS includes. Ah well, you can tell I'm a JS dev and not a designer.

[ashishjmeshram]

@jjasonclark @masayuki0812 Hi I am also getting the similar kind of issue but while exporting the line charts to png. Here is the link to the question I posted on stack overflow. Exporting c3.js line charts to png images does not work

[MUVEN921]

Does any one have a solution for this, no matter what i do i am getting the exported/printed c3 line based charts as fill,i have checked the above stack overflow link but the chart export appearance looks way too disoriented some of them has legends with no color representation on them obviously with the above solution we are setting the fill none.

[MinchinWeb]

The css rule in particular that I seemed to be missing (or made the black zones go away) was:

.c3 path, .c3 line {
  fill: none;
}