The initial size of C3 charts is unnecessarily large upon loading

Question

The initial size of C3 charts is unnecessarily large upon loading

I am utilizing the C3 JavaScript library to showcase graph data on my webpage. Initially, when the page loads, the graphs remain hidden until a specific "tab" is selected. However, I am encountering an issue where the first graph does not fit within its designated div tag upon initial load. Changing the date range by clicking a button corrects this sizing problem.

Below is the HTML code snippet that includes the AngularJS framework for rendering the graphs:

<div class="chartgrouping">

<div ng-show="showGraphSection" class="graphA">
    <h2 class="section-main-heading">Data A</h2>
    <div id="dataAChart" class="chart c3"></div>
</div>
<div ng-show="showGraphSection" class="graphB">
    <h2 class="section-main-heading">Data B</h2>
    <div class="stats">
        <div class="highest-value">Data Breakdown<span>{{percentageOfSubstance}}%</span></div>
        <div class="goals">GOAL: 20%</div>
    </div>
    <div id="dataBChart" class="c3" style="max-height: 320px; position: relative;"></div>
</div>

</div>

Initially, the display is incorrect with the first graph stretching across completely. After loading new data and adjusting the display, the graphs resize appropriately. Is there a recommended solution for solving this issue?

javascript html css c3.js

Answer 1

Answer №1

The solution I discovered is related to how the full width of an element is determined when it is hidden, which is often the case when using bootstrap tabs or other hidden elements.

To work around this issue, you must trigger the resize event on the window so that d3, the underlying graphing library, can calculate the correct sizing.

jQuery(window).trigger('resize');

You can achieve this in bootstrap by using something like

jQuery('a[data-toggle=tab]').on('shown.bs.tab', function() {
jQuery(window).trigger('resize');
});

Answer 2

The solution I discovered is related to how the full width of an element is determined when it is hidden, which is often the case when using bootstrap tabs or other hidden elements.

To work around this issue, you must trigger the resize event on the window so that d3, the underlying graphing library, can calculate the correct sizing.

jQuery(window).trigger('resize');

You can achieve this in bootstrap by using something like

jQuery('a[data-toggle=tab]').on('shown.bs.tab', function() {
jQuery(window).trigger('resize');
});

Answer 3

Answer №2

Although @Flanamacca's suggestion was helpful, I found that only part of it worked for me. Implementing a setTimeout function with a delay of 0 did the trick in resolving the issue.

Answer 4

Although @Flanamacca's suggestion was helpful, I found that only part of it worked for me. Implementing a setTimeout function with a delay of 0 did the trick in resolving the issue.

Answer 5

Answer №3

After exploring various options, I finally uncovered a resolution. This particular fix is specific to Angular, so those encountering the same issue without using Angular will need to make appropriate adjustments.

The workaround I implemented involved removing an ng-show from the parent div and instead replicating it exactly on each individual sub-tag (the h2 and its siblings). It may seem like a simple solution now, but it was quite a challenge to arrive at this conclusion.

Answer 6

After exploring various options, I finally uncovered a resolution. This particular fix is specific to Angular, so those encountering the same issue without using Angular will need to make appropriate adjustments.

The workaround I implemented involved removing an ng-show from the parent div and instead replicating it exactly on each individual sub-tag (the h2 and its siblings). It may seem like a simple solution now, but it was quite a challenge to arrive at this conclusion.

Answer 7

Answer №4

I had no luck with the

jQuery(window).trigger('resize');

method. However, utilizing the C3 library's resize() function worked perfectly:

var chart = c3.generate({
bindto: '#chart',
data: {
    columns: [
        ['data1', 300, 350, 300, 0, 0, 0],
        ['data2', 130, 100, 140, 200, 150, 50]
    ],
    types: {
        data1: 'area',
        data2: 'area-spline'
    }
}
});


$('.collapse').on('shown.bs.collapse', function() {//Your event listener
    chart.resize();

});

Answer 8

I had no luck with the

jQuery(window).trigger('resize');

method. However, utilizing the C3 library's resize() function worked perfectly:

var chart = c3.generate({
bindto: '#chart',
data: {
    columns: [
        ['data1', 300, 350, 300, 0, 0, 0],
        ['data2', 130, 100, 140, 200, 150, 50]
    ],
    types: {
        data1: 'area',
        data2: 'area-spline'
    }
}
});


$('.collapse').on('shown.bs.collapse', function() {//Your event listener
    chart.resize();

});

Answer 9

Answer №5

In the case of utilizing Foundation with several tabs, the solution that proved effective for me was:

$('#myPanelId' ).on('toggled', function(){
        jQuery(window).trigger('resize');
 })

Ensure to substitute myPanelId with the actual panel id housing the charts.

Answer 10

In the case of utilizing Foundation with several tabs, the solution that proved effective for me was:

$('#myPanelId' ).on('toggled', function(){
        jQuery(window).trigger('resize');
 })

Ensure to substitute myPanelId with the actual panel id housing the charts.

Answer 11

Answer №6

Although I tried @Flanamacca's solution and it didn't work for me initially, I found that using the jQuery selector they recommended helped solve my bootstrap tab-related issue.

What ended up working for me was utilizing the c3 flush() method, which triggers a chart redraw (check out ).

$('a[data-toggle=tab]').on('shown.bs.tab', function() {
  my_c3_chart.flush();
});

Answer 12

Although I tried @Flanamacca's solution and it didn't work for me initially, I found that using the jQuery selector they recommended helped solve my bootstrap tab-related issue.

What ended up working for me was utilizing the c3 flush() method, which triggers a chart redraw (check out ).

$('a[data-toggle=tab]').on('shown.bs.tab', function() {
  my_c3_chart.flush();
});

Answer 13

Answer №7

By adjusting the CSS max-width property of the container div, I was able to successfully display the chart.

Answer 14

By adjusting the CSS max-width property of the container div, I was able to successfully display the chart.

Answer 15

Answer №8

Although our circumstances may vary, there is a possibility that someone with a deeper understanding of html rendering can draw insights from this situation.

In my case, the problem arose when I was concealing the graph until my data was fetched and the graph was created using c3.generate. The issue stemmed from hiding the graph using css "display: none;". Once I made the adjustment to use "opacity: 0," the problem was resolved.

Answer 16

Although our circumstances may vary, there is a possibility that someone with a deeper understanding of html rendering can draw insights from this situation.

In my case, the problem arose when I was concealing the graph until my data was fetched and the graph was created using c3.generate. The issue stemmed from hiding the graph using css "display: none;". Once I made the adjustment to use "opacity: 0," the problem was resolved.

The initial size of C3 charts is unnecessarily large upon loading

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Issue with display of animation on MUI TextField

Is it possible for me to bring in/need the Kik.js document instead of using the Kik Card?

How to connect an external module to NuxtJS using Vue.js

How to monitor multiple items using the mouseleave event in jQuery

Displaying data on the user interface in Angular by populating it with information from the form inputs

Enhance your web forms with the Jquery selectBox plugin, allowing you to effortlessly pass multiple values to

Show two columns horizontally using JavaScript

Using regular expressions to extract the value of a specific key from a JavaScript object

Unable to establish the origin for an element using JavaScript

Debugging Slideshows Using JavaScript

What steps are required to start running Karma once it has been installed?

Is there a way to automatically select all checkboxes when I select contacts in my case using Ionic 2?

Building an Express API using ES6 script: A Step-by-Step Guide

Display the DIV element once a specific number of radio buttons have been selected

Hover over parts of an image to bring attention to them

Trouble with Bootstrap columns displaying on smaller devices

After a postback, the Javascript function removes the displayed div

Exploring a property within a JavaScript object

Trying to bring in components from directories above

What is the best way to eliminate a specific element from a JavaScript array?