Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Combinational Charts" />
<meta charset=utf-8 />
<title>JS Bin</title>
   <link rel="stylesheet" type="text/css" href="//www.shieldui.com/shared/components/latest/chart/css/shield-chart.min.css" />
    <script type="text/javascript" src="//www.shieldui.com/shared/components/latest/chart/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="//www.shieldui.com/shared/components/latest/chart/js/shield-chart.all.min.js"></script>
  
</head>
<body>
  <div id="chart"></div>  
</body>
</html>
 
$(function() {
  $("#chart").shieldChart({  
primaryHeader: {
    text: 'Shield UI Spline Area Chart Example',
    align: 'center'
},
    
// Enable the following block to reverse the chart  
//-----------------
//isInverted: true,
//-----------------
    
seriesSettings: {
// Enable the following block to show Data Point Text  
//-----------------
//splinearea:{
//      dataPointText: {
//        enabled: true
//      }
//  }
//-----------------  
},    
    axisY: [{
      min: -50,
      max: 50,
      title: {
        text: "Additional Y Axis",
        style: {
          color: "#4DB0F5"
        }
      },
      axisTickText: {
        style: {
          color: "#4DB0F5"
        }
      }
    }, {
      min: 0,
      max: 100,
      title: {
        text: "Additional Y Axis 2",
        style: {
          color: "#FFC500"
        }
      },
      swapLocation: true,
      axisTickText: {
        style: {
          color: "#FFC500"
        }
      }
    }, {
      min: -25,
      max: 25,
      title: {
        text: "Additional Y Axis 3",
        style: {
          color: "#FF1800"
        }
      },
      swapLocation: true,
      axisTickText: {
        style: {
          color: "#FF1800"
        }
      }
    }],    
dataSeries: [
  {
seriesType: 'splinearea',
collectionAlias: 'Series A',
data: [12,22,-25,52,33,25]
  }, 
  {
seriesType: 'splinearea',
collectionAlias: 'Series B',
data: [22,11,22,31,3,22]
  } 
]
  });
  
  });
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
bailey_mark77pro
0viewers