Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #112819
    natejacobson
    Participant

    How can I control the animation speed in Smart Chart for web?

    #112830
    Markov
    Keymaster

    Hi,

    You can use the animationDuration property.

    const sampleData = [
        { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
        { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
        { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
        { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
        { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
        { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
        { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
    ];
    
    const chart = new smartChart('#chart', {
    	animationDuration: 500,
    	caption: 'Fitness & exercise weekly scorecard',
    	description: 'Time spent in vigorous exercise',
    	dataSource: sampleData,
    	xAxis:
    	{
    		dataField: 'Day',
    		gridLines: {
    			visible: true
    		}
    	},
    	valueAxis:
    	{
    		description: 'Time in minutes',
    		axisSize: 'auto',
    		minValue: 0,
    		maxValue: 100,
    		unitInterval: 10
    	},
    	seriesGroups:
    	[
    		{
    			type: 'column',
    			columnsGapPercent: 50,
    			seriesGapPercent: 0,
    			series: [
    				{ dataField: 'Keith', displayText: 'Keith' },
    				{ dataField: 'Erica', displayText: 'Erica' },
    				{ dataField: 'George', displayText: 'George' }
    			]
    		}
    	]
    });

    Best regards,
    Markov

    Smart UI Team
    https://www.htmlelements.com/

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.