Area Chart with gradients
How do I make an area chart with gradients?
What is a area chart with gradients? How do you make a area chart with gradients? This script and codes were developed by ZingChart on 28 July 2022, Thursday.
Area Chart with gradients - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Area Chart with gradients</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='myChart'></div> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/zingchart-2.3.3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Area Chart with gradients - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Montserrat);
body { margin: 10px; background-color: #444
}
Area Chart with gradients - Script Codes JS Codes
ZC.LICENSE = ['7b185ca19b4be2cba68fdcd369c663a9'];
var myConfig = { type: 'area', title: { text: 'Daily Plays', fontFamily: 'Montserrat', fontSize: 36, fontColor: '#BBB', textAlign: 'left', x: '30px' }, tooltip: { visible: false, }, crosshairY: { scaleLabel: { fontSize: 24, fontFamily: 'Montserrat', fontColor: '#252525', backgroundColor: '#BBB', borderRadius: 5 } }, backgroundColor: '#252525', scaleY: { x: 20, lineWidth: 0, tick: { visible: 0 }, item: { fontFamily: 'Montserrat', fontSize: 24, offsetX: -10, rules: [{ rule: '%i === 1', fontColor: '#77C4F0' }, { rule: '%i === 2', fontColor: '#4899E2' }, { rule: '%i === 3', fontColor: '#3A79D7' }, { rule: '%i === 4', fontColor: '#7472D5' }, { rule: '%i === 5', fontColor: '#A66BD2' }, { rule: '%i === 6', fontColor: '#C866B5' }, { rule: '%i === 7', fontColor: '#E36288' }, { rule: '%i === 8', fontColor: '#FC6057' }] }, guide: { visible: false }, labels: ['', '1k', '2k', '3k', '4k', '5k', '6k', '7k', '8k'], }, scaleX: { lineWidth: 0, tick: { visible: false }, item: { fontFamily: 'Montserrat', fontSize: 24, fontColor: '#BBB' }, labels: ['Mon', 'Tues', 'Weds', 'Thurs', 'Fri', 'Sat', 'Sun'], }, plot: { alphaArea: 1, lineWidth: 0, marker: { visible: 0 }, gradientColors: "#FC6057 #E36288 #C866B5 #A66BD2 #7472D5 #3A79D7 #4899E2 #77C4F0", gradientStops: "0.1 0.2 0.3 0.4 0.6 0.7 0.9" }, plotarea: { margin: "90 40 60 90" }, series: [{ values: [4000, 6000, 4000, 7000, 5000, 6000, 8000] }]
};
zingchart.render({ id: 'myChart', data: myConfig, height: 550, width: 800
});
Developer | ZingChart |
Username | zingchart |
Uploaded | July 28, 2022 |
Rating | 3 |
Size | 2,310 Kb |
Views | 42,504 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CSS Variables Blog Post | 2,250 Kb |
ZingChart-AngularJS - Basic | 1,963 Kb |
ZingChart-AngularJS - Responsive | 2,637 Kb |
Star Wars Wordcloud | 4,033 Kb |
Responsive Flexbox Dashboard | 4,159 Kb |
Fantasy Election Generator | 14,205 Kb |
Vue Js Component Two Way Data Binding | 3,157 Kb |
ZingChart-AngularJS - Customizable | 2,871 Kb |
Real-Time Feed Material Design | 2,668 Kb |
Responsive Dashboard With Media Queries | 3,871 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Learning FlexBox | Alex_rodrigues | 2,821 Kb |
Two Element Typeface | Chrisota | 4,942 Kb |
Fun animations with CSS3 | Minimalmonkey | 2,360 Kb |
React Template | Isac | 1,241 Kb |
Flickering Light Text Effect | Mandymichael | 3,315 Kb |
Buttons with style | Chbymnky | 2,082 Kb |
GrcJS | Vino6 | 2,047 Kb |
A Pen by tugce | Ecgutcnkr | 4,197 Kb |
Blog Concept - Single Post | Marionebl | 9,603 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!