Develop Reference

NuxtJS/Vue3: V-for with async api data not working properly (TS)

I am currently working on a vue 3 project together with typescript.
I have an api, that sends me an array of objects containing the details of each server.
I have a script file under /server/api/serverData.ts that fetches me this data
//we want to fetch asnyc
export default defineEventHandler(async (event) => {
//fetch from uri using $fetch from nuxt
const data = await $fetch("https://game.aq3d.com/api/game/ServerList");
//return data
return data;
});
Here is an example output
[
{
"ID": 1,
"SortIndex": 1,
"Name": "Red Dragon",
"HostName": "nextdragon.aq3d.com",
"Port": 5594,
"UserCount": 754,
"MaxUsers": 900,
"State": true,
"Chat": true,
"Language": "en",
"IP": "",
"LocalIP": "",
"LastUpdated": "2022-12-30T15:22:00",
"Connections": 737,
"GEMQueueLength": 2484,
"AlertLevel": 1,
"Status": 1,
"Region": "NA"
},
{
"ID": 4,
"SortIndex": 16,
"Name": "Localhost",
"HostName": "localhost",
"Port": 5591,
"MaxUsers": 900,
"State": true,
"Chat": true,
"Language": "en",
"IP": "",
"LocalIP": "",
"LastUpdated": "2022-07-01T15:48:00",
"AccessLevel": 100,
"AlertLevel": -1,
"Status": 0,
"Region": "NA"
},
{
"ID": 7,
"SortIndex": 4,
"Name": "Blue Dragon",
"HostName": "game.dragon.aq3d.com",
"Port": 5594,
"UserCount": 180,
"MaxUsers": 900,
"State": true,
"Chat": true,
"Language": "en",
"IP": "",
"LocalIP": "",
"LastUpdated": "2022-12-30T15:22:00",
"Connections": 178,
"AlertLevel": 1,
"Status": 1,
"Region": "NA"
},
{
"ID": 10,
"SortIndex": 7,
"Name": "Black Dragon",
"HostName": "game.dragon.aq3d.com",
"Port": 5593,
"UserCount": 1,
"MaxUsers": 900,
"State": true,
"Chat": true,
"Language": "en",
"IP": "",
"LocalIP": "",
"LastUpdated": "2022-12-30T15:22:00",
"AccessLevel": 100,
"Connections": 1,
"AlertLevel": 1,
"Status": 1,
"Region": "NA"
},
{
"ID": 11,
"SortIndex": 8,
"Name": "Green Dragon [EU]",
"HostName": "nextdragon.aq3d.com",
"Port": 5590,
"UserCount": 128,
"MaxUsers": 900,
"State": true,
"Chat": true,
"Language": "en",
"IP": "",
"LocalIP": "",
"LastUpdated": "2022-12-30T15:22:00",
"Connections": 123,
"AlertLevel": 1,
"Status": 1,
"Region": "EU"
},
{
"ID": 12,
"SortIndex": 9,
"Name": "Gold Dragon [SEA]",
"HostName": "nextdragon.aq3d.com",
"Port": 5591,
"UserCount": 57,
"MaxUsers": 900,
"State": true,
"Chat": true,
"Language": "en",
"IP": "",
"LocalIP": "",
"LastUpdated": "2022-12-30T15:22:00",
"Connections": 55,
"AlertLevel": 1,
"Status": 1,
"Region": "AS"
}
]
I have a Player Info component under /Player/Info.vue with properties
<script setup lang="ts">
interface PlayerProps {
serverName: string;
playerAmount: number;
// maxPlayer: number;
// connections: number;
}
const props = defineProps<PlayerProps>();
</script>
<template>
<div>
<h1>Player Information</h1>
<h2>{{ serverName }}</h2>
<h2>{{ playerAmount }}</h2>
</div>
</template>
I use it inside my app.vue inside the root dir like this:
<script setup lang="ts">
const servers = ref<any>([]);
const apiData = await useFetch('/api/serverData')
//assign apiData to apiRef
servers.value = apiData
console.log(servers.value)
</script>
<template>
<div>
<h1>AQ3D Server Status Infos</h1>
<PlayerInfo v-for="(server, index) in servers" :serverName="Name" :playerAmount="UserCount" />
</div>
</template>
As you can see, it is not showing the data from the json I receive.
I tried tried to use the v-for differently, but this gave me only errors.
What did I miss - is my approach with the ref even current?
I basically just wanna iterate over my component for each server object inside the array like so
ServerName
PlayerAmount
ServerName
PlayerAmount
...

Node-red: How to have an editable u-list?

I'm have a question about Node-red, hope someone can help me.
In my project I need to send a txt file to a few esp32 clients.
I managed to get the .txt file to 1 esp32 client, but what I'll need is to send to several clients, tahnt can vary.
So what I'm trring to get is have an editable list of esp32 clients ( which will turn into subscribed subscribed topics I'm be updating lets say, e.g.: Client_1, Client_2..etc).
I found the node-red-node-ui-list weeks days example with radio buttons (here 1) to be a perfect display for what I need, the thing is, how to produce and editable list that would feed the ui-list demands.
The ui-list needs data in this format [{"title":"Esp32","isChecked":false}].
I managed to produce a list of names: ["Client_1","Client_2"], resorting to an input box that but what I'm not getting able to do is turn this list of names into a list or series (not sure what to call it) that I can feed the ui-list.
In ui-list example we can see how multiple elements should be fed to the list widget:
[{"title":"Sunday","isChecked":true},{"title":"Monday"},{"title":"Tuesday"},{"title":"Wednesday"},{"title":"Thursday"},{"title":"Friday"},{"title":"Saturday","isChecked":true}]
This seems like an list of JSON objects where title and isChecked are the keys, am I right?
the question, hot to get from a list of strings ["Client_1","Client_2"] to that list of objects =
Its a lack of javascript skills for sure.
if anyone has any example or answer that might help me I'm very grateful.
Eventually a delete option would probably be also useful.
And still have to figure out hou to have this list permanent (don't loose it in every reset or power-off).
Here is my current flow, where i can, measure the length, print and delete a global list:
[
{
"id": "81b5cdfd56ea7bbc",
"type": "tab",
"label": "Flow 4",
"disabled": false,
"info": "",
"env":
[]
},
{
"id": "9422ceb76fba4d42",
"type": "inject",
"z": "81b5cdfd56ea7bbc",
"name": "Read length",
"props":
[
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Ola",
"payloadType": "str",
"x": 510,
"y": 260,
"wires":
[
[
"f9ad60dcd7d9447a"
]
]
},
{
"id": "c4c42d4670044e4f",
"type": "debug",
"z": "81b5cdfd56ea7bbc",
"name": "Read length",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 1110,
"y": 260,
"wires":
[]
},
{
"id": "f9ad60dcd7d9447a",
"type": "function",
"z": "81b5cdfd56ea7bbc",
"name": "Read length",
"func": "\nvar fs = global.get('deviceList')||0;\n\n//fs[fs.length + 1] = msg.payload;\n\n//msg.payload = fs.length;\n//msg = { payload:fs[33]}\nmsg = { payload:fs.length}\nif (!msg.payload) msg.payload=\"Vazio\";\n//msg.payload=[{ \"title\": msg.payload, \"isChecked\": false }];\n//return msg;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs":
[],
"x": 810,
"y": 260,
"wires":
[
[
"c4c42d4670044e4f"
]
]
},
{
"id": "82a053ecc65e397e",
"type": "inject",
"z": "81b5cdfd56ea7bbc",
"name": "Add element",
"props":
[
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Client_1",
"payloadType": "str",
"x": 510,
"y": 340,
"wires":
[
[
"4c0274504c14fe11"
]
]
},
{
"id": "8aa2953926e0644a",
"type": "debug",
"z": "81b5cdfd56ea7bbc",
"name": "Add element",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 1110,
"y": 340,
"wires":
[]
},
{
"id": "4c0274504c14fe11",
"type": "function",
"z": "81b5cdfd56ea7bbc",
"name": "Add element",
"func": "const fsd = 'deviceList';\n\nlet fs = global.get(fsd) || [];\n\nglobal.set(fsd, fs);\n\nfs[fs.length] = msg.payload;\n\n\n//msg.payload = fs.length;\n//msg = { payload:fs[33]}\n//msg = { payload:fs.length}\n\n//msg.payload=[{ \"title\": msg.payload, \"isChecked\": false }];\n//return msg;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs":
[],
"x": 810,
"y": 340,
"wires":
[
[
"8aa2953926e0644a"
]
]
},
{
"id": "755407d906abd3bc",
"type": "inject",
"z": "81b5cdfd56ea7bbc",
"name": "Read deviceList",
"props":
[
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Ola",
"payloadType": "str",
"x": 520,
"y": 300,
"wires":
[
[
"6510945a12641605"
]
]
},
{
"id": "b731204d6fe17dfe",
"type": "debug",
"z": "81b5cdfd56ea7bbc",
"name": "Read deviceList",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 1120,
"y": 300,
"wires":
[]
},
{
"id": "6510945a12641605",
"type": "function",
"z": "81b5cdfd56ea7bbc",
"name": "Read deviceList",
"func": "\nvar deviceList = global.get('deviceList');\n\n//fs[fs.length + 1] = msg.payload;\n\n//msg.payload = fs.length;\n//msg = { payload:fs[33]}\nmsg = { payload: deviceList}\n\n//msg.payload=[{ \"title\": msg.payload, \"isChecked\": false }];\n//return msg;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs":
[],
"x": 820,
"y": 300,
"wires":
[
[
"b731204d6fe17dfe"
]
]
},
{
"id": "b6e926ea63f838f3",
"type": "inject",
"z": "81b5cdfd56ea7bbc",
"name": "Delete list",
"props":
[
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 500,
"y": 380,
"wires":
[
[
"a9b54a8c025573b7"
]
]
},
{
"id": "cf15719dd8237868",
"type": "debug",
"z": "81b5cdfd56ea7bbc",
"name": "Delete deviceList",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 1130,
"y": 380,
"wires":
[]
},
{
"id": "a9b54a8c025573b7",
"type": "change",
"z": "81b5cdfd56ea7bbc",
"name": "",
"rules":
[
{
"t": "delete",
"p": "deviceList",
"pt": "global"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 850,
"y": 380,
"wires":
[
[
"cf15719dd8237868"
]
]
}
]

Remove extra layer from object

I have some web-hook which returns next data:
"data": {
"object": {
"id": "cus_JYmRConwwwbDjw",
"object": "customer",
"address": null,
"balance": 0,
"created": 1622105261,
"currency": null,
"default_source": null,
"delinquent": false,
"description": null,
"discount": null,
"email": null,
"invoice_prefix": "7BA9446D",
"invoice_settings": {
"custom_fields": null,
"default_payment_method": "pm_1Ivesgeee6awlUaOWjDDzmv",
"footer": null
},
"livemode": false,
"metadata": {},
"name": null,
"next_invoice_sequence": 1,
"phone": null,
"preferred_locales": [],
"shipping": null,
"sources": {
"object": "list",
"data": [],
"has_more": false,
"total_count": 0,
"url": "/v1/customers/cus_JYmRCewwea5bDjw/sources"
},
"subscriptions": {
"object": "list",
"data": [],
"has_more": false,
"total_count": 0,
"url": "/v1/customers/cus_JYmewenGa5bDjw/subscriptions"
},
"tax_exempt": "none",
"tax_ids": {
"object": "list",
"data": [],
"has_more": false,
"total_count": 0,
"url": "/v1/customers/cus_JYmRCowea5bDjw/tax_ids"
},
"tax_info": null,
"tax_info_verification": null
},
"previous_attributes": {
"invoice_settings": {
"default_payment_method": null
}
}
},
"type": "customer.updated"
}
To access for example id I need to use next path data.object.id.
How I can avoid using this not readable, not needed object item in path?
What I need is data.id

Stripe invoice.upcoming webhook

I want to know what is the example data from invoice.upcoming webhook of stripe.
Is the data.object.id is null?
Where I can get the amount? Is it on the data.object.amount_paid or data.object.amount_due?
And what is the status of this invoice?
Example data I got here in stackoverflow but I think it's not complete?
{
"created": 1326853478,
"livemode": false,
"id": "evt_000000000010000",
"type": "invoice.upcoming",
"object": "event",
"request": null,
"pending_webhooks": 1,
"api_version": "2017-06-05",
"data": {
"object": {
"id": null,
"object": "invoice",
"amount_due": 0,
"amount_paid": 0,
"application_fee": null,
"attempt_count": 0,
"attempted": true,
"charge": null,
"closed": true,
"currency": "usd",
"customer": "cus_J1QXR23OrUTxx1fk",
"date": 1503541536,
"description": null,
"discount": null,
"ending_balance": 0,
"forgiven": false,
"lines": {
"data": [
{
"id": "sub_BNx15yNiTkAlQOye",
"object": "line_item",
"amount": 500,
"currency": "jpy",
"description": null,
"discountable": true,
"livemode": true,
"metadata": {
},
"period": {
"start": 1507604796,
"end": 1510283196
},
"plan": {
"id": "bplan",
"object": "plan",
"amount": 500,
"created": 1504352393,
"currency": "jpy",
"interval": "month",
"interval_count": 1,
"livemode": false,
"metadata": {
},
"name": "B plan",
"statement_descriptor": null,
"trial_period_days": null
},
"proration": false,
"quantity": 1,
"subscription": null,
"subscription_item": "si_1B0LmKE9P3qCpf5erqbpMxkI",
"type": "subscription"
}
],
"total_count": 1,
"object": "list",
"url": "/v1/invoices/in_1AuB2KE9P3qCpf5ekFh7qpAi/lines"
},
"livemode": false,
"metadata": {
},
"next_payment_attempt": null,
"paid": true,
"period_end": 1503541536,
"period_start": 1503541536,
"receipt_number": null,
"starting_balance": 0,
"statement_descriptor": null,
"subscription": "sub2JQx1xlg9zIFhk",
"subtotal": 0,
"tax": null,
"tax_percent": null,
"total": 0,
"webhooks_delivered_at": 1503541537
}
}
}

Those Events generated from the Dashboard are totally fake, so I don't think you'll ever find usable data in them, but amount_due is what you want here.
Since Upcoming Invoices haven't been created yet - they're just a preview of future charges - they have no ID or status.

Here's a full example of Stripe's invoice.upcoming event.
I found it using the test clocks feature. Please note that is the kind of data you'll get by renewing a yearly susbscription.
{
"object": "invoice",
"account_country": "US",
"account_name": "Your company",
"account_tax_ids": null,
"amount_due": 9900,
"amount_paid": 0,
"amount_remaining": 9900,
"application_fee_amount": null,
"attempt_count": 0,
"attempted": false,
"automatic_tax": {
"enabled": false,
"status": null
},
"billing_reason": "upcoming",
"charge": null,
"collection_method": "charge_automatically",
"created": 1679397051,
"currency": "usd",
"custom_fields": null,
"customer": "cus_XXXXXXXX",
"customer_address": null,
"customer_email": "xxxx#user.io",
"customer_name": "Customer name",
"customer_phone": null,
"customer_shipping": null,
"customer_tax_exempt": "none",
"customer_tax_ids": [],
"default_payment_method": null,
"default_source": null,
"default_tax_rates": [],
"description": null,
"discount": null,
"discounts": [],
"due_date": null,
"ending_balance": 0,
"footer": null,
"last_finalization_error": null,
"lines": {
"object": "list",
"data": [
{
"id": "il_tmp_xxxxxxxxxxxxxxxxxxxxxxx",
"object": "line_item",
"amount": 9900,
"currency": "usd",
"description": "1 × Your sub (at $99.00 / year)",
"discount_amounts": [],
"discountable": true,
"discounts": [],
"livemode": false,
"metadata": {},
"period": {
"end": 1711019451,
"start": 1679397051
},
"plan": {
"id": "price_XXXXXXXXXXXXXXXX",
"object": "plan",
"active": true,
"aggregate_usage": null,
"amount": 9900,
"amount_decimal": "9900",
"billing_scheme": "per_unit",
"created": 1600678675,
"currency": "usd",
"interval": "year",
"interval_count": 1,
"livemode": false,
"metadata": {},
"nickname": null,
"product": "prod_XXXXXXXXXXXX",
"tiers_mode": null,
"transform_usage": null,
"trial_period_days": null,
"usage_type": "licensed"
},
"price": {
"id": "price_XXXXXXXXXXXXXX",
"object": "price",
"active": true,
"billing_scheme": "per_unit",
"created": 1600678675,
"currency": "usd",
"livemode": false,
"lookup_key": null,
"metadata": {},
"nickname": null,
"product": "prod_XXXXXXXXXXXX",
"recurring": {
"aggregate_usage": null,
"interval": "year",
"interval_count": 1,
"trial_period_days": null,
"usage_type": "licensed"
},
"tax_behavior": "unspecified",
"tiers_mode": null,
"transform_quantity": null,
"type": "recurring",
"unit_amount": 9900,
"unit_amount_decimal": "9900"
},
"proration": false,
"proration_details": {
"credited_items": null
},
"quantity": 1,
"subscription": "sub_XXXXXXXXXXXXXX",
"subscription_item": "si_XXXXXXXXXXXX",
"tax_amounts": [],
"tax_rates": [],
"type": "subscription"
}
],
"has_more": false,
"total_count": 1,
"url": "/v1/invoices/upcoming/lines?customer=cus_XXXXXXXXXXXX&subscription=sub_XXXXXXXXXXX"
},
"livemode": false,
"metadata": {},
"next_payment_attempt": 1679400651,
"number": null,
"on_behalf_of": null,
"paid": false,
"paid_out_of_band": false,
"payment_intent": null,
"payment_settings": {
"payment_method_options": null,
"payment_method_types": null
},
"period_end": 1679397051,
"period_start": 1647861051,
"post_payment_credit_notes_amount": 0,
"pre_payment_credit_notes_amount": 0,
"quote": null,
"receipt_number": null,
"starting_balance": 0,
"statement_descriptor": null,
"status": "draft",
"status_transitions": {
"finalized_at": null,
"marked_uncollectible_at": null,
"paid_at": null,
"voided_at": null
},
"subscription": "sub_XXXXXXXXXXXX",
"subtotal": 9900,
"tax": null,
"test_clock": "clock_1Kfj8pAP8XE2C2mat1YQW7Rg",
"total": 9900,
"total_discount_amounts": [],
"total_tax_amounts": [],
"transfer_data": null,
"webhooks_delivered_at": null
}

negative axis values glitch the chart

I tried to create chart with some values on axis are being listed as expected considering data that is provided ( marked with red )
but what confuses me is when i provide negative values ( same values just added - )
it just shows 0 on axis
is there possibility to create same behavior as I have on positive values when they are provided ni data, so it does not glitch when values are provided ?
$(function() {
var chart = new Highcharts.Chart(
{
"meta": {
"drilldownEnabled": false
},
"chart": {
renderTo:"container",
"additionalData": {
"dateTime": false,
"datetype": "string",
"cliccable": true,
"drillable": false,
"drillableChart": false,
"isCockpit": true,
"categoryColumn": "product_name",
"categoryGroupBy": "",
"categoryGroupByNamens": "",
"categoryName": "product_name",
"categoryOrderColumn": "",
"categoryOrderType": "",
"categoryStacked": "",
"categoryStackedType": ""
},
"zoomType": "xy",
"panning": true,
"type": "column",
"options3d": {
"enabled": false,
"alpha": 25,
"beta": 15,
"depth": 50,
"viewDistance": 25
},
"backgroundColor": "#FFFFFF",
"heightDimType": "pixels",
"widthDimType": "pixels",
"plotBackgroundColor": null,
"plotBorderWidth": null,
"plotShadow": false,
"borderColor": "#FFFFFF",
"style": {
"backgroundColor": "#FFFFFF",
"fontFamily": "",
"fontWeight": "",
"fontSize": ""
},
"events": {}
},
"colors": [
"#7cb5ec",
"#434348",
"#90ed7d",
"#f7a35c",
"#8085e9",
"#f15c80",
"#e4d354",
"#2b908f",
"#f45b5b",
"#91e8e1"
],
"title": {
"text": "",
"style": {
"align": "",
"color": "",
"fontFamily": "",
"fontSize": "",
"fontWeight": ""
}
},
"legend": {
"itemDistance": 0,
"symbolPadding": 25,
"enabled": false
},
"xAxis": [
{
"plotBands": [
{
"label": {
"text": "",
"align": "center"
},
"color": "",
"from": 0,
"to": 0
}
],
"plotLines": [
{
"label": {
"text": "",
"align": "center"
},
"color": "",
"dashStyle": "",
"value": 0,
"width": 0
}
],
"type": "category",
"id": 0,
"title": {
"customTitle": false,
"text": "product_name",
"style": {}
},
"labels": {
"style": {
"color": "",
"fontFamily": "",
"fontSize": "",
"fontWeight": ""
},
"align": ""
}
}
],
"yAxis": [
{
"plotBands": [
{
"label": {
"text": "",
"align": "center"
},
"color": "",
"from": 0,
"to": 0
}
],
"plotLines": [
{
"label": {
"text": "",
"align": "center"
},
"color": "",
"dashStyle": "",
"value": 0,
"width": 0
}
],
"min": 0,
"title": {
"text": "store_sales",
"customTitle": false,
"style": {
"color": "",
"fontFamily": "",
"fontWeight": "",
"fontSize": ""
}
},
"labels": {
"style": {
"color": "",
"fontFamily": "",
"fontSize": "",
"fontWeight": ""
},
"align": ""
},
"gridLineDashStyle": "$convertedTypeline",
"minorGridLineDashStyle": "$convertedMinorTpeline"
}
],
"series": [
{
"name": "store_sales",
"dataLabels": {
"style": {
"color": "",
"fontFamily": "",
"fontWeight": "",
"fontSize": "",
"fontStyle": ""
},
"enabled": true,
"labelFormat": "{y:,.2f}"
},
"data": [
{
"drilldown": false,
"y": -6.36,
"name": "ADJ Rosy Sunglasses",
"datetype": "string"
},
{
"drilldown": false,
"y": -9.55,
"name": "Akron City Map",
"datetype": "string"
},
{
"drilldown": false,
"y": -12.55,
"name": "American Beef Bologna",
"datetype": "string"
},
{
"drilldown": false,
"y": -7.35,
"name": "American Chicken Hot Dogs",
"datetype": "string"
},
{
"drilldown": false,
"y": -12.19,
"name": "American Cole Slaw",
"datetype": "string"
},
{
"drilldown": false,
"y": -6.68,
"name": "American Corned Beef",
"datetype": "string"
},
{
"drilldown": false,
"y": -8.57,
"name": "American Foot-Long Hot Dogs",
"datetype": "string"
},
{
"drilldown": false,
"y": -6,
"name": "American Low Fat Bologna",
"datetype": "string"
},
{
"drilldown": false,
"y": -7.94,
"name": "American Low Fat Cole Slaw",
"datetype": "string"
},
{
"drilldown": false,
"y": -6.49,
"name": "American Pimento Loaf",
"datetype": "string"
}
],
"selected": true,
"tooltip": {
"valueDecimals": 2,
"scaleFactor": "empty",
"ttBackColor": "#FCFFC5"
},
"yAxis": 0
}
],
"tooltip": {
"borderWidth": 0,
"borderRadius": 0,
"followTouchMove": false,
"followPointer": true,
"useHTML": true,
"backgroundColor": null,
"style": {
"padding": 0
}
},
"lang": {
"noData": ""
},
"noData": {
"style": {
"fontFamily": "",
"fontSize": "",
"color": ""
},
"position": {
"align": "center",
"verticalAlign": "middle"
}
},
"credits": {
"enabled": false
},
"plotOptions": {
"line": {
"marker": {
"symbol": "circle",
"lineWidth": 2
}
},
"series": {
"events": {},
"showCheckbox": true,
"cursor": "pointer",
"point": {
"events": {}
},
"dataLabels": {
"allowOverlap": true
},
"turboThreshold": 2000
}
}
}
);
});
here is a snippet of negative ( with glitch )
http://jsfiddle.net/JeLrb/532
here is a same snippet just with positive (how axis values should be displayed)
http://jsfiddle.net/JeLrb/533/
Anyone know solution for this ?
Thank you !

Remove the yAxis: "min:0" and it will create negative yAxis DataLabels for you.
Please check
"yAxis": [
{
/*"min": 0, remove this */
"title": {
"text": "store_sales",
"customTitle": false,
"style": {
"color": "",
"fontFamily": "",
"fontWeight": "",
"fontSize": ""
}
}
}
]
http://jsfiddle.net/98b0dkLj

If you change "yAxis": "min": from 0 to something like -20 it will work.