I have such an example in which I would like to change the series of data on the xaxis along with changing the formatting:
ApexCharts.exec("chartID", "updateOptions", {
xaxis: {
type: "datetime",
categories: dates_string_array,
tickAmount:5,
labels: {
show: true,
rotate: -45,
format: 'yyyy-MM-dd'}
},
});
The categories substitution corrects (it is an array with dates as string) however, this formatting format: 'yyyy-MM-dd' still doesn't work - the format is exactly what the dates in the dates_string_array are in.
In this case, do I need to use formatter to overwrite these values?
An example of default format one of array elements:
2022-01-01 10:00
I would like to format it like this:
2022-01-01
Related
xaxis: {
type: this.domain_type,
categories: this.domain,
labels: {
show: !this.isMobileOnly,
style: {
colors: this.range_color,
},
formatter: (val) =>{
if(new Date(val).getMonth() === new Date().getMonth()) {
// only those dates that includes May in their name
// every label that I want is being shown except the May 2022 Label
// May 2022 does get returned here but doesn't get shown as a label on x-axis
return moment(val).format("MMM, YYYY");
}
},
tickPlacement: 'on',
axisBorder: {
show: false,
},
axisTicks: {
show: this.range_ticks,
},
tooltip: {
enabled: this.range_tooltip,
},
tickAmount: undefined,
offsetX: 28,
},
I want to show all the labels in the x-axis in my apex chart component. In my formatter method, I check if the data (which is in the form of dates) includes the current month name irrespective to the year and if it does then, it should be rendered as a label in x-axis. All labels are being show in the x-axis except the last one that is May 2022. Why is the last label not being shown on the chart ?
I know the ApexCharts can help to display data using timeline chart.
but the example(vue) only shown how to display the date like
new Date(1797, 2, 4).getTime(),
new Date(1801, 2, 4).getTime() ```
how can I change the value to display time? like 08:00-09:00
You can create your own x-axis labels in the dataset using the chart's xaxis categories option.
For example:
options: {
chart: {
id: 'mychart'
},
xaxis: {
categories: ['8:00','9:00','10:00','11:00','12:00','1:00','2:00','3:00']
}
}
Use the formatter on the axis: https://apexcharts.com/docs/options/xaxis/. It isn't exactly the format you asked for, but will set you in the right direction. There are getMinutes() getSeconds() and GetHours() among other functions that can be used to then construct a format you want.
xaxis: {
type: 'datetime',
labels: {
formatter: function (val: number) {
return new Date(val).toLocaleTimeString()
}
}
},
I'm using kendo chart, scatter line series type, example:like this
I can able to plot the values on the kendo chart.see the output
I have an array series_array, It is dynamic, contains objects like this
{
name:"series1",
data:[x:"11/12/2018",y:"20",low:"5",high:"10"]
}
jquery code to fill kendo chart is :
code:
$("#chart").kendoChart({
title:{ text:"my error chart"},
seriesDefaults:{
type:"scatterLine",
yErrorLowField:"low",
yErrorHighField:"high",
xField:"x",
yField:"y"
},
series:seris_array
});
Problem is how to get x-axis or categorial axis values like "11/12/2018"(Full Date).
Use the xAxis.labels.format:
xAxis: {
labels: {
format: "{0:d}"
},
},
DEMO
I'm creating a line chart using n3 line chart in my angular app.
My data is array of dates and counts.
This is the result I get:
As you can see, the X axis values are inconsistent.
It has a tick every 12 hours, but each tick has different format. I'm trying to keep the format the same for every tick, i.e:
This is how I include the chart in my html:
<linechart class="linechart" data="data" options="options"></linechart>
This is my axes options:
$scope.options = {
axes: {
x: {
key: "from",
type: "date",
innerTicks: false,
grid: false,
ticksInterval: d3.time.days
},
y: {
ticks: 6,
ticksFormatter: $scope. formatNumber
}
}
I've tried to use diffent values for ticks and ticksInterval but with no success.
Any way to achieve this?
Thank you.
I had the same problem today.
I solved it using thickFormat and the d3.time.format() function.
axes : {
x : {
key : "date",
type : 'date',
tickFormat : d3.time.format("%x %X")
}
}
I have a series of data with a single datapoint every month using the OHLC renderer. I am trying to display it with jqplot. It looks fine, except the data points are far too skinny because jqplot is displaying them as if they only apply to that day. When I take out the date, and just specify month and year, jqplot crashes.
My data looks like this:
[
[
"01/01/2008",
8152.9054008104704,
2612.7075024153296,
5382.8064516128998
],
// ...
[
"03/01/2008",
7554.0494491662403,
2086.69248631764,
4820.3709677419401
],
]
Is this configuration possible, or should I hack the code myself? The documentation doesn't make it clear how to do this.
What code should I be modifying? DateAxisRenderer? OHLCRenderer?
You can use tickInterval option with jqplot.DateAxisRenderer plugin to create monthly ticks.
xaxis: {
renderer: jQuery.jqplot.DateAxisRenderer,
tickOptions: {
formatString:'%#d %I:%M %p'
},
rendererOptions: {
daTickInterval: [1, 'month']
}
}
Jagadish's rendererOptions did not work for me. However, this did:
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%b/%e/%Y'},
tickInterval:'1 month'
}
},