Half Solid Gauge Chart with trends

Question

do you have a type of "half gauge", that show the trends on top of it?like in this picture:enter image description here

For business purpose, so we are open to buy the licence

Answer 1

Yes, you can create the required chart with AnyChart library. We have prepared a similar sample, you can check it below.

For purchasing AnyChart, please, contact us by email - sales@anychart.com

var data = [45, 67, 56];
var axisMaximum = 100;
data.push(axisMaximum);
var dataSet = anychart.data.set(data);

anychart.onDocumentReady(function () {

  var stage = anychart.graphics.create("container");

  var circularGauge = anychart.gauges.circular();
  circularGauge.data(dataSet);
  circularGauge.fill('#fff')
.stroke(null)
.padding(0)
.startAngle(270)
.sweepAngle(180);

  var circularAxis = circularGauge.axis().radius(100).width(1).fill(null);
  circularAxis.scale()
.minimum(0)
.maximum(axisMaximum);
  circularAxis.labels().enabled(false);
  circularAxis.ticks().enabled(false);
  circularAxis.minorTicks().enabled(false);

  circularGauge.bar(0).dataIndex(0)
.radius(100)
.width(15)
.fill('red')
.stroke(null)
.zIndex(5);

  circularGauge.bar(1).dataIndex(3)
.radius(100)
.width(15)
.fill('#cecece')
.stroke(null)
.zIndex(3);

  // marker
  circularGauge.marker(0)
.axisIndex(0)
.dataIndex(1)
.size(7)
.stroke(null)
.fill('blue')
.type("triangle-down")
.position("outside")
.radius(108);

  // marker
  circularGauge.marker(1)
.axisIndex(0)
.dataIndex(2)
.size(7)
.stroke(null)
.fill('green')
.type("triangle-down")
.position("outside")
.radius(108);

  var circularLabel0 = circularGauge.label(0);
  circularLabel0
.enabled(true)
.anchor('center-bottom')
.useHtml(true)
.hAlign("center")
.text("<p style='color:red; font-size:20'>30 %</p><br>" +
      "<p style='color:black; font-size:20; text-decoration:overline;'>% of Gross sales</p>");

  var circularLabel1 = circularGauge.label(1);
  circularLabel1
.enabled(true)
.anchor('center-top')
.padding(15)
.fontSize(20)
.fontColor('black')
.text('Product 1.1');

  var circularTitle = circularGauge.title();
  circularTitle.enabled(true)
.text('Division 1')
.fontColor('black')
.fontSize(25);


  circularGauge.container(stage).draw();
});

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

<link href="https://cdn.anychart.com/releases/8.2.1/fonts/css/anychart-font.min.css" rel="stylesheet"/>
<link href="https://cdn.anychart.com/releases/8.2.1/css/anychart-ui.min.css" rel="stylesheet"/>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-circular-gauge.min.js"></script>
<div id="container"></div>