Home › Forums › Porto – Responsive HTML5 Template › Line chart question
- This topic has 1 reply, 2 voices, and was last updated 1 week, 3 days ago by
Support. This post has been viewed 55 times
-
AuthorPosts
-
May 26, 2023 at 6:19 am #10043247
Resilient Brands
Participanthi guys,
can you please take a look my page and scroll down to the line chart I inserted towards the end of the page.
When I hover over the dots I don’t see the value. What am I doing wrong? Also I want to show dollar figures (earnings per share) for each year but for some reason the graph adds a .5 figure in the data. I don’t know why it’s doing that.Can you also please tell me if it’s possible to add a visible value for each dot or bar in a graph rather than seeing them invisible and only visible when I hover or click on it?
thanks,
Template Version: Demo corporate 16May 26, 2023 at 10:25 pm #10043257Support
KeymasterHi, sorry but with that chart you can only show values on Hover, but you can set the hideHover to false, so it will show at least one value of the chart and when you hover it will show for each column.
Also, for currency, make the following changes:
Change the HTML to:
<!-- Morris: Bar --> <div class="chart chart-md" id="morrisBar100"></div> <script type="text/javascript"> var morrisBarData100 = [{ y: '2018', a: 2508, b: 104 }, { y: '2019', a: 2431, b: 101 }, { y: '2020', a: 2398, b: 139 }, { y: '2021', a: 3769, b: 469 }, { y: '2022', a: 3982, b: 658 }]; // See: js/examples/examples.charts.js for more settings. </script>
JS:
(js/custom.js)(function($) { 'use strict'; /* Morris: Bar */ if( $('#morrisBar100').get(0) ) { Morris.Bar({ resize: true, element: 'morrisBar100', data: morrisBarData100, xkey: 'y', ykeys: ['a', 'b'], labels: ['Revenues', 'Net income'], hideHover: false, barColors: ['#0088cc', '#325f8c'], parseTime: false, preUnits: "$", smooth: true, hoverCallback: function (index, options, content, row) { var indexAmount = 2; var txtToReplace = $(content)[indexAmount].textContent; return content.replace(txtToReplace, txtToReplace.replace(options.preUnits, "")); } }); } }).apply(this, [jQuery]);
More details: https://morrisjs.github.io/morris.js/bars.html
Kind Regards.
-
AuthorPosts