We Keep Coding

Formatter AxisLabel ECharts, Format label value

I have used BAR chart from ECharts and now I want to format its Y-Axis value to some other value.
Right now EChart generated my chart like above, But I want to display its Y-Axis value instead of 30,000 or 60,000 I want to display it as 30K, 60K, 80K.., and 150K.
I have tried with Formatter but it's not calling function runtime while EChart generating a chart to convert the value, Looks like this way we can just add Prefix/Suffix to the value
yAxis: [
{
type: 'value',
data: [],
axisLine: {
show: true,
lineStyle: {
show: true,
color: "black",
},
},
axisLabel: {
formatter: '{value} K'
}
},
I have also tried to give the function in formatter but I didn't find a way to pass the current value as a parameter in this function.
yAxis: [
{
type: 'value',
data: [],
axisLine: {
show: true,
lineStyle: {
show: true,
color: "black",
},
},
axisLabel: {
formatter: getFormattedValue(VALUE)
}
},
UPDATED: WITH NEW TRY, BUT STILL IT's NOT WORKING
When we use it like below on EChart official site then it's working
https://echarts.apache.org/handbook/en/basics/release-note/5-3-0/#formatting-of-values-in-tooltip
axisLabel: {
formatter: val => `${val / 1000}K`
}
Updated chart with correct format
But when I use it like below then it's not working, Even function is not getting called, the Value remain as it is
axisLabel: {
formatter: val => `${val / 1000}K`
}
Chart not getting updated

You are very close to the solution, actually...
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: val => `${val / 1000}K`
}
},
series: [
{
data: [30000, 60000, 90000, 120000, 150000],
type: 'line'
}
]
};
let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
#main {
width: 100%;
height: 350px;
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>
The formatter is documented here: Documentation - Apache ECharts

Apex Charts X Axis Datetime Epoch

I have been struggling for hours on this and can't seem to figure anything out, pulling my hair out on this one.
here is my data for the chart
var options = {
chart: {
height: 350,
type: 'area',
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
colors: ["#FFB64D", "#FF5370"],
series: [{
name: 'series1',
data: [0.3333333333333333, 0.5, 0.6, 0.5714285714285714]
}],
xaxis: {
type: 'datetime',
categories: [1641535200, 1641621600, 1641708000, 1641794400],
},
}
var chart = new ApexCharts(
document.querySelector("#area-chart-1"),
options
);
chart.render();
Here is my chart
I can't seem to figure out why the date won't reflect correctly
I have also tried the following code, I have confirmed with a epoch calculator online that this is indeed the dates I am looking for, one time stamp a day with one value per time stamp.
var options = {
chart: {
height: 350,
type: 'area',
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
markers: {
size: 2,
},
colors: ["#FFB64D", "#FF5370"],
series: [{
name: 'series1',
data: [[1641513600, 0.3333333333333333], [1641600000, 0.5], [1641686400, 0.6], [1641772800, 0.5714285714285714]]
}],
xaxis: {
type: 'datetime',
},
tooltip: {
x: {
format: 'dd MMM yyyy'
}
},
}
var chart = new ApexCharts(
document.querySelector("#area-chart-1"),
options
);
chart.render();

Always good to check if you're looking for epoch or milliseconds, converted the times to * 1000 and fixed my issue.

Displaying time series data in a highchart

I am trying to use this chart to display my data - https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/spline-irregular-time
My data looks like this on the backend -
My chart looks like this
Notice the date on the x-axis is wrong and the date on the label always says 1 Jan for all datapoints. How do I fix this such that the date on the label and x-axis is correct. Here is my JS code
var credit = '<?php echo (isset($credit))?$credit:0; ?>'
Highcharts.chart('transactionId', {
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
series: {
marker: {
enabled: true
}
}
},
colors: ['#6CF', '#39F', '#06C', '#036', '#000'],
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
series: [{
name: "Winter 2016-2017",
data: JSON.parse(credit)
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
plotOptions: {
series: {
marker: {
radius: 2.5
}
}
}
}
}]
}
});

The problem is the date format 2020-12-13. Passing a date string directly doesn't work. You have to convert to Date.UTC(year, month, day) format.
So your credit array should look like this when passing to chart config.
credit = [
[Date.UTC(2020, 12, 13), 5000],
[Date.UTC(2020, 12, 19), 50000],
...
]

How to show Day as well as Time in between the days? Multiple data on x-axis Highachrts

I have multiple data coming on each day and I was wondering how to make a graph where I see the days and when I zoom in I should see the time in between the days. I am not able to do so resulting in a graph with days getting duplicated or triplicated as per the number of data points.
Before Zooming:-
After Zoom :-
I would like not to have duplicate Day names rather time in between them.
My Highcharts-ng configuration json object is as follows:-
{
options: {
chart: {
type: 'line',
zoomType: 'xy',
animation: true
},
colors:['#2C91DE','#165A8E'],
plotOptions: {
line:{
marker:{
symbol:'circle'
}
},
series: {
lineWidth: 3,
marker: {
fillColor: 'white',
lineWidth: 1,
lineColor: null,
enabled: true,
radius: 5
}
}
},
tooltip: {
shared: true,
crosshairs: true,
followPointer: true
}
},
title: {
text: ''
},
loading: false,
xAxis: {
type: 'datetime',
title: {
text: 'Date/Time'
},
dataTimeLabelFormats:{
day:'%a',
week:'%a',
},
labels: {
format: '{value:%a}'
}
},
series: [{
pointIntervalUnit: 'hourly'
}],
yAxis: {
title: {
text: ''
}
},
size: {
height: 500
}
}

Highcharts: X axis, MySQL datetime

I cannot get highcharts to recognize my timestamps, they are in javascript date format.
Tried many different approaches, but cannot get it to work when both the data and time array's are seperate.
Fiddle: http://jsfiddle.net/SjL6F/
$(function () {
Highcharts.setOptions({
lang: {
thousandsSep: ''
}
});
$('#container').highcharts({
title: {
text: 'Temperature - Last 24 hours',
},
credits: {
enabled: false
},
subtitle: {
text: "Test Site",
x: -20
},
xAxis: {
type: 'datetime',
labels: {
enabled: true
},
categories: time,
tickInterval: 3600 * 1000,
dateTimeLabelFormats: {
day: '%e of %b'
}
},
yAxis: [{
title: {
text: 'Temperature (\u00b0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}],
tooltip: {
shared: true
},
series: [{
name: 'Temperature',
data: temp,
type: 'line',
tooltip: {
valueSuffix: ' C'
},
marker: {
enabled: false
}
}]
});
});
Highcharts just shows the raw javascript date value.

You are setting categories, which isn't datetime type for xAxis. Remove them, then concat time and temp arrays.
For example:
var concatenatedData = [];
$.each(time, function(i, e){
concatenatedData.push([parseInt(e), temp[i]]);
});
Demo:
http://jsfiddle.net/SjL6F/1/
Note: I have added parseInt, because Highcharts requires timestamps to be numbers, not strings.