score:1
Accepted answer
once the chart is drawn after becoming visible,
you don't want to keep drawing with every scroll
use a flag to know when it's been drawn for the first time, see chartHidden
...
$(function() {
var oTop = $('#counter').offset().top - window.innerHeight;
var chartHidden = true;
$(window).scroll(function(){
var pTop = $('body').scrollTop();
if ((pTop > oTop) && (chartHidden)) {
chartHidden = false;
start_count();
}
});
});
function start_count(){
var ctx = document.getElementById("polarChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'polarArea',
data: {
labels: ["Php", "Css", "Html", "Wordpress", "Magento", "Photoshop", "Web Analisis", "Seo"],
datasets: [{
backgroundColor: [
"#0066ff",
"#cc3333",
"#ffba02",
"#009966",
"#ff6600",
"#db01de",
"#00cc33",
"#00ccff"
],
data: [65, 85, 90, 95, 75, 75, 85, 85]
}]
}
});
}
Source: stackoverflow.com
Related Query
- Show chart.js animation only when user scroll on the specific DIV
- Chart looks only grey, does not show the color - Chartjs,discordjs
- Remove the label and show only value in tooltips of a bar chart
- ChartJs(Java) Can I remove only specific gridLines for a Linear Chart withouth removing the labels on xAxis?
- How to show tooltip only when data available in chart js?
- Bar chart (chart.js) with only 2 points does not show one of the bars
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- Chart.js how to make chart only show the most recent data
- chart js how do I only show just the low/high dots on line chart?
- Moving vertical line when hovering over the chart using chart.js
- chart js tooltip how to control the data that show
- Chart JS show multiple data points for the same label
- Chart Js Show the old data on mouse hover
- chart.js - link to other page when click on specific section in chart
- Drawing line chart in chart.js placing dots only when value changes
- ChartJS: Show all labels of a mixed chart in the tooltip
- PrimeNg bar chart how to show a label for the y-axis
- How to show only the data points that have a change in Chartjs?
- Maintain Y axis scale in graph with scroll in the X axis when the dataset grows bigger. Aspect-ratio problem
- Chart.js - Color specific parts of the background in a line chart
- How to make bar chart animation where all bars grow at the same speed?
- Chart.js - How to show loading animation before plotting chart
- Can I use a gradient in Chart.js without accessing the chart context when the chart is created?
- How do I keep chart.js charts in one JS file, and not get errors when the ID from the JS file don't exist on one specific html page?
- Angular chart how to show the legend data value by default along with legend name
- chartJs: I want to show both of the dataset legends when i hover to one of the points?
- Modify the labels in chart.js when I update the chart
- VueJs/ChartJs - single file component computed property only renders when I click the component in Vue Dev Tools
- How can I show texts only if they fit in the arc in Chart.Js 2.8.0?
- ChartJS replay chart animation when called by show()
More Query from same tag
- Why are some react-chartjs-2 options being ignored?
- javascript chart library for every minutes data
- Chart.Js radar - hide label numbers
- i want display chart based on selected charts using chartJS
- How to convert (convas chart) to either (Chart , or system.drawing.image , or stream , or []byte ) where I can use it in c# to generate pdf
- How to put static pointDots and make vertical line in Chart.js
- Chartjs Doughnut Chart smooth animation in countdown
- White Space in stacked bar using chart.js
- How to format the left legend on chartjs
- How to remove colored label square
- Multiple lines / data series from JSON file with Chart.js
- Chart JS Custom tooltips with % and label for X and Y axles
- using data structures in chartjs
- Chart.js axes always show zero
- Can i use destroy charts in React.js using Chart.js?
- Force two Chart.js doughnut charts with legends to same size in Bootstrap columns
- How to reduce the gap between bars on bar chart
- How to generate chartjs charts to pdf using laravel?
- chart.js bar chart x-axis label disappeared
- Reopening a "ChartJS" chart in a new window (VS, C#, ChartJS)
- Charts.js - onComplete javascript function coming from JSON
- How to allow zooming in between range only in chartjs-plugin-zoom
- laravel-chartjs not displaying anything
- ChartJS: How to center monthly bars against a daily line chart?
- ChartJS yAxis showing not coherent data
- vue-chartjs reactive data error
- javascript chart.js remove last point
- Change the style of the border in ChartJS
- chart.js 3 stacked bar chart - tooltip showing for zero values
- Vue + chartjs : Nearest point on hover tooltip not working