<!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></style> </head> <body> <div id='myChart'></div> <script> ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; let chartConfig = { type: 'scatter', scaleX: { values: '0:100:10', item: { fontSize: 10 }, guide: { visible: false } }, scaleY: { values: '0:100:20', item: { fontSize: 10 }, guide: { lineStyle: 'solid' }, minorTicks: 9, minorGuide: { alpha: 1 }, markers: [{ type: 'area', range: [0, 20], backgroundColor: '#C5CAE9' }, { type: 'area', range: [20, 40], backgroundColor: '#9FA8DA' }, { type: 'area', range: [40, 60], backgroundColor: '#7986CB' }, { type: 'area', range: [60, 80], backgroundColor: '#5C6BC0' }, { type: 'area', range: [80, 100], backgroundColor: '#3F51B5' } ], }, scaleY2: { values: '0:100:20', item: { fontSize: 10 }, guide: { visible: false }, minorTicks: 9, }, crosshairX: { alpha: 0.3, lineWidth: 5, marker: { backgroundColor: 'white', borderColor: '#3F51B5', borderWidth: 1, size: 5, }, plotLabel: { alpha: 0.7, borderColor: '#303F9F', borderRadius: 3, fontColor: '#303F9F', placement: 'node-top', multiple: true, text: '<strong>%t:</strong> %v', textAlpha: 1 }, scaleLabel: { backgroundColor: '#303F9F', borderRadius: 3 } }, crosshairY: { alpha: 0.3, lineWidth: 5, type: 'multiple', scaleLabel: { backgroundColor: '#303F9F', borderRadius: 3 } }, plot: { marker: { backgroundColor: '#9FA8DA #3F51B5' }, tooltip: { visible: false } }, series: [{ values: [ [21.5, 23.5], [23.1, 30.3], [25.1, 34.3], [30.2, 34.2], [30.9, 29.3], [31.9, 39.9], [34.2, 50.5], [35.5, 33.3], [39.1, 39.1], [53.2, 54.3], [57.1, 60.1], [59.5, 60.5], [61.6, 61.7], [64.1, 64.2], [69.5, 70.9], [70.3, 80.9], [71.7, 63.7], [75.4, 83.4], [80.3, 89.4], [80.9, 84.3], [85.1, 83.1], [85.3, 87.5], [89.3, 84.9], [90.1, 91.2], [91.3, 95.3], [92.4, 90.8], [93.5, 98.7], [95.5, 96.5], [96.1, 90.5], [99.1, 99.1] ], text: 'Marker' }] }; zingchart.render({ id: 'myChart', data: chartConfig, height: 400, 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'></div> </body> </html>
let chartConfig = { type: 'scatter', scaleX: { values: '0:100:10', item: { fontSize: 10 }, guide: { visible: false } }, scaleY: { values: '0:100:20', item: { fontSize: 10 }, guide: { lineStyle: 'solid' }, minorTicks: 9, minorGuide: { alpha: 1 }, markers: [{ type: 'area', range: [0, 20], backgroundColor: '#C5CAE9' }, { type: 'area', range: [20, 40], backgroundColor: '#9FA8DA' }, { type: 'area', range: [40, 60], backgroundColor: '#7986CB' }, { type: 'area', range: [60, 80], backgroundColor: '#5C6BC0' }, { type: 'area', range: [80, 100], backgroundColor: '#3F51B5' } ], }, scaleY2: { values: '0:100:20', item: { fontSize: 10 }, guide: { visible: false }, minorTicks: 9, }, crosshairX: { alpha: 0.3, lineWidth: 5, marker: { backgroundColor: 'white', borderColor: '#3F51B5', borderWidth: 1, size: 5, }, plotLabel: { alpha: 0.7, borderColor: '#303F9F', borderRadius: 3, fontColor: '#303F9F', placement: 'node-top', multiple: true, text: '<strong>%t:</strong> %v', textAlpha: 1 }, scaleLabel: { backgroundColor: '#303F9F', borderRadius: 3 } }, crosshairY: { alpha: 0.3, lineWidth: 5, type: 'multiple', scaleLabel: { backgroundColor: '#303F9F', borderRadius: 3 } }, plot: { marker: { backgroundColor: '#9FA8DA #3F51B5' }, tooltip: { visible: false } }, series: [{ values: [ [21.5, 23.5], [23.1, 30.3], [25.1, 34.3], [30.2, 34.2], [30.9, 29.3], [31.9, 39.9], [34.2, 50.5], [35.5, 33.3], [39.1, 39.1], [53.2, 54.3], [57.1, 60.1], [59.5, 60.5], [61.6, 61.7], [64.1, 64.2], [69.5, 70.9], [70.3, 80.9], [71.7, 63.7], [75.4, 83.4], [80.3, 89.4], [80.9, 84.3], [85.1, 83.1], [85.3, 87.5], [89.3, 84.9], [90.1, 91.2], [91.3, 95.3], [92.4, 90.8], [93.5, 98.7], [95.5, 96.5], [96.1, 90.5], [99.1, 99.1] ], text: 'Marker' }] }; zingchart.render({ id: 'myChart', data: chartConfig, height: 400, width: '100%' });