Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

              <div class="container">
  <!-- Radar Chart -->
  <div class="chart-demo">
    <h4 class="title">NOVA - test 03</h4>
    <canvas id="radarChart" width="800" height="550"></canvas>

              html {
  background: scale-lightness(#333, -0%);

.container {
  margin: 0 auto;
  overflow: auto;
  width: 800px;
  margin: 10px auto;
  padding-left: 70px;
  padding-right: 70px;
  padding-bottom: 10px;

  .title {
    text-align: center;
    color: #FFA500;

  .title__link {
    display: inline-block;
    color: white;

    &:hover {
      text-decoration: none;

.chart-demo {
  float: center;
  width: 800px;
// Radar Chart Options
var radarOptions = {
	//Boolean - If we show the scale above the chart data			
	scaleOverlay : false,
	//Boolean - If we want to override with a hard coded scale
	scaleOverride : false,
	//** Required if scaleOverride is true **
	//Number - The number of steps in a hard coded scale
	scaleSteps : null,
	//Number - The value jump in the hard coded scale
	scaleStepWidth : null,
	//Number - The centre starting value
	scaleStartValue : null,
	//Boolean - Whether to show lines for each scale point
	scaleShowLine : true,

	//String - Colour of the scale line	
	scaleLineColor : "rgba(150,150,150,0.2)",
	//Number - Pixel width of the scale line	
	scaleLineWidth : 1,

	//Boolean - Whether to show labels on the scale	
	scaleShowLabels : false,
	//Interpolated JS string - can access value
	scaleLabel : "<%=value%>",
	//String - Scale label font declaration for the scale label
	scaleFontFamily : "'Arial'",
	//Number - Scale label font size in pixels	
	scaleFontSize : 12,
	//String - Scale label font weight style	
	scaleFontStyle : "normal",
	//String - Scale label font colour	
	scaleFontColor : "#666",
	//Boolean - Show a backdrop to the scale label
	scaleShowLabelBackdrop : true,
	//String - The colour of the label backdrop	
	scaleBackdropColor : "rgba(255,255,255,0.75)",
	//Number - The backdrop padding above & below the label in pixels
	scaleBackdropPaddingY : 8,
	//Number - The backdrop padding to the side of the label in pixels	
	scaleBackdropPaddingX : 20,
	//Boolean - Whether we show the angle lines out of the radar
	angleShowLineOut : true,
	//String - Colour of the angle line
	angleLineColor : "#666",
	//Number - Pixel width of the angle line
	angleLineWidth : 1,			
	//String - Point label font declaration
	pointLabelFontFamily : "'Arial'",
	//String - Point label font weight
	pointLabelFontStyle : "normal",
	//Number - Point label font size in pixels	
	pointLabelFontSize : 12,
	//String - Point label font colour	
	pointLabelFontColor : "#EFEFEF",
	//Boolean - Whether to show a dot for each point
	pointDot : true,
	//Number - Radius of each point dot in pixels
	pointDotRadius : 3,
	//Number - Pixel width of point dot stroke
	pointDotStrokeWidth : 1,
	//Boolean - Whether to show a stroke for datasets
	datasetStroke : true,
	//Number - Pixel width of dataset stroke
	datasetStrokeWidth : 1,
	//Boolean - Whether to fill the dataset with a colour
	datasetFill : true,
	//Boolean - Whether to animate the chart
	animation : true,

	//Number - Number of animation steps
	animationSteps : 60,
	//String - Animation easing effect
	animationEasing : "easeOutQuart",

	//Function - Fires when the animation is complete
	onAnimationComplete : null

// Radar Data
var radarData = {
	labels : ["January","February","March","April","May","June","July"],
	datasets : [
			fillColor: "rgba(205,116,1,.3)",
        strokeColor: "rgba(220,137,28,1)",
			data : [65,59,90,81,56,55,40]
			fillColor : "rgba(151,187,205,0.3)",
			strokeColor : "rgba(151,187,205,1)",
			data : [28,48,40,19,96,27,100]

//Get the context of the Radar Chart canvas element we want to select
var ctx = document.getElementById("radarChart").getContext("2d");

// Create the Radar Chart
var myRadarChart = new Chart(ctx).Radar(radarData, radarOptions);
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.