• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            zing-grid[loading] {
                height: 800px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                type: "line",
                crosshairX: {
                    lineColor: "#565656",
                    lineStyle: "dashed",
                    lineWidth: 2,
                    alpha: 0.5,
                    plotLabel: { //label assoicated to data points
                        backgroundColor: "#ffffff",
                        borderColor: "#d2d2d2",
                        borderRadius: "5px",
                        bold: true,
                        fontSize: "12px",
                        fontColor: "#111",
                        shadow: true,
                        shadowDistance: 2,
                        shadowAlpha: 0.4
                    },
                    scaleLabel: { //label associated to scaleX index
                        bold: true,
                        backgroundColor: "#787878",
                        borderRadius: 3,
                        fontColor: "#eaeaea",
                        fontSize: "12px",
                        callout: true,
                        paddingTop: 2
                    },
                    marker: {
                        visible: false //defut 
                    }
                },
                plot: {
                    tooltip: {
                        visible: false
                    }
                },
                series: [{
                        values: [11, 26, 7, 44, 11]
                    },
                    {
                        values: [42, 13, 21, 15, 33]
                    },
                    {
                        values: [10, 10, 12, 13, 12]
                    }
                ]
            };
    
            zingchart.render({
                id: 'myChart',
                data: myConfig,
                height: 400,
                width: '100%'
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
    		<div id='myChart'></div>
    	</body>
    </html>
    
          
    var myConfig = {
      type:"line",
      crosshairX:{
          lineColor: "#565656",
          lineStyle: "dashed",
          lineWidth: 2,
          alpha : 0.5,
          plotLabel:{ //label assoicated to data points
       	    backgroundColor : "#ffffff",
      	    borderColor : "#d2d2d2",
      	    borderRadius : "5px",
      	    bold : true,
      	    fontSize : "12px",
      	    fontColor : "#111",
      	    shadow : true,
      	    shadowDistance : 2,
      	    shadowAlpha : 0.4
          },
          scaleLabel:{ //label associated to scaleX index
      	    bold : true,
      	    backgroundColor : "#787878",
      	    borderRadius : 3,
      	    fontColor : "#eaeaea",
      	    fontSize : "12px",
      	    callout : true,
      	    paddingTop : 2
          },
          marker:{
            visible: false //defut 
          }
      },
      plot:{
        tooltip:{
          visible : false
        }
      },
      series:[
          {
              values:[11,26,7,44,11]
          },
          {
              values:[42,13,21,15,33]
          },
          {
            values : [10,10,12,13,12]
          }
      ]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: 400, 
    	width: '100%' 
    });