How to set multiple intervalType

[wellgdgd]

I am rendering a candlestick chart and a rangeColumn chart in React.

`
const options = {
charts: [
{
axisY: {
title: “Price”,
prefix: “$”,
tickLength: 0
},
toolTip: {
shared: true
},
axisX: {
interval: 30,
intervalType: “minute”,
minimum: “09:00 am”,
maximum: “05:00 pm”
},
data: [
{
name: “Price (in USD)”,
type: “candlestick”,
dataPoints: examples.map(data => ({
y:[
Number(data.Open),
Number(data.Close),
Number(data.High),
Number(data.Low)
]
}))
}
]
},
{
height: 250,
axisX: {
intervalType: “minute”,
yValueFormatString: “hh:mm tt”,
crosshair: {
enabled: true,
snapToDataPoint: true
}
},
axisY: {
title: “Volume”,
prefix: “%”,
tickLength: 0,
},
toolTip: {
shared: true
},
dataPointWidth: 5,
data: [
{
name: “Volume”,
type: “rangeColumn”,
dataPoints: Logs.map(d => ({
x: d.timestamp,
y: [
Number(d.buy)*100,
Number(d.sell)*100
]
}))
}
]
}
]
};
`

I would like to show the time(“hh:mm tt”) in x-axis with minimum and maximum in a candlestick chart.

Also, I would like to show the time, converted from timestamp, in a rangeColumn chart.

Can anybody help me out?

[Indranil]

@wellhys,

You can set the minimum and maximum of x-axis as a Date object or a timestamp and use valueFormatString to format the axis labels as shown in the code snippet below –

With Date object –

axisX:{
  interval: 30,
  intervalType: "minute",
  minimum: new Date(2012, 01, 03, 09, 00),
  maximum: new Date(2012, 01, 03, 17, 00),
  valueFormatString: "hh:mm tt"
},

With Timestamp –

axisX:{
  interval: 30,
  intervalType: "minute",
  minimum: 1328239800000,
  maximum: 1328268600000,
  valueFormatString: "hh:mm tt"
},

Please take a look at this gallery example to render chart with timestamp in React. Also, kindly check this documentation page for information on rendering chart with date-time axis.

___________
Indranil Deo
Team CanvasJS