Skip to main content
Filter by
Sorted by
Tagged with
1 vote
1 answer
32 views

No data on second axis

I am new here and have a question regarding the y2 axis in the c3 graph. Namely, the values ​​refer only to y and not also to y2 as I defined in the code. I enabled y2 and assigned data14: 'y2' What ...
Jan81's user avatar
  • 11
0 votes
2 answers
103 views

Black background appearing on SVG when converted to PNG for mPDF library

I'm working on a feature that converts DOM content into a PDF using the mpdf/mpdf library from Composer/Packagist, and it generally works great. However, part of the DOM content is generated using C3....
SeonPrim's user avatar
0 votes
1 answer
40 views

C3 bar chart looks squished when rotating axes

I have a C3 bar chart with potentially A LOT of categories on the y axis, and want the height of the graph adjust to the contents. By default, for some reason C3 seems to always set the height to 320. ...
hcac's user avatar
  • 133
0 votes
0 answers
32 views

Problem getting c3 chart to load in React component

I tried to follow both the c3 charts docs here: https://c3js.org/samples/chart_donut.html And this stack overflow here: C3 chart not rendering in react project But it is still not rendering nor are my ...
CatLover2291's user avatar
0 votes
1 answer
64 views

Creating realtime Bar chart with react-rt-chart

Please i need concerning my graph for my project everthing works perfectly just that it is only showing line data instead of bar chart import RTChart from 'react-rt-chart'; //data changes on state ...
user avatar
0 votes
1 answer
39 views

c3.js How to get the name types of the series of a chart?

for example, chart.data.names(), return array with name series ('data1','data2'...). I need something like chart.data.types(), to return array 'data1':'bar','data2':'line', because I need to act on ...
José María Jiménez's user avatar
0 votes
1 answer
62 views

c3js tick width multiline=false not working

I'm trying to make left ticks in single line (like css norwap) but the multiline: false, as the official documentation suggests, doesn't work. var graph = c3.generate({ bindto: "#chart", ...
user2342558's user avatar
  • 6,655
1 vote
1 answer
94 views

How to coustomise the Y-axis grid line css properties in c3js

I have created a line chart with time series data. I used custom X-axis grid lines and increased their spacing by editing their CSS. I would like to increase the spacing between the grid lines on the ...
Akhil S Babu's user avatar
2 votes
1 answer
51 views

Stacked barchart in C3.js don't show group

I am trying to make a stacked barchart in C3.js with a JSON with the fields product, month, amount_sale, for example: [{"product": "Pulp", "month": "january", &...
Aegis's user avatar
  • 131
0 votes
1 answer
42 views

`c3` package does not work with reactivity in a shinyApp

I'm trying to use a reactive object inside the c3 package graphics in a shinyApp. However, the graph is not produced by the server. See the code I used: library(shiny) ui <- fluidPage( shinyjs::...
neves's user avatar
  • 826
0 votes
0 answers
162 views

C3 Charts in C# html

Recently im working on c3 charts its actually working great but i had a problem with dynamically get multiple data in DB Multiple XY Lines chart X had to be in string I actually want multiple xy ...
Jack Sparrow's user avatar
0 votes
0 answers
21 views

How do I get rid of all the unnecessary padding and margins in c3.js

I want to get rid of all the spacing basically, i.e the extra spaces for axes and legends and want the c3 lines to attach/fit to the div element. I tried to use svg viewBox attribute for it to scale ...
ifzalkola's user avatar
0 votes
1 answer
108 views

c3js timeseries chart interval colors

I'm starting with the c3.js library and I want to make a time chart (timeseries) and color-code the values based on some intervals. I receive the data from a json after making a query in PHP. I make ...
user68481's user avatar
1 vote
0 answers
66 views

How can I hide bars with null values in C3.js?

I have a C3 chart with data as given in columns. Notice that there are null values in data1 and in between data 3. C3 is trying to display my bar chart in groupings of 5, creating a separate bar for ...
Yash Koolwal's user avatar
1 vote
0 answers
56 views

How to fix this phenomenon on my c3 line chart? missing dashed line

Missing dashed line I can't get correctly dash line in my c3 chart when I use regions option. please, let me know how can I fix this phenomenon. I couldn't get any information from anywhere about this ...
SungW's user avatar
  • 11
2 votes
1 answer
789 views

C3JS Uncaught TypeError: Cannot read properties of undefined (reading 'getItem')

I know that there is full of question about this problem, but I have this strange scenario where: Initially I have one C3JS pie chart, where on click needs to generate another C3JS bar chart. Until ...
makaMa's user avatar
  • 21
0 votes
1 answer
57 views

c3 x-axis text is very large on chrome

We used C3 charts in one of our projects, but after I upgraded chrome to latest version I got an issue, the chart renders very large text size for x-axis and once I resized the browser it renders ...
mmarjeh's user avatar
0 votes
0 answers
126 views

C3.js and JavaScript - How to integrate buttons with the legend of the chart

I am working with a c3.js chart and want to integrate buttons with the legend of the chart. I know that this is possible using JavaScript, but I don't know how to relate the button in the HTML page ...
larari's user avatar
  • 7
0 votes
1 answer
242 views

C3.js - axis X time format locale

I am new at C3.js, and I am trying to do a timeseries chart. My goal is to set Portuguese Brazil as the default locale. I already saw that d3.js has an implementation that change the time format. But ...
larari's user avatar
  • 7
0 votes
2 answers
649 views

C3 chart - How to set X-Axis a DateTime interval 1 week?

I am very new to building charts with c3. I've done a search, but I could not find an answer. Could anyone help? How can I force to set in X-Axis a DateTime interval of 1 week, if my dates start with ...
Jitendra Rathor's user avatar
1 vote
0 answers
108 views

c3 js zoom api domain explaination

sorry in advance, english is not my native language. I have a json that looks somewhat like the following: { "Date": "19.09.2021", "a": "1100", &...
questioneer's user avatar
1 vote
0 answers
77 views

sorting c3 stacked bar chart per category

i need to sort stacked bar chart in each category by value so for the following code: var chart = c3.generate({ data: { columns: [ ['data1', 100, 400, 500, 800, ...
user3597274's user avatar
0 votes
1 answer
52 views

is there a method to represent a custom barchart?

i have data like total= [1200,200,300] A = [300,100,100] B = [900,100,200] So total = A+B i want to represent this by stacked barchart to see the total with a gray color and the proportion of A in ...
Omayma HARBAOUI's user avatar
4 votes
1 answer
638 views

Create custom tooltip data C3 pie chart

Im trying to create a detailed tooltip on C3 pie chart (source), here my starting code : var chart = c3.generate({ data: { columns: [ ['Error', 72,15,11], ['...
logobi's user avatar
  • 63
0 votes
1 answer
919 views

Change grid color in C3.js

How can I achieve this grid and label colors. I can find some answers on label colors but nothing on changing the grid color to the one shown in the screenshot, instead of the default black one. Just ...
Muhammad Rehan Qadri's user avatar
1 vote
1 answer
27 views

How to load a log file once and then append new logs in JavaScript?

I have a JavaScript function that loads a csv file and pastes its content to a c3js graph and the function reloads every 10 seconds for real time data, it looks something like this: function parseData(...
kod's user avatar
  • 11
1 vote
1 answer
393 views

c3.js How do I read max and min axis values?

I like the auto scaling for the y axis offered in c3, but I would like to be able to retrieve the max and min values that it chooses. In my case, I would like a Celsius scale on the y axis and and ...
PER's user avatar
  • 41
0 votes
0 answers
45 views

is there a method to update graph on click c3.js?

i used c3 .js to draw linechart timesseries , i want to add a button when we click on button , we show graph based on cumul instead of val ... or add a switchery button between val and cumul to show ...
james debenardi's user avatar
2 votes
1 answer
234 views

C3.js horizontal bar chart - Highlight a specific x-axis tick together with bar

I've created a very simple horizontal bar chart with C3.js that is listing data from my SQL database. The chart is accessible on it's own without any filter, but also by passing data from a previously ...
KrisV's user avatar
  • 33
0 votes
1 answer
20 views

c2.js scatterplot does not use new x-axis values

Please forgive me if this question has an obvious answer. I am using c3.js to plot two sets of data on the same graph. The data happen to be a time series. I make the first plot (c3.generate) and it ...
PER's user avatar
  • 41
1 vote
0 answers
246 views

When I put a date label on the X axis in a chart using c3.js, I get the error Error: <g> attribute transform: Expected number, "translate (NaN, 0)"

I'm creating a chart using c3.js. I want to put the date on the X-axis label, but I get the following error: Error: <g> attribute transform: Expected number, "translate(NaN, 0)" ...
tenifre's user avatar
  • 169
0 votes
1 answer
379 views

Using API to create a gauge chart

I'm creating a dashboard for a group project. I've been tasked with creating a gauge that displays the air quality (EPA Health Concern level). I've used an API (ClimaCell) to get the value. The ...
Ricki Lee's user avatar
0 votes
1 answer
862 views

How to edit C3.js line chart tick format to show a specific type of label

How can I edit the x-axis tick format on my c3.js line graph to show a 'year-year' format? I'm building a graph to show the rising use of food banks, but the data I've received is for financial years ...
LGold21's user avatar
0 votes
1 answer
282 views

c3.js Bar Chart: how to display data labels diagonally

I'm using c3.js Bar Chart in my React Project, I want to display the data labels diagonally, how can I achieve this? https://i.sstatic.net/PJESQ.png
Jasper Ejoc's user avatar
1 vote
2 answers
630 views

Adjust c3 axis labels with css

I am using R's c3 package which is a wrapper for the C3 javascript charting library by Masayuki Tanaka. My c3 chart below cuts off the last date on the x-axis. Using Chrome Inspector I can manually ...
ixodid's user avatar
  • 2,360
1 vote
1 answer
1k views

Convert pandas DataFrame to JSON dictionary of lists

I have a pandas dataframe representing some basic weather info which looks like this location dDate min-temp max-temp rain Sydney 2013-01-01 15 35 10 Sydney 2013-01-02 16 36 5 Sydney 2013-01-03 16 ...
rossco's user avatar
  • 625
4 votes
2 answers
3k views

Uncaught TypeError: this.d3.set is not a function

Following the example on https://c3js.org/gettingstarted.html I ran into above mentioned error. I have set up php -S localhost:8000. Then I open this .html file: <!DOCTYPE html> <html lang=&...
schmark's user avatar
  • 73
1 vote
1 answer
387 views

c3.js - How to manually trigger the hover of a donut arc?

I'm using c3.js and have a donut chart that has custom text inside the donut as you hover over each category. I got that all working great. I have some custom elements relating to the chart but are ...
Chief's user avatar
  • 127
1 vote
0 answers
276 views

how to get custom Label in c3.js onclick event

Adding Image for better understanding. Used below function inside data in c3.js bar chart onclick: function(d,i){ console.log("onclick",d,i); }, Current Output: x: 1, value: 200, ...
DEVASHISH MAURYA's user avatar
1 vote
1 answer
171 views

Reduce too big gap between C3 widget and surrounding text in Rmarkdown

I want to include an gauge plot in my rmarkdown document using library(c3). However, the gap is too big: --- title: "Gauge" output: html_document --- # Gauge Too big gap to the gauge: ```{...
thothal's user avatar
  • 20.2k
0 votes
0 answers
145 views

chart date interval (X: date, Y: text label) with c3.js

I would want to make a c3.js chart with : X: date Y: text label ("TOTO", "TITI", "TUTU", ... : ok with "category" property, it's possible) line corresponding ...
stack80's user avatar
  • 33
0 votes
1 answer
289 views

Adjust line thickness of c3 plot from R

I wish to increase the thickness of line graphs in c3 Shiny App library(shiny) library(c3) library(tidyverse) ui <- fluidPage(theme = "my.css", c3Output("chart") ...
ixodid's user avatar
  • 2,360
1 vote
1 answer
45 views

Modify x-axis labels of C3 plot from R

Using an R script, I would like to modify the x-axis labels of a plot created with the c3 package. From the documentation here, under xAxis it states that the categories argument is a character vector ...
ixodid's user avatar
  • 2,360
0 votes
1 answer
59 views

Y-axis labels disappear when add values using C3

The C3 chart prints OK if I don't try to explicitly state the values for the y-axis. However, I find the labels messy. If I try to force y-axis label values, no labels are printed. Yet, the third ...
ixodid's user avatar
  • 2,360
2 votes
1 answer
320 views

How to change the interval color on C3 Gauge in Shiny

I am trying to disply different colors for different intervals for the c3 Gauge. Specifically, I would like to display red, yellow and green for intervals. library(c3) data.frame(`Bullish Percent` = ....
Jordan Wrong's user avatar
  • 1,245
0 votes
0 answers
252 views

C3js: Multi Color line in a single data

I have C3.js line chart and I have implemented some custom design changes in it, and which is working fine till now. I'm unable to achieve the following design changes in it: a) Multicolor lines for ...
sanjay pandita's user avatar
0 votes
1 answer
563 views

Config data input for multiple categories chart in c3js

I'm doing a line / column chart form, as designed in the image below. The first level of categorization is grouped by month-year, the next level is name. I do not know how to configure the input data ...
minhminh's user avatar
0 votes
0 answers
106 views

timeseries via json in c3 line chart

I use d3/c3 library to create a chart with two lines representing timeseries: yr0 and yr0 on the y-axis, x is the x-axis data. The lines are fed by a Json feed which I generate in PHP. However the ...
Mark Henry's user avatar
  • 2,699
0 votes
1 answer
92 views

Can't get c3.js right click event arguments

I'd like to control right click event on c3.js graphs. I found a solution Right mouse click detection on SVG shape in JavaScript not working, but I can't get data and index arguments. Is there any ...
bmb2020's user avatar
0 votes
1 answer
21 views

data arrays with timeseries and additional y axis c3.js

I want a timeseries plot with a second y axis with data from 3 arrays: var DATE = ['2020-08-14 09:04:12','2020-08-14 09:04:13','2020-08-14 09:04:14']; var TEMPIN = [12,6,14]; var PRESS = [2000,1988,...
Paul G.'s user avatar
  • 479

1
2 3 4 5
23