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
Related
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.
Im trying to explicitly set the min value for the x axis but for some reason the chart still uses 0 instead of the value im providing.
standAloneChartOptions = {
container: document.getElementById('myChart'),
autoSize: true,
data: someData,
series: [
{
xKey: 'foo',
yKey: 'bar',
yName: 'Bar',
stroke: '#03a9f4',
marker: {
fill: '#03a9f4',
stroke: '#0276ab',
},
tooltipEnabled: false,
}
],
axes: [
{
type: 'number',
position: 'top',
title: {
enabled: true,
text: 'Foo'
},
min: 50,
max: 1000,
tick: {
count: 20
}
},
{
type: 'number',
position: 'left',
},
],
legend: {
position: 'bottom',
},
};
the max value is set accordingly so im confused as to what im doing wrong, would much appreciate the help, thanks!
In my Python
2020-09-23T10:50:46.838023
In JavaScript
2020-09-23T10:50:46.838023
In JavaScript apexcharts format
2020-09-23T03:50:46.838023
why has it changed the hour from 10 to 03?
This my Vue code
chartOptions: {
chart: {
id: "chart" + key,
type: obj.chart,
zoom: {
enabled: false,
},
},
tooltip: {
x: {
format: 'dd/MMM HH:mm:ss',
}
},
xaxis: {
type: "datetime",
categories: obj.time,
labels: {
show: true
}
},
},
};
My obj is object used for foreach loop.
If you want to display local time in ApexCharts, turn off the UTC flag on x-axis labels.
xaxis: {
labels: {
datetimeUTC: false
}
}
I started using ApexChart and it worked fine to create the chart, but it's returning a error "c is undefined" when I try to update the chart.
How I create the chart is below. dates is an array with some dates and values an array with numbers
var options = {
chart: {
height: 350,
type: 'area',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
series: [{
name: "Sales",
data: values
}],
title: {
text: 'Number os sales',
align: 'left'
},
labels: dates,
xaxis: {
type: 'datetime'
},
yaxis: {
opposite: true
},
legend: {
horizontalAlign: 'left'
}
}
var chart = new ApexCharts(
document.querySelector("#salesChart"),
options
)
if (document.getElementById('salesChart')) {
chart.render();
}
Then, I try to update the chart by:
// Update label
ApexCharts.exec('salesChart', 'updateOptions', {
xaxis: {
labels: dates
}
}, false, true)
// Update values
ApexCharts.exec('salesChart', 'updateSeries', [{
data: values
}], true);
The update above is called when I set a new values for the arrays dates and values.
It's returning the error:
TypeError: "c is undefined"
getChartByID http://myserver.com/assets/js/vendors/charts/apex-charts.js:27013
exec http://myserver.com/assets/js/vendors/charts/apex-charts.js:26952
You forgot to give an id to the chart in the options
var options = {
chart: {
id: 'salesChart'
}
}
The function ApexCharts.exec only works when you provide a chart ID.
We are using Highcharts in our application using Angular JS. I want to set the formatting of amounts in a user culture specific formats which I am receiving from $locale service. After refering a link i got know that we can set values in below property for Highcharts:
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
But while writing it in my code I am getting error that Highcharts is not defined, and also not working even if I set only lang property in the config object:
function extendBaseConfiguration(config) {
// these options are the default for all the charts. Pass in an object to override these values (or just change them once they're returned)
return $.extend(true, {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
borderWidth: 0
},
plotOptions: {
column: {
grouping: false,
pointPadding: 0.2,
borderWidth: 0
}
},
lang: {
decimalPoint: $locale.NUMBER_FORMATS.DECIMAL_SEP,
thousandsSep: $locale.NUMBER_FORMATS.GROUP_SEP
},
tooltip: { pointFormat: '{series.name}: {point.y}'},
exporting: {enabled: true},
credits: {enabled: false}
}, config);
}
So how or where could I inject this Highcharts so that I can set it's value. Or is there any other technique by which i can make the amount user culture specific formatted.
Try to use a setOptions inside a controller, seems that options are applied.
Highcharts.setOptions({
lang: {
printChart: 'Aaaa',
thousandsSep: ','
}
});
$scope.chartConfig = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: [1000, 1500, 1200, 8000, 7000]
}],
title: {
text: 'Hello'
},
loading: false
}
Example: http://jsfiddle.net/Hjdnw/1426/