All geek questions in one place

How to create this chart with ZingChart

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

enter image description here

I adjusted the histogram for every thing I can think of, but I'm still not getting close.

Is it possible to use this chart with ZingChart?

+5
source share
1 answer

The diagram below is redrawn from the cutout. If you have any questions about what I did, I can go into details with confidence.

Note. . For best viewing results, look at the chart in full screen.

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>
+3
source

Source: https://habr.com/ru/post/1261197/

More articles:


All Articles