score:10
Accepted answer
You need to call the chart after the tab is shown. Bootstrap provides events on their javascript plugins that you can watch for with a jquery on event.
$('a[href=#chart]').on('shown.bs.tab', function(){
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
];
var options = {
responsive : true,
animation: true,
};
var ctx1 = $("#invest-chart").get(0).getContext("2d");
var invest_chart;
new Chart(ctx1).Doughnut(data, {
responsive : true,
animation: true,
});
});
score:1
In my case, I found a class named "fade" with conflict with bootstrap one with same name. My solution was rename my css class to "MyFade".
Source: stackoverflow.com
Related Query
- Chart.js render in hidden Bootsrap tab
- Chart js - Get bar width after render
- Render Chartjs on hidden DIV
- Bar Chart of ChartJS does not Render
- I am using chartjs node canvas to render a chart however the graph options are being ignored
- Chart doesn't render in angular 2 app
- Charts js and laravel: Render chart after passing in json data
- Chart.js bar chart label gets hidden on hover
- Bar chart from Vue-chartjs doesn't render
- How to Render Chart Datasets in Vue?
- Render pie chart datasets out of 100% -- Chart.JS
- Why won't my chart.js chart render in React?
- Laravel 5.6 using laracharts. Chart wont render
- Chart.js chart doesn't render when using Angular 2
- Chartjs does not render chart when set responsive option to true
- ChartJs Memory Leak | Garbage Collection does not clean Chart Object or Arrays after render
- Charts.js does not render chart until I open the console
- what is wrong with my code ? java script chart position
- How to print a chart rendered by code
- Chart js - render images on only one dataset
- chart.js Second hidden value for Bar Chart
- Chart.js radar chart ticks are hidden behind the graph
- Why ChartJS's Bar Chart does not render bar for a specific value?
- ChartJs does not render chart when binding canvas id in Angular
- ERROR Error: ng-charts configuration error, data or datasets field are required to render chart line
- chart.js chart failing to render
- Chart.js line chart does not render data lines on iOS
- VueJS + Chartjs - Chart only renders after code change
- How do I destroy/update Chart Data in this chart.js code example?
- Chart.js unable to render the chart with data reactjs
More Query from same tag
- chart.js line for only part of the labels
- Chartjs in Reactjs - how can I update data dynamically?
- chart.js version 2.4.0 does not display bars for me
- angular 4 line chart data is not showing data from http get
- ChartJS: Chart not displaying full range of data
- ChartJS: How to set fixed Y axis max and min
- Chart.js bars have non uniform widths
- How to change colours for Angular-Chart.js
- React Chartjs 2 display axes above datasets backgroundColor
- Statistics page - Load every stats <div> one by one
- Line chart is not being displayed in Chart.js
- How to json_encode associative php array to [{x: key1, y: value1}, {x: key2, y: value2}, ...]?
- Beginner in JS,Stuck with ChartJS and multiple filters and ways to display
- How do I force Chart.js axes min and max with react-chartjs-2?
- Ionic not return data from variable
- chart js in an especific label
- how to add data from database to chartjs-plugin-streaming
- How to set the number of of rows in a line chart in chart.js?
- Binding Chart to Canvas height width
- chartjs - How to access chart instance in a custom tooltip callback
- Moving the zerolines in ChartJS scatter chart
- Showing labels on bubble chart in angular-charts
- Bootstrap > Extend ChartJS canvas horizontally to match overflowing columns
- How to change legend icon on hover Chartjs
- Char.js Interpolation linear
- Angular 2 ng2-charts donut add horizontal line
- Why is my Line Chart.JS starting in the middle?
- Chart.js - How to offset bars from ZeroLine
- Declare data value dynamicaly to chart js
- special characters in title of charts of Charts Js