Solid Gauge

index.html

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

script.js

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end



// Create chart instance
var chart = am4core.create("chartdiv", am4charts.RadarChart);

// Add data
chart.data = [{
  "category": "Conditions related to sexual health",
  "value": 80,
  "full": 100
},{
  "category": "Diseases of the genitourinary system",
  "value": 80,
  "full": 100
},{
  "category": "Diseases of the musculoskeletal system or connective tissue",
  "value": 80,
  "full": 100
},{
  "category": "Diseases of the skin",
  "value": 80,
  "full": 100
},{
  "category": "Diseases of the respiratory system",
  "value": 80,
  "full": 100
}, {
  "category": "Diseases of the circulatory system",
  "value": 77,
  "full": 100
}, {
  "category": "Diseases of the ear or mastoid process",
  "value": 92,
  "full": 100
}, {
  "category": "Diseases of the visual system",
  "value": 87,
  "full": 100
}, {
  "category": "Diseases of the nervous system",
  "value": 60,
  "full": 100
},{
  "category": "Sleep-wake disorders",
  "value": 77,
  "full": 100
},{
  "category": "Mental, behavioural or neurodevelopmental disorders",
  "value": 80,
  "full": 100
}, {
  "category": "Endocrine, nutritional or metabolic diseases",
  "value": 77,
  "full": 100
}, {
  "category": "Diseases of the immune system",
  "value": 92,
  "full": 100
}, {
  "category": "Diseases of the blood or blood-forming organs",
  "value": 87,
  "full": 100
}, {
  "category": "Neoplasms",
  "value": 60,
  "full": 100
},{
  "category": "Certain infectious or parasitic diseases",
  "value": 77,
  "full": 100
}];

// Make chart not full circle
chart.startAngle = -90;
chart.endAngle = 180;
chart.innerRadius = am4core.percent(20);

// Set number format
chart.numberFormatter.numberFormat = "#.#'%'";

// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.grid.template.strokeOpacity = 0;
categoryAxis.renderer.labels.template.horizontalCenter = "right";
categoryAxis.renderer.labels.template.fontWeight = 500;
categoryAxis.renderer.labels.template.adapter.add("fill", function(fill, target) {
  return (target.dataItem.index >= 0) ? chart.colors.getIndex(target.dataItem.index) : fill;
});
categoryAxis.renderer.minGridDistance = 10;

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.grid.template.strokeOpacity = 0;
valueAxis.min = 0;
valueAxis.max = 100;
valueAxis.strictMinMax = true;

// Create series
var series1 = chart.series.push(new am4charts.RadarColumnSeries());
series1.dataFields.valueX = "full";
series1.dataFields.categoryY = "category";
series1.clustered = false;
series1.columns.template.fill = new am4core.InterfaceColorSet().getFor("alternativeBackground");
series1.columns.template.fillOpacity = 0.08;
series1.columns.template.cornerRadiusTopLeft = 20;
series1.columns.template.strokeWidth = 0;
series1.columns.template.radarColumn.cornerRadius = 20;

var series2 = chart.series.push(new am4charts.RadarColumnSeries());
series2.dataFields.valueX = "value";
series2.dataFields.categoryY = "category";
series2.clustered = false;
series2.columns.template.strokeWidth = 0;
series2.columns.template.tooltipText = "{category}: [bold]{value}[/]";
series2.columns.template.radarColumn.cornerRadius = 20;

series2.columns.template.adapter.add("fill", function(fill, target) {
  return chart.colors.getIndex(target.dataItem.index);
});

// Add cursor
chart.cursor = new am4charts.RadarCursor();

solid-gauge.markdown

Solid Gauge

Solid Gauge Chart is similar to the Angular Gauge Chart and is most commonly used to mimic real-world gauges. The main difference from the Angular Gauge Chart is that the values are displayed by a filled portion of a gauge scale rather than a hand of a mechanical-like gauge.

A Pen by Dibakar Sigdel on CodePen.

License.

style.css

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}