Search code examples
javascriptchartsbar-chartlinechartzingchart

How to create this chart with ZingChart

I am trying to create a chart that looks/functions like this with ZingChart.

enter image description here

I have tweaked a bar chart every way I can think of but I'm still not coming close.

Is this chart possible with ZingChart?

Solution

  • The following chart is mimicked from the cutout you have attached. If you have any questions about what I did, I can surely go into detail.

    Note: For best viewing results look at the chart in the full page view.

    var myConfig = {
  type:'mixed',
  title: {
    text: 'Rank by MPH',
  },
  scaleX: {
    offset: 0, // force line to start at scale
    offsetEnd: 10, // force last bar away from end of the scale
    maxItems: 2, // force display of first and last labels
    tick: {
      visible:false,
    },
    item: {
      fontColor: '#000',
      fontSize: 14,
      rules: [ // adjust last label
        {
          rule: '%i == 16',
          text: '129',
        }  
      ]
    },
    lineWidth:2,
    lineColor: '#000',
  },
  scaleY: {
    minValue: 0,
    maxValue: 100,
    step: 50,
    format: '%v%',
    markers: [
      { // diagonal line
        type: 'line',
        range: [0,100],
        lineWidth: 3,
        lineColor: '#000',
      }  
    ],
    tick: {
      visible:false,
    },
    item: {
      fontColor: '#000',
      fontSize: 14
    },
    guide: {
      visible: false,
    },
    lineWidth:2,
    lineColor: '#000',
  },
  labels: [ 
    { // hook label to line marker to display rank
      hook: 'node:plot=1,index=1',
   	  backgroundColor: '#000',
   	  fontColor: '#fff',
   	  text: 'Rank 11 / 16',
      calloutWidth: 20,
 	    callout: true,
 	    calloutPosition: 'bottom',
 	    padding: 15,
 	    borderRadius: 10,
 	    fontSize: 15,
 	    offsetY: -50,
    },    
    { // hook label to scale to display mph
      hook: 'scale:index=11',
   	  text: '100 mph',
 	    fontSize: 15,
 	    offsetY: 15,
    },
  ],
	series: [
		{
	   	type: 'bar', 
	   	barWidth:20,
	   	barSpacing:1,
	   	borderRadius:'10 10 0 0',
	   	backgroundColor: '#c0c0c0',
	   	tooltip: {
	   	  backgroundColor: '#000',
	   	  text: 'Rank %i / 16',
        calloutWidth: 20,
   	    callout: true,
   	    calloutPosition: 'bottom',
   	    padding: 15,
   	    borderRadius: 10,
   	    fontSize: 15,
   	    placement: 'node:top',
   	    offsetY: -20,
	   	},
	   	rules: [
	   	  { // make one bar purple
	   	    rule: '%i == 11',
	   	    backgroundColor: 'purple',
	   	  }
	   	],
			values: [null,5,9,12,19,25,30,34,39,45,49,54,58,65,69,74,79],
		},
		{
		  type: 'line',
		  lineColor: 'purple',
		  lineStyle: 'dotted',
	   	valueBox: {
	   	  text: '%v%',
	   	  placement: 'left',
	   	  offsetX: -18,
	   	  fontSize: 12,
	   	  rules: [
	   	    { // hide the valuebox at the node on the line
	   	      rule: '%i == 1',
	   	      visible: false,
	   	    }  
	   	  ],
	   	},
		  marker: {
		    borderColor: 'purple',
		    borderWidth: 2,
		    backgroundColor: '#fff',
		    size: 9,		  
		    rules: [ 
  		    { // hide first marker of the line
  		      rule: '%i == 0',
  		      visible:false,
  		    }  
  		  ],
		  },
		  values: [[0,69], [11,69]], // array of arrays to better plot the line
		}
	]
};

zingchart.render({ 
	id: 'myChart', 
	data: myConfig, 
	height: '100%', 
	width: '100%',
});
    html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}
.zc-ref {
	display:none;
}
    <!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
	</body>
</html>