Chart.js not appearing in tabs

Assuming the tabs HTML includes “li” tags – like this –

<li class="" onclick="javascript:drawChart();"> </li>

Note: on clicking a javascript function is called. Add onclick attribute for the tab-li where you want to show the chart.

Then the remaining code remains the same except the lines given below moved inside the JS function .

//Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart-a").getContext("2d");
var myNewChart = new Chart(ctx).Line(lineChartData, options);

This should do the trick!

<script>
var lineChartData = {
    labels :             ["January","February","March","April","May","June","July","August","September","October","November","December"],
    datasets : [
        {
            fillColor : "rgba(162,29,9,0.5)",
            strokeColor : "rgba(162,29,9,1)",
            pointColor : "rgba(162,29,9,1)",
            pointStrokeColor : "#fff",
            data : [30,29,26,23,19,16,15,17,19,22,25,28]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            data : [20,19,17,14,10,8,7,9,10,13,16,18]
        }
    ]
},
options = {
//Boolean - If we show the scale above the chart data           
scaleOverlay : true,

scaleShowValues : true,

//Boolean - If we want to override with a hard coded scale
scaleOverride : false,

//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps : null,
//Number - The value jump in the hard coded scale
scaleStepWidth : null,
//Number - The scale starting value
scaleStartValue : null,

//String - Colour of the scale line 
scaleLineColor : "rgba(f,f,f,.1)",

//Number - Pixel width of the scale line    
scaleLineWidth : 1,

//Boolean - Whether to show labels on the scale 
scaleShowLabels : true,

//Interpolated JS string - can access value
scaleLabel : "<%=value%>",

//String - Scale label font declaration for the scale label
scaleFontFamily : "'Arial'",

//Number - Scale label font size in pixels  
scaleFontSize : 20,

//String - Scale label font weight style    
scaleFontStyle : "normal",

//String - Scale label font colour  
scaleFontColor : "#fff",    

///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,

//String - Colour of the grid lines
scaleGridLineColor : "rgba(0,0,0,.05)",

//Number - Width of the grid lines
scaleGridLineWidth : 1, 

//Boolean - Whether the line is curved between points
bezierCurve : true,

//Boolean - Whether to show a dot for each point
pointDot : true,

//Number - Radius of each point dot in pixels
pointDotRadius : 3,

//Number - Pixel width of point dot stroke
pointDotStrokeWidth : 1,

//Boolean - Whether to show a stroke for datasets
datasetStroke : true,

//Number - Pixel width of dataset stroke
datasetStrokeWidth : 2,

//Boolean - Whether to fill the dataset with a colour
datasetFill : true,

//Boolean - Whether to animate the chart
animation : true,

//Number - Number of animation steps
animationSteps : 60,

//String - Animation easing effect
animationEasing : "easeOutQuart",

//Function - Fires when the animation is complete
onAnimationComplete : null,

// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,

// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: true

}

function drawChart()
{
//Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart-a").getContext("2d");
var myNewChart = new Chart(ctx).Line(lineChartData, options);
}
</script>

I hope this helps!