Hey @manoj-mohan
Can you share a jsfiddle example that viewportMinimum
works with time?
I tried 2 different ways, one is have x value as timestamp, and set xValueType: “dateTime”. like following
{
"type": "line",
"axisX": [
{
"viewportMaximum": 1611186373807,
"viewportMinimum": 1611182782013
}
],
"data": [
{
"markerType": "circle",
"type": "line",
"xValueType": "dateTime",
"dataPoints": [
{
"y": 101789,
"x": 1611185700000,
},
{
"y": 12834,
"x": 1611186300000,
}
],
}
],
}
But it doesn’t set the range to my desired value. However if I comment out xValueType: "dateTime"
, it will work because x value got treated as number.
I tried to set x and viewportMinimum to Date object like viewportMinimum: new Date(2019,03,14)
, but it still doesn’t work.
@Indranil Thx for replying, is there an ETA on this? bc this is affecting our production.
@ShashiRanjan yes, I understand there is some distance between Marh 04, 2020 and Mar 11, 2020. But I would expect the column on the right side to render fully rather than the skewed line.
I think it is still a bug, If you look at how highchart handles this.
go to link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-stacked/
copy paste following snippet into js section
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
labels: {
formatter: function() {
return Highcharts.dateFormat('%a %d %b', this.value);
}
}
},
yAxis: {
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'John',
data: [{x: 1583301600001, y: null}]
}, {
name: 'Jane',
data: [{x: 1583906400000, y: 354}]
}, {
name: 'Joe',
data: [{x: 1583906399999, y: null}]
}, {
data: [{
"x": 1583906399998,
"y": null
}]
}]
});
I can confirm v2.3 fixed memory leak https://canvasjs.com/blog/01/25/canvasjs-charts-v2-3ga-released/
Hi @Indranil, thx for reply. Yes, that’s the current behavior. But there are some use cases that we want to trigger these events on the lines too, especially when you want to do some animations, otherwise only triggering events on datapoints would result in broken animation and inconsistency.
Events on lines are very common in other chart library like highchart or fusion chart too. https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver
Is there any plan to support this feature? as the op said, op can achieve this by tweaking source code. But we are hoping if this can be added officially
Hi @Indranil, I have the same question as OP. seems that for line chart, you have to hover on data points to trigger the mouseover event. What I really need is to hover on the entire series including lines and data points to trigger the event
https://jsfiddle.net/xfjem0dq/1/