Error 14 is occurring when attempting to use string values for the categories on the Highcharts

Question

Error 14 is occurring when attempting to use string values for the categories on the Highcharts

Starting right away, here's the requested chart using ChartJS. We have two x-axes. One displays power from a meter and the other displays meter state over time (open, closed, or in standby). Both datasets use Unix time on the X axis. The Y axis for power is numerical, while the state X axis falls into one of three categories. Both datasets are represented with lines. https://i.sstatic.net/rvUJ1.png

To cut to the chase: How can I achieve this with Highcharts? I already have the second axis set up:

        xAxis: {
          type: 'datetime'
        },
        yAxis: [
          {
            title: {
              text: 'Real Power'
            }
          },
          {
            type: 'category', //I have also removed this line 
            title: {
              text: 'state'
            },
            categories: ['closed', 'standby', 'open']
          }
        ],

Any attempt to make the Y axis value a string in Highcharts leads to a familiar error: https://www.highcharts.com/errors/14/

Additionally, it seems that online resources only focus on categories for the X axis. Any guidance on how to accomplish this task would be greatly appreciated. Thank you in advance.

javascript angular typescript highcharts

Answer 1

Answer №1

It's important to note that a string cannot be used as the x value; instead, a number should be used. For instance:

    series: [{
        ...
    }, {
        ...,
        yAxis: 1,
        data: [1, 0, 2, 1]
    }],
    yAxis: [{
        ...
    }, {
        title: {
            text: 'status'
        },
        categories: ['active', 'inactive', 'pending'],
        min: 0,
        max: 2
    }]

Check out this live demo: http://jsfiddle.net/BlackLabel/o7Lvyadm/

For more information, visit the API Reference: https://api.highcharts.com/highcharts/yAxis

Answer 2

It's important to note that a string cannot be used as the x value; instead, a number should be used. For instance:

    series: [{
        ...
    }, {
        ...,
        yAxis: 1,
        data: [1, 0, 2, 1]
    }],
    yAxis: [{
        ...
    }, {
        title: {
            text: 'status'
        },
        categories: ['active', 'inactive', 'pending'],
        min: 0,
        max: 2
    }]

Check out this live demo: http://jsfiddle.net/BlackLabel/o7Lvyadm/

For more information, visit the API Reference: https://api.highcharts.com/highcharts/yAxis

Error 14 is occurring when attempting to use string values for the categories on the Highcharts

Answer №1

Similar questions

``In search of a solution: Resolving the Error Message "Dropzone already attached

AngularJS withCredentials Issue causing data not to be transmitted

Fill a popup window with data retrieved from a MySQL query result

I possess a list of unique identifiers and require the ability to either update an existing object within an array contained in a MongoDB document, if it exists,

Revamping the Look: Refreshing Background of Div

Comparing C pointers to logging in JavaScript

Updating a property on an object during iteration

Implementing a clickable image using an anchor tag in JavaScript

Is there a way to retrieve the zoom level in Highmaps and are there any events related to zooming in Highmaps

Retrieve the document id along with the corresponding data from a collection

The Router.use() function in Node JS for Json web tokens requires a middleware function, however it received an undefined

Making HTTP requests to the Gmail API

Tips for restricting camera movement in threejs

Generate a PDF document on the user's device

Using react hooks, I am refreshing the product image by replacing it with the thumbnail image

Unable to retrieve injected AngularJS services when inside a function within a controller

Generate individual div containers and populate them with content from specific files using an ajax request

Jenkins encountered an issue where script execution was blocked on <URL> due to the document's frame being sandboxed without the 'allow-scripts' permission set

Error message: The call stack size has surpassed the limit, resulting in a RangeError. This issue is

Exploring Vue's reactivity using the composition API and cloning props