CodemySite_Web development

A guide on creating customized charts easily using Chart.js Today is a big data world, which fulfills all kinds of data to be reviewed and analyzed. The plugin can convert the data to a beautiful chart, such as line, bar, bubble, pie, polar area, radar, and so on. And also it’s easy to customize the details with options. It’s a useful tool for designers and developers. Official site Basic demo tryout Step1: Import chart.js file <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> Step2: HTML — the chart will appear in the canvas. Step3: JavaScript — customize the data and layout of the chart. Select the DOM of your chart. Fire up the library with  new Chart() . The  type  can be bar, line, bubble, doughnut, pie, radar, scatter, polarArea. data The  labels  are the array of labels of bars. The  datasets  include the label,bar data,backgroundColor,borderColor and borderWidth. options The layout is the layout setting of the chart. The  plugins  include the c

  H ow to play around with tooltips like a pro one step? Yes, with Tippy.js. Tippy . js  is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper. It provides the logic and optional styling of elements that “pop out” from the flow of the document and float next to a target element. official site Step1: import npm or CDN # npm npm i tippy.js # Yarn yarn add tippy.js or <!-- Development --> <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script> <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script> <!-- Production --> <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="https://unpkg.com/tippy.js@6"></script> Step2: HTML — set a button DOM Step3: js — fire up with  tippy('#myButton', {...}); content : the content of tooltips when hovering arrow : the arrow of the tooltip, can be