Radar Chart | Chart.js

A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two ... Home API Samples EcosystemEcosystem Awesome (opensnewwindow) Slack (opensnewwindow) StackOverflow (opensnewwindow) GitHub (opensnewwindow)Chart.jsGettingStartedGeneralConfigurationChartTypesAreaChartBarChartBubbleChartDoughnutandPieChartsLineChartMixedChartTypesPolarAreaChartRadarChartScatterChartAxesDevelopers#RadarChartAradarchartisawayofshowingmultipledatapointsandthevariationbetweenthem.Theyareoftenusefulforcomparingthepointsoftwoormoredifferentdatasets. config setup constconfig={ type:'radar', data:data, options:{ elements:{ line:{ borderWidth:3 } } }, };constconfig={ type:'radar', data:data, options:{ elements:{ line:{ borderWidth:3 } } }, };constdata={ labels:[ 'Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running' ], datasets:[{ label:'MyFirstDataset', data:[65,59,90,81,56,55,40], fill:true, backgroundColor:'rgba(255,99,132,0.2)', borderColor:'rgb(255,99,132)', pointBackgroundColor:'rgb(255,99,132)', pointBorderColor:'#fff', pointHoverBackgroundColor:'#fff', pointHoverBorderColor:'rgb(255,99,132)' },{ label:'MySecondDataset', data:[28,48,40,19,96,27,100], fill:true, backgroundColor:'rgba(54,162,235,0.2)', borderColor:'rgb(54,162,235)', pointBackgroundColor:'rgb(54,162,235)', pointBorderColor:'#fff', pointHoverBackgroundColor:'#fff', pointHoverBorderColor:'rgb(54,162,235)' }] };constdata={ labels:[ 'Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running' ], datasets:[{ label:'MyFirstDataset', data:[65,59,90,81,56,55,40], fill:true, backgroundColor:'rgba(255,99,132,0.2)', borderColor:'rgb(255,99,132)', pointBackgroundColor:'rgb(255,99,132)', pointBorderColor:'#fff', pointHoverBackgroundColor:'#fff', pointHoverBorderColor:'rgb(255,99,132)' },{ label:'MySecondDataset', data:[28,48,40,19,96,27,100], fill:true, backgroundColor:'rgba(54,162,235,0.2)', borderColor:'rgb(54,162,235)', pointBackgroundColor:'rgb(54,162,235)', pointBorderColor:'#fff', pointHoverBackgroundColor:'#fff', pointHoverBorderColor:'rgb(54,162,235)' }] };#DatasetPropertiesNamespaces:data.datasets[index]-optionsforthisdatasetonlyoptions.datasets.line-optionsforalllinedatasetsoptions.elements.line-optionsforalllineelementsoptions.elements.point-optionsforallpointelementsoptions-optionsforthewholechartTheradarchartallowsanumberofpropertiestobespecifiedforeachdataset.Theseareusedtosetdisplaypropertiesforaspecificdataset.Forexample,thecolourofalineisgenerallysetthisway.NameTypeScriptableIndexableDefaultbackgroundColorColorYes-'rgba(0,0,0,0.1)'borderCapStylestringYes-'butt'borderColorColorYes-'rgba(0,0,0,0.1)'borderDashnumber[]Yes-[]borderDashOffsetnumberYes-0.0borderJoinStyle'round'|'bevel'|'miter'Yes-'miter'borderWidthnumberYes-3hoverBackgroundColorColorYes-undefinedhoverBorderCapStylestringYes-undefinedhoverBorderColorColorYes-undefinedhoverBorderDashnumber[]Yes-undefinedhoverBorderDashOffsetnumberYes-undefinedhoverBorderJoinStyle'round'|'bevel'|'miter'Yes-undefinedhoverBorderWidthnumberYes-undefinedclipnumber|object--undefineddatanumber[]--requiredfillboolean|stringYes-falselabelstring--''ordernumber--0tensionnumber--0pointBackgroundColorColorYesYes'rgba(0,0,0,0.1)'pointBorderColorColorYesYes'rgba(0,0,0,0.1)'pointBorderWidthnumberYesYes1pointHitRadiusnumberYesYes1pointHoverBackgroundColorColorYesYesundefinedpointHoverBorderColorColorYesYesundefinedpointHoverBorderWidthnumberYesYes1pointHoverRadiusnumberYesYes4pointRadiusnumberYesYes3pointRotationnumberYesYes0pointStylepointStyleYesYes'circle'spanGapsboolean--undefinedAllthesevalues,ifundefined,fallbacktothescopesdescribedinoptionresolution#GeneralNameDescriptionclipHowtocliprelativetochartArea.Positivevalueallowsoverflow,negativevalueclipsthatmanypixelsinsidechartArea.0=clipatchartArea.Clippingcanalsobeconfiguredperside:clip:{left:5,top:false,right:-2,bottom:0}labelThelabelforthedatasetwhichappearsinthelegendandtooltips.orderThedrawingorderofdataset.Alsoaffectsorderfortooltipandlegend.more#PointStylingThestyleofeachpointcanbecontrolledwiththefollowingproperties:NameDescriptionpointBackgroundColorThefillcolorforpoints.pointBorderColorThebordercolorforpoints.pointBorderWidthThewidthofthepointborderinpixels.pointHitRadiusThepixelsizeofthenon-displayedpointthatreactstomouseevents.pointRadiusTheradiusofthepointshape.Ifsetto0,thepointisnotrendered.pointRotationTherotationofthepointindegrees.pointStyleStyleofthepoint.more...Allthesevalues,ifundefined,fallbackfirsttothedatasetoptionsthentotheassociatedelements.point.*options.#LineStylingThestyleofthelinecanbecontrolledwiththefollowingproperties:NameDescriptionbackgroundColorThelinefillcolor.borderCapStyleCapstyleoftheline.SeeMDN(opensnewwindow).borderColorThelinecolor.borderDashLengthandspacingofdashes.SeeMDN(opensnewwindow).borderDashOffsetOffsetforlinedashes.SeeMDN(opensnewwindow).borderJoinStyleLinejointstyle.SeeMDN(opensnewwindow).borderWidthThelinewidth(inpixels).fillHowtofilltheareaundertheline.Seeareacharts.tensionBeziercurvetensionoftheline.Setto0todrawstraightlines.spanGapsIftrue,lineswillbedrawnbetweenpointswithnoornulldata.Iffalse,pointswithnulldatawillcreateabreakintheline.Ifthevalueisundefined,thevaluesfallbacktotheassociatedelements.line.*options.#InteractionsTheinteractionwitheachpointcanbecontrolledwiththefollowingproperties:NameDescriptionpointHoverBackgroundColorPointbackgroundcolorwhenhovered.pointHoverBorderColorPointbordercolorwhenhovered.pointHoverBorderWidthBorderwidthofpointwhenhovered.pointHoverRadiusTheradiusofthepointwhenhovered.#ScaleOptionsTheradarchartsupportsonlyasinglescale.Theoptionsforthisscalearedefinedinthescales.rproperty,whichcanbereferencedfromtheLinearRadialAxispage.options={ scales:{ r:{ angleLines:{ display:false }, suggestedMin:50, suggestedMax:100 } } }; #DefaultOptionsItiscommontowanttoapplyaconfigurationsettingtoallcreatedradarcharts.TheglobalradarchartsettingsarestoredinChart.overrides.radar.Changingtheglobaloptionsonlyaffectschartscreatedafterthechange.Existingchartsarenotchanged.#DataStructureThedatapropertyofadatasetforaradarchartisspecifiedasanarrayofnumbers.Eachpointinthedataarraycorrespondstothelabelatthesameindex.data:[20,10] Foraradarchart,toprovidecontextofwhateachpointmeans,weincludeanarrayofstringsthatshowaroundeachpointinthechart.data:{ labels:['Running','Swimming','Eating','Cycling'], datasets:[{ data:[20,10,4,2] }] } #Internaldataformat{x,y} ← PolarAreaChart ScatterChart →