Different colored points on a line graph using ChartJS

I am currently using a chartjs graph for angularjs and I am looking to customize the colors of points on the line graph based on different data ranges. Can anyone help me with changing the fillColor property?

function drawChart(placeholder, values1, labels1) {
    var plot = $.plot(placeholder,
        [{
                data: values1,
                label: label1,
                lines: {
                    show: true,
                    lineWidth: 2,
                    fill: true,

                },
                points: {
                    show: true,
                    lineWidth: 3,
                    fill: true,
                    fillColor: '#fafafa'
                }

            },
        });
javascriptangularjschart.js

Answer №1

It's possible that the issue stems from a lack of detail, but it seems like the syntax of your code is incorrect.

Here is the corrected version:

function drawChart(placeholder, values1, labels1) {
    var plot = $.plot(placeholder,
        [{
            data: values1,
            label: label1,
            lines: {
                show: true,
                lineWidth: 2,
                fill: true,

            },
            points: {
                show: true,
                lineWidth: 3,
                fill: true,
                fillColor: '#fafafa'
            }

        }]
    });
}

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

What is the best way to center align and add an icon to the header in Ionic?

How can I center align an "ion-ios-arrow-up" icon in the header of my Ionic app, similar to the concept shown below? This is my HTML template: <ion-view cache-view="false" view-title="Historical HPP"> <ion-nav-bar class="nav-title-slide-ios7 ...

cssangularjsionic-framework

Establish default values for cascade Select in Angular

My goal is to populate Cascading Select elements with initial values from the model. All models have default values. Here is how the view looks: **1)** <select id="ddN_Universitate" ng-model="CandidatInfo.ID_N_UniversitateAbsolvita" ng-change="N_FACUL ...

angularjscascadingdropdown

Implementing an onclick function to initiate a MySQL update query

<?php include_once("db.php"); $result=mysql_query("SELECT * FROM stu WHERE receiver='DM4'"); while($row=mysql_fetch_array($result)){ echo "<tr>"; echo "<td>" . $row['ptype'] . "</td>"; echo "<td>" . $row[&apo ...

javascriptphp

Issue: Unable to extract the 'title' property from '(0 , react__WEBPACK_IMPORTED_MODULE_1__.useContext)(...)' as it is not defined (Next.js Chat App)

Currently facing an issue with the error message "Cannot destructure property 'title' of '(0 , react__WEBPACK_IMPORTED_MODULE_1__.useContext)(...)' as it is undefined" while developing a chat application using Next.js and Solidity. Desp ...

javascriptreactjsnext.jstypeerrorsolidity

Issues arise in iOS7 when attempting to load a JSON file using AngularJS (specifically Ionic) and the `

I've encountered a strange issue. I'm using AngularJS (Ionic) to fetch an external JSON file through a httpPromise. Everything was functioning correctly until yesterday, when the remote files were relocated to a different host. Now, the problem ...

jsonangularjsionic-frameworkios7.1iphone-4

What is the best way to display items using Typeahead.js in combination with the Bloodhound engine?

I am struggling to showcase a collection of items using typeahead with a JSON file as the data source. Unfortunately, none of my information is appearing on the screen. My objective is to list the names and utilize the other attributes for different purpo ...

javascriptjsontypeahead.jsprefetchbloodhound

modify handler for selecting input item in react JS

I am working on mapping option select data from an API, but I am having trouble changing the value of the select input. I have tried using a handler for change, but the input value remains fixed. Can someone please help me identify what error might be pres ...

javascriptreactjsreact-bootstrap

Unable to retrieve data from service within the controller

I can't seem to figure out why this simple task isn't working for me. All I want to do is access the rewards data within my controller's scope: Here are the services: .factory('RewardModel', ['RewardsPromise', 'Ca ...

angularjs

Guide on injecting a Controller into state object within Config using ui-router

Here I am attempting to include the PlatformCtrl into my $stateProvider object: app.js "use strict"; module.exports = angular.module('tickertags', [ 'templateCache', 'headers', // headers (platform, view, tim ...

angularjsangular-ui-routerstateangularjs-controller

RFC compliant URL scheme for single page applications built with Angular

I am currently developing an Angular 1.5 application that relies on a REST service. In certain scenarios, the service requests a redirect URL from the client, appends parameters to it, and then sends the updated URL back to the user. For most clients, the ...

angularjsurlurl-parametersrfc

How to create a see-through background using three.js

I am new to working with three.js and recently came across a codepen that caught my attention. However, I am facing difficulties while trying to change the background color. After exploring various questions related to this issue, I attempted to add { alp ...

javascriptcssanimationthree.js

Is it possible to decrease the size of a div by scrolling both vertically and horizontally?

Can a div's height and width both be reduced at the same time while scrolling down a page? Let's say that as the user scrolls, the size of the div changes from 400px by 400px to 200px by 200px, all while remaining centered on the page. I've ...

javascriptjqueryhtmlcssonscroll

Having trouble running a form due to the inclusion of JavaScript within PHP code

My PHP code includes a form that connects to a database, but when I add JavaScript to the same file, the form does not execute properly. (I have omitted the insert code here.) echo '<form action="$_SERVER["REQUEST_URI"];" method="POST">'; ...

javascriptphp

Live formatting of phone numbers using regular expressions

For my AngularJS project, I am looking to format phone numbers as they are being typed, without relying on any external library. The desired format is: 99 99 99 99 99 var phone = tel.replace(/\D*(\d{2})\D*(\d{2})\D*(\d{2})&b ...

javascriptregexangularjs

Updating ng-repeat in AngularJS when an element's property changesIs there a way to trigger ng

I'm having issues with how Angular watches arrays. Here's the code I'm working with: <map name="theMap" center="{{mapInfo.center.toUrlValue()}}" zoom="{{mapInfo.zoom}}" on-dragend="dragEnd()" on-zoom_changed="zoomChanged()"> <m ...

angularjsng-map

The method continues to receive null values from Ajax despite successfully retrieving the data from Facebook

My current challenge involves creating a login using Facebook. The console indicates that the requested data (email, first_name, etc.) is being retrieved successfully, but for some reason, the AJAX request keeps sending null data to the PHP method. Below ...

javascriptajaxfacebookcodeigniter

`How to prevent other events from triggering in jQuery while an animation is running`

Writing again to seek help with a script issue on my webpage. I previously posted about a problem with the menu focus a week or two ago on this forum. A user suggested a helpful script, but unfortunately, it has a bug that I can't seem to fix. I' ...

javascripthtmlcss

Is the Typescript index signature limited to only working with the `any` type?

I recently made changes to my interface and class structure: export interface State { arr : any[]; } export const INITIAL_STATE: State = { arr: [] }; This updated code compiles without any issues. Now, I decided to modify the Interface to incl ...

javascripttypescript

How can you include the product price in the cart using the URL on WooCommerce?

After some exploration, I discovered that I can easily add items to my cart using a specific URL: http://yoururl.com/cart/?add-to-cart=ID Although I was able to figure out how to include quantity and attributes in the link, I have not been able to determ ...

javascriptphpwoocommerce

Tips for efficiently merging various axios responses

I'm currently working on a React application where I need to create two objects using data from three different APIs. To illustrate: DataObject1 will be generated using API1 and API2. DataObject2 will be generated using API1, API2, and API3. As I c ...

javascriptreactjsaxios