Home forums Using CanvasJS Is it possible to create two "stripLines" on the same chart?

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  navigatorus 2 weeks, 6 days ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #24521

    Hello!I really need help, please help!Please tell me whether it is possible to add a second “stripLines” on the graph code which is located on the website https://canvasjs.com/html5-javascript-spline-chart/ and looks like:

    <!DOCTYPE HTML>
    <html>
    <head>  
    <script>
    window.onload = function () {
    
    var chart = new CanvasJS.Chart("chartContainer", {
    	animationEnabled: true,  
    	title:{
    		text: "Music Album Sales by Year"
    	},
    	axisY: {
    		title: "Units Sold",
    		valueFormatString: "#0,,.",
    		suffix: "mn",
    		stripLines: [{
    			value: 3366500,
    			label: "Average"
    		}]
    	},
    	data: [{
    		yValueFormatString: "#,### Units",
    		xValueFormatString: "YYYY",
    		type: "spline",
    		dataPoints: [
    			{x: new Date(2002, 0), y: 2506000},
    			{x: new Date(2003, 0), y: 2798000},
    			{x: new Date(2004, 0), y: 3386000},
    			{x: new Date(2005, 0), y: 6944000},
    			{x: new Date(2006, 0), y: 6026000},
    			{x: new Date(2007, 0), y: 2394000},
    			{x: new Date(2008, 0), y: 1872000},
    			{x: new Date(2009, 0), y: 2140000},
    			{x: new Date(2010, 0), y: 7289000},
    			{x: new Date(2011, 0), y: 4830000},
    			{x: new Date(2012, 0), y: 2009000},
    			{x: new Date(2013, 0), y: 2840000},
    			{x: new Date(2014, 0), y: 2396000},
    			{x: new Date(2015, 0), y: 1613000},
    			{x: new Date(2016, 0), y: 2821000},
    			{x: new Date(2017, 0), y: 2000000}
    		]
    	}]
    });
    chart.render();
    
    }
    </script>
    </head>
    <body>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    </body>
    </html>

    If possible, please provide me with a solution.I would be very grateful.Thank you for your help.Thanks.

    #24527

    @navigatorus,

    You can add as many striplines as you want by adding new object with value to stripLines array. Please refer documentation on stripLines for more info / customization options available.

    Here is a code snippet that would help you add 3 stripLines over axisY:

    stripLines: [{
        value: 3366500,
        label: "Average"
    },{
        value: 7289000,
        label: "High"
    },{
        value: 1613000,
        label: "Low"
    }]


    Vishwas R
    Team CanvasJS

    #24531

    Many thanks.You saved me.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.