Range Crosshair
Powered by ZingChart
-200
200
-100
0
100
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script> <style> .chart--container { height: 100%; width: 100%; min-height: 530px; } .zc-ref { display: none; } </style> </head> <body> <div id="myChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div> <script> ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; let makeRange = (plots, nodes) => { let series = [], values, m1, m2, v, s, linecolor = ['#606075', '#A7A8D7', '#b9f7b4', '#ace0e9'], diffVal = [100, 80, 60, 80]; for (let p = 0; p < plots; p++) { values = []; m1 = 10 + 20 * Math.random(); m2 = 10 + 0 * Math.random(); s = 40 + 100 * Math.random(); for (let n = 0; n < nodes + 1; n++) { v = s * Math.exp(Math.abs(n - nodes / 2) / nodes) * Math.sin(n / (nodes / m1)) * Math.cos(n / (nodes / m2)); v = parseInt(v.toFixed(2)); let diff = diffVal[p]; values.push([v, v - diff]); } series.push({ values: values, backgroundColor: linecolor[p], alpha: 0.9, lineWidth: '0px', marker: { visible: false, }, tooltip: { visible: false, }, guideLabel: { visible: false, }, }); } return series; }; zingchart.THEME = 'classic'; let chartConfig = { type: 'range', globals: { fontFamily: 'Helvetica', }, backgroundColor: 'white', plot: { tooltip: { visible: false, }, }, plotarea: { marginRight: '0px', }, scaleX: { visible: false, }, scaleY: { guide: { lineColor: '#8f8f8f', lineStyle: 'solid', }, item: { color: '#2D2D2D', }, lineColor: '#2D2D2D', lineWidth: '0px', step: 100, tick: { lineColor: '#2D2D2D', lineWidth: '0px', }, }, crosshairY: { plotLabel: { backgroundColor: 'white', borderRadius: '3px', multiple: false, }, scaleLabel: { backgroundColor: '#7CB5EC', }, }, series: makeRange(4, 250), }; zingchart.render({ id: 'myChart', data: chartConfig, output: 'canvas', height: '100%', width: '100%', }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <script src="https://cdn.zingchart.com/zingchart.min.js"></script> </head> <body> <div id="myChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div> </body> </html>
let makeRange = (plots, nodes) => { let series = [], values, m1, m2, v, s, linecolor = ['#606075', '#A7A8D7', '#b9f7b4', '#ace0e9'], diffVal = [100, 80, 60, 80]; for (let p = 0; p < plots; p++) { values = []; m1 = 10 + 20 * Math.random(); m2 = 10 + 0 * Math.random(); s = 40 + 100 * Math.random(); for (let n = 0; n < nodes + 1; n++) { v = s * Math.exp(Math.abs(n - nodes / 2) / nodes) * Math.sin(n / (nodes / m1)) * Math.cos(n / (nodes / m2)); v = parseInt(v.toFixed(2)); let diff = diffVal[p]; values.push([v, v - diff]); } series.push({ values: values, backgroundColor: linecolor[p], alpha: 0.9, lineWidth: '0px', marker: { visible: false, }, tooltip: { visible: false, }, guideLabel: { visible: false, }, }); } return series; }; zingchart.THEME = 'classic'; let chartConfig = { type: 'range', globals: { fontFamily: 'Helvetica', }, backgroundColor: 'white', plot: { tooltip: { visible: false, }, }, plotarea: { marginRight: '0px', }, scaleX: { visible: false, }, scaleY: { guide: { lineColor: '#8f8f8f', lineStyle: 'solid', }, item: { color: '#2D2D2D', }, lineColor: '#2D2D2D', lineWidth: '0px', step: 100, tick: { lineColor: '#2D2D2D', lineWidth: '0px', }, }, crosshairY: { plotLabel: { backgroundColor: 'white', borderRadius: '3px', multiple: false, }, scaleLabel: { backgroundColor: '#7CB5EC', }, }, series: makeRange(4, 250), }; zingchart.render({ id: 'myChart', data: chartConfig, output: 'canvas', height: '100%', width: '100%', });
.chart--container { height: 100%; width: 100%; min-height: 530px; } .zc-ref { display: none; }