eliminating the hues beneath the lines on Morris region charts

I'm seeking advice on how to remove colors below the lines in Morris area charts. Any ideas?

Here's the code snippet I've been using:

Morris.Area({
  element: 'area-example',
  data: [
    { y: '2006', a: 100, b: 90 },
    { y: '2007', a: 75,  b: 65 },
    { y: '2008', a: 50,  b: 40 },
    { y: '2009', a: 75,  b: 65 },
    { y: '2010', a: 50,  b: 40 },
    { y: '2011', a: 75,  b: 65 },
    { y: '2012', a: 100, b: 90 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B'],
  fillOpacity: 0.0,
  lineColors: ['#00acac' , '#348fe2'],


});

Answer №1

To avoid displaying colors below lines, consider using a Line chart as it is more straightforward.

Morris.Line({
  element: 'area-example',
  data: [
    { y: '2006', a: 100, b: 90 },
    { y: '2007', a: 75,  b: 65 },
    { y: '2008', a: 50,  b: 40 },
    { y: '2009', a: 75,  b: 65 },
    { y: '2010', a: 50,  b: 40 },
    { y: '2011', a: 75,  b: 65 },
    { y: '2012', a: 100, b: 90 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B']
});

Another option is to use the following code snippet which includes fillOpacity for filling the area below the lines:

Morris.Area({
  element: 'chart',
  data: [
    { y: '2015-01', a: 1, b: 2 },
    { y: '2015-02', a: 2,  b: 3 },
    { y: '2015-03', a: 2,  b: 2 },
    { y: '2015-04', a: 1,  b: 4 },
    { y: '2015-05', a: 2,  b: 5 },
    { y: '2015-06', a: 3,  b: 3 },
    { y: '2015-07', a: 1, b: 2 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Value A', 'Value B'],
  fillOpacity: 0.8,
  hideHover: 'auto',
  resize: true,
  pointFillColors: ['#fff'],
  pointStrokeColors: ['black'],
  lineColors: ['#f1a340', '#998ec3'],
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.5.1.min.js"></script>
<link href="http://cdn.oesmith.co.uk/morris-0.5.1.css" rel="stylesheet"/>

<div id="chart"></div>

I hope this solution proves helpful. Enjoy coding! :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Use React Router to create a link that goes to the same URL but passes along unique state

Can someone help me figure out how to open the same URL using react-router Link while passing different state each time? <Link to={items.vehicleModelId === 2 ? '/ecgo-3' : items.vehicleModelId === 3 && '/ecgo-5' ...

Exclude the use of ':any' in React component

Currently, I am new to React and facing a challenge in sending a variable and function to my component. I understand that using :any is not the best practice, so I am seeking a better solution. I am working on creating a modal and passing data to my compo ...

Having trouble grasping the inner workings of code while iterating through a JSON array in ReactJS

Currently, I am immersed in a school project that requires me to develop a simple CRUD web application. After weighing my options, I decided to utilize Spring Boot + ReactJS for this endeavor. The progress has been smooth so far, but I must admit that part ...

Ways to access JSON data in JavaScript

I'm experiencing difficulty accessing the JSON data provided below. My approach involves utilizing the JavaScript AJAX success function, and when attempting alerts with the following code, $.ajax({ type:'GET', url:myURL, success : function ...

The connection between the type of request and the corresponding response in an Ajax function

When using the following: xhr.setRequestHeader("Content-Type", "application/json"); Am I obligated to only receive a response in json format, or is it possible to receive an html response instead? If there is flexibility in receiving different formats, h ...

Mandate that users select from the available place autocomplete suggestions exclusively

I have integrated the "Places" Google API to enable address autocomplete in an input field on my website. However, since the service is limited to a specific area, I have implemented an autocomplete filter. The issue I'm facing is that users are stil ...

Using Selenium to Retrieve HTML Content Between Two Tags

How can I extract the following data from the provided HTML using Selenium 4 and XPath in Python? Message names (e.g. Message 1), Received timestamp (e.g. Received: 214-2342-234), and the most challenging part: message text (e.g. This is message nr. 1 it ...

Triggering a button click to upload a file from within a grid view

I'm having trouble uploading a file when the "Fileupload" control inside gridview changes. I want to save the file content in DB as soon as it is uploaded by the user. I tried manually triggering the click event of the button control on the change of ...

Sharing the outcome of a $.get request with another function for optimal results

I am facing an issue with the callback function of the jquery $.get() ajax function. Currently, I am working with the DataTables plugin and attempting to implement the "expanding row to see children details" example from (https://www.datatables.net/exam ...

Creating a multi-dimensional array using information from a database

I have a unique challenge where I am utilizing a template that generates a menu with a specific structure. In my database, I have various menus stored and I've successfully retrieved them. However, the issue arises when I need to figure out a way to d ...

Extract several "documents" from one compilation

To easily convert my code into a single module using webpack, I can use the following method: { entry: path.join(__dirname, 'src/index.js'), output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', ...

Create a pop-up window within a single controller using Angular.js

I followed a tutorial to create this code. I am interested in learning how to utilize just one controller for generating the dialog box. Currently, I am using two controllers for this project. Any guidance or tips would be greatly appreciated. View my cod ...

Struggling to resolve the issue while deploying a Next.js application on Netlify. The error seems to be stemming from the import of an image and its

I attempted to eliminate the code on line 4 and line 15 in index.js, then deployed it on Netlify. The functionality is working correctly, but the image is not displaying as desired. However, when I try to modify the code with just lines 4 and 15 included, ...

In the process of transforming my JavaScript code into JQuery

I'm struggling to convert my JavaScript code into jQuery, especially when it comes to calling the function for radio elements by name. The original JavaScript works fine, but I can't seem to get the jQuery version to work correctly. Index HTML ...

Is it possible to implement Angular Universal on Github Pages?

Is it doable to Deploy Angular Universal on Github Pages? I've come across some solutions such as angular-cli-ghpages, but from what I understand, these options don't pre-render content for SEO purposes. ...

Changing the function to operate asynchronously

How can I convert the following code into an asynchronous function? It is currently returning referralUrl as undefined: controller async createReferralUrls() { this.referralUrl = await this.referralService.generateReferralUrl(this.userData.referral ...

When the web driver fails to function as expected

After installing the selenium-webdriver via npm, I downloaded the IE component from this link and added it to my path on Windows 8. Upon opening IE, I had to set all security zones to high, ensuring they were consistent. However, due to restrictions in th ...

Error: Unable to render followers list due to incorrect data type

I have embarked on creating a unique Github user card generator that retrieves user data and their followers' information from the GitHub API, then displays them on a personalized user card. The follower's data received is in the form of an array ...

What are the benefits of using .factory instead of declaring a variable in AngularJS?

As I delve into learning Javascript and Angular JS, I'm exploring alternative approaches to using .factory. Instead of declaring what it returns as a variable and referencing it, I'm curious if there's a way around using factory. Why is fac ...

Issues with displaying AngularJs directive template

Having an issue with my AngularJs directive. Everything works perfectly fine when I use the "template" attribute, but when I switch to using "templateURL", it stops working. Both the JavaScript file for the directive and the HTML file for the template are ...