Line chart question

Home Forums Porto – Responsive HTML5 Template Line chart question

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10043247
    Resilient Brands
    Participant

    hi 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 16
    #10043257
    Support
    Keymaster

    Hi, 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.


Viewing 2 posts - 1 through 2 (of 2 total)

This topic is marked as "RESOLVED" and can not rceive new replies.