Plot a linear chart in Apex using x and y values along a dateTime axis

Greetings! I am currently utilizing Apex chart in conjunction with vue.js and VueApexChart.

Below is the value of my options:

 export const option = {
    chartOptions: {
        chart: {
            height: 350,
            type: 'line',
            zoom: {
                enabled: false,
            },
            toolbar: {
                show: false,
            },
        },
        dataLabels: {
            enabled: false,
        },
        stroke: {
            curve: 'straight',
        },
        grid: {
            row: {
                colors: ['#f3f3f3', 'transparent'],
                opacity: 0.5,
            },
        },
        yaxis: {
            type: 'numeric',
        },
        xaxis: {
            type: 'datetime',
        },

    },
};

Furthermore, within my component data, here is the structure of my series:

chartData = [{
    "name": "Chloride",
    "data": [{
        "x": "2021-02-08",
        "y": 40,
    }]
}, {
    "name": "M Alkalinity",
    "data": []
}]

When calling my component like this:

 <apexchart
    type="line"
    height="350"
    :options="chartOptions"
    :series="chartData"
  />

No data is being displayed on the chart.

javascriptvue.jsapexcharts

Answer №1

When testing it out in a codesandbox environment, everything ran smoothly. Could it be possible that the issue you encountered was due to the absence of chart data? (I have included some sample data for reference)

Click here to see it in action

https://i.sstatic.net/CLpNW.png

I made the following changes:

chartData = [{
    "name": "Chloride",
    "data": [{
        "x": "2021-02-08",
        "y": 40,
    }]
}, {
    "name": "M Alkalinity",
    "data": []
}]

to:

export default {
  data() {
    return {
      chartOptions: {
        //..
      },
      series: [
        {
          name: "Chloride",
          data: [
            {
              x: "2021-02-08",
              y: 40,
            },
            {
              x: "2021-02-09",
              y: 50,
            },
          ],
        },
        {
          name: "M Alkalinity",
          data: [
            {
              x: "2021-02-08",
              y: 60,
            },
            {
              x: "2021-02-09",
              y: 20,
            },
          ],
        },
      ],
    };
  },
};

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

Is my Bootstrap malfunctioning? The grid system seems to be malfunctioning

My very first question here is quite simple. I have a script that creates rows with dynamic content by appending 4 boxes (columns) in one row and then appending the row to the container. After completing this process, it appends the container to the main c ...

javascriptcsstwitter-bootstrap

Unraveling the Power of Recursive Functions within a React.JS

I'm encountering an issue with a React project. It involves a tic tac toe game where I'm currently working on the implementation of the computer player. The problem arises when the human player clicks on one square (Field-component), triggering ...

javascriptreactjs

Utilizing prerender.io with lazy loading in Angular 2: A comprehensive guide

As Angular Universal is not expected to be included in the CLI for some time, I've had to resort to using prerender.io in order to ensure proper SEO functionality. However, my tests have shown that there are issues with lazy loaded modules causing SEO ...

javascriptangulartypescriptseoprerender

Internet Explorer automatically moves the cursor to the beginning of a textarea when it gains

When trying to insert "- " into an empty textarea, I am facing issues with Internet Explorer. While Firefox and Chrome work perfectly fine by inserting the text as expected, IE causes it to jump to the beginning of the textarea after insertion. Therefore, ...

javascriptjqueryhtmlinternet-explorertextarea

Checking for Click Events in React Components

Recently, I created a React component named HelpButton with the following structure: import helpLogo from '../Resources/helplogo.svg'; function HelpButton(props) { const [isOpen, setisOpen] = React.useState(false) function toggle() { ...

javascriptreactjsunit-testingjestjsreact-testing-library

Generating prime numbers in Javascript

My attempt at generating the prime numbers less than 20 using my current knowledge is as follows: let arr = []; for (let x = 3; x <= 20; x++) { for (let i = 20; i > 0; i--) { if (x % i !== i) { arr.push(x) } } console.log(arr) ...

javascriptmath

Is there a way to set the AutoComplete control in Material-UI as mandatory?

Yesterday was a frustrating day as I attempted to set the AutoComplete control as required. Unfortunately, the API lacks a required attribute and onNewRequest doesn't trigger if the textbox is empty. Additionally, onBlur has a glitch preventing it fro ...

javascriptreactjsmaterial-ui

Incorporate JavaScript to include a new class and attribute

Apologies for any language barriers.. I grasp that it involves using addClass and removeClass, but I am uncertain about how to write the terms. I need to ensure that if the screen resolution is less than 768 pixels, then the attributes id="dLabel" type="b ...

javascriptjqueryhtmlcss

Utilize the power of jQuery accordion to organize and display your table

Is there a way to integrate jQuery UI Accordion with an HTML table so that columns can be collapsible? I have tried various methods but haven't been successful. Currently, this is what I have implemented: $(".col1, .col2").addClass("hidden"); $(".s ...

javascriptjqueryjquery-uiaccordionjquery-ui-accordion

My Instagram stream using the Ionic framework's infinite-scroll feature is experiencing issues with repeated duplicates in the repeater

I am currently working on developing a mobile app for IOS and Android using the Ionic Framework. The app will feature an Instagram Feed with the Instagram API, displaying all photos shared under a specific hashtag (for example, #chocolat). I am also lookin ...

javascriptjqueryangularjsionic-framework

Troubleshooting a JavaScript project involving arrays: Let it pour!

I'm a beginner here and currently enrolled in the Khan Academy programming course, focusing on Javascript. I've hit a roadblock with a project called "Make it rain," where the task is to create raindrops falling on a canvas and resetting back at ...

javascriptarrayscanvaskhan-academy

Exploring the nativeElement property of a customized Angular HTML element

In my Angular Jasmine Unit Test, I am testing a third-party slider component in my application using the following code snippet: Here is the HTML: <ui-switch id="EditSwitch" name="EditSwitch" (change)="togglePageState()"></ui-switch> And her ...

javascriptangularunit-testingtypescriptjasmine

Angular has the ability to round numbers to the nearest integer using a pipe

How do we round a number to the nearest dollar or integer? For example, rounding 2729999.61 would result in 2730000. Is there a method in Angular template that can achieve this using the number pipe? Such as using | number or | number : '1.2-2' ...

javascriptangulartypescript

Working with ReactJs: Passing Parameters to Second Function

Currently, I am utilizing React-Bootstrap and looking to implement tooltips without creating multiple functions. Instead, I am using the second parameter to change the text of tooltips. However, I am encountering an issue where the function is interpreting ...

javascriptreactjsreact-bootstrap

"Vue is in the process of loading an image from a

Having trouble loading an image in vue.js I've been attempting to load my image without success. If anyone has a solution, I would greatly appreciate your help. This is the HTML source: <div class="col-md-4 col-sm-6 portfolio-item" v-for="(obj, ...

javascriptvue.js

Adding fields to all objects in an array within MongoDB

I'm trying to update all objects in an array by adding a new field only if it doesn't already exist. I attempted to use the updateMany method but it doesn't seem to be working. Can someone please assist me? const updateResult = await Form.up ...

javascriptnode.jsreactjsmongodbmongoose

What exactly is the purpose of the script type importmap?

Can you explain the role of <script type="importmap"> and why it has become necessary for my code to function properly? <script type="importmap"> { "imports": { "three": "http ...

javascriptimport

My webpage effortlessly retrieved data without the need to manually click a button using JavaScript, and a subsequent button call was made

Could someone assist me with this issue? I am utilizing the fetch API and have it linked to a button. The problem I am facing is that even without clicking the button, my data is being fetched from the API. When I click the button to fetch data for the fir ...

javascripthtmlapies6-promisefetch-api

Utilizing Additional Parameters in Vuetify Rule Declarations

I am looking to establish a set of rules that can be applied universally across all fields. In order to achieve this, I need the ability to include additional parameters in my rules, such as setting a maxlength of 20 for one field and a maxlength of 50 f ...

vue.jsvuetify.js

Running a Node.js worker on an Amazon ECS-hosted server: A step-by-step guide

Our team is currently running a node server on Amazon ECS that receives up to 100 hits per second. Due to the single-threaded nature of JavaScript, we are hesitant to block the event loop. As a solution, we are looking to implement a worker that can peri ...

javascriptnode.jsamazon-web-servicesamazon-ec2npm