I try to change duration property for multiChart but It does not work.
It is example
{
chart: {
type: 'multiChart',
duration: 500,
...
}
}
http://plnkr.co/edit/ohZDWMq4zxear9V98ItO?p=preview
angular-nvd3 is a wrapper for nvd3, it can only provide what nvd3 provides.
Looking at the nvd3 documentation, it seems there is no duration option for multicharts.
http://nvd3-community.github.io/nvd3/examples/documentation.html#multiChart
Update: a multiChart is composed of six subcharts (lines1, lines2, bars1, bars2, stack1, and stack2). Each of those charts has its own duration options.
so for lines1, lines2, bars1, bars2, stack1, and stack2 you can set duration. You can get the behavior you want.
{
chart: {
type: 'multiChart',
...
bars1: {
duration: 2000
},
bars2: {
duration: 2000
},
...
}
}
http://plnkr.co/edit/23FZtmOeX46PZDAW5XIi?p=preview
I think there are two bugs here.
nvd3's multichart model should have a master duration option that sets all the subcharts durations
until that's fixed, angular-nvd3's multichart example should set the duration option of the subcharts
Related
In range-selector, I have many options to select from (in reality) and in given demo, I initially load last 2 hours data.
In this scenario, last 1 hour option is enabled but other options are disabled.
I really don't know what is wrong. The requirement is to load last 2 hour data first and then from dropdown, you can select other options (eg. last 6 hours) and accordingly data will be loaded.
How to enable other options in range-selector ?
I tried setting
minRange:1
but I have no clue how to fix it.
DEMO : https://stackblitz.com/edit/js-2eyktg?file=index.js,chartOptions.js,mock-data%2Fi.js
Updates:
I tried using
allButtonsEnabled: true,
It enables all options but when I click on 3 hours, 6 hours options, it doesn't make any BE call. I believed that it should automatically call afterSetExtremes functions with min & max value, fetch data from BE and update the chart but it doesn't happen.
DEMO : https://stackblitz.com/edit/js-jsxchg?file=index.js,chartOptions.js,backend.js
You can:
a) Set min property for an x-axis in a navigator:
navigator: {
xAxis: {
min: currentTimestamp - 6 * 60 * 60 * 1000, // 6 hours
},
// adaptToUpdatedData: false,
...
}
Live example: https://stackblitz.com/edit/js-m38td3?file=index.js
API Reference: https://api.highcharts.com/highstock/navigator.xAxis
b) Enable rangeSelector.allButtonsEnabled property and use afterBtnClick Highcharts event. The event afterSetExtremes is not called if the extremes are the same as the current one (they are because of initial min and max restriction).
chart: {
zoomType: 'x',
events: {
load: function() {
Highcharts.addEvent(
this.rangeSelector,
'afterBtnClick',
function() {
const button = this.buttonOptions[this.selected];
const chart = this.chart;
afterSetExtremes({
target: {
chart
},
min: chart.xAxis[0].dataMax - button._range,
max: chart.xAxis[0].dataMax
});
});
}
}
}
Live demo: https://stackblitz.com/edit/js-tuzuuz?file=chartOptions.js,index.js,index.html
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I am trying to have stacked bar with different color as below.
I could achive bar as below however looking for -
1. label under each block and count.
2. On click on one of the block, color for rest of the blocks should be changed (should be same as hover behaviour)
Any suggestion and help would be appreciated.
You can use stacked bar chart with enabled data labels:
plotOptions: {
bar: {
stacking: 'normal',
dataLabels: {
color: 'black',
enabled: true,
y: 80
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/wg46umjp/
API Reference: https://api.highcharts.com/highcharts/plotOptions.bar.dataLabels
From everything I've seen we access the y axis on a 2-axis cartesian graph like so:
chart.options.scales.yAxes[0]
However I get 'undefined'. This despite the fact that my chart is generated with the following dictionary:
{
type: 'line',
data: {
...
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
tooltips: {
enabled: false,
}
}
}
This suggests the same method of access as I attempted. However chart.options.scales.yAxes returns object Object, so that is defined. Why can I not access it as an Array, which other examples I've seen, and the method of defining the chart, clearly show it to be?
Your options are defined in the Chart.js version 2 syntax.
scales.[x/y] axes arrays were removed in Chart.js version 3 (see specific changes). Scales are now configured directly to options.scales object with the object key being the scale id.
options: {
scales: {
y: {
beginAtZero: false
}
}
}
It seems that your chart.options.scales are overwritten with default values by Chart.js because they don't comply with the expected format. This would explain why chart.options.scales.yAxes returns an Object instead of an Array.
I have a chart with two types of graphs: line and bar. And I want to set two different loading times for them as the code shows:
seriesSettings: {
line: {
applyAnimation: {
duration: 7500
}
}
bar: {
applyAnimation: {
duration: 3500
}
}
},
However the chart won’t show. When I remove the settings the chart works fine again. Is there a special sequence I need to set these properties?
There is no special sequence. Regardless of the series types used, you can set their delays in just any order. In your code there is a typing error. Find correct one below:
seriesSettings: {
line: {
applyAnimation: {
duration: 7500
}
},
bar: {
applyAnimation: {
duration: 3500
}
}
},
This code below is good with default animation. But it's too fast.
pnlDataInput.el.slideIn('t');
So I give it a custom duration. And it never animation with any duration value. It just show up.
pnlDataInput.el.slideIn('t', {
duration: 4
});
Either the duration may be in milliseconds:
pnlDataInput.el.slideIn('t', {
duration: 4000
});
Or you may need an easing option:
pnlDataInput.el.slideIn('t', {
easing: 'easeOut',
duration: 4
});