I have generated a bar chart for the data to show ratings of five topics on scale of 5 (Ratings).On x-axis I showed Topic names.
$scope.options = {
chart: {
type: 'discreteBarChart',
height: 450,
margin: {
top: 20,
right: 20,
bottom: 50,
left: 55
},
x: function(d) {
return d.label;
},
y: function(d) {
return d.value;
},
showValues: true,
duration: 500,
xAxis: {
axisLabel: 'X Axis'
},
yAxis: {
axisLabel: 'Y Axis',
axisLabelDistance: -10
}
}
};
$scope.data = [{
values: $scope.Details.ratings
}];
HTML:
<nvd3 options="options" data="data"></nvd3>
On y-axis the max value should be 5, but here it is taking the maximum value among the data and the bars in the bar chart are having large width. How can I change the bar width and max range on y-axis?
i used the following code to set bar width and adjust the bar curvature
enter code here
dispatch: {
renderEnd: function (e) {
d3.selectAll("rect.nv-bar").attr('rx', 4).attr('ry', 4).attr('width', 15)
}
}
putting
groupSpacing : 0.57,
in chart dict will also help to adjust width dynamically
Related
I have figured out how to set the size for an annotation individually:
labels: [
{
point: {
x: chart.xAxis[0].max - 0.1,
y: 50,
xAxis: 0,
yAxis: 0
},
height: 100,
shape: "rect",
text: "test",
verticalAlign: "bottom"
}
]
I would like it to position between 50 and 150. How can I achieve that?
And additionally, I would like the text to be aligned in the center of the box?!
You can calculate the height by using toPixels method. You have to also take a padding into account. To center the text you can use asynchronous function, because annotations do not exist in load event yet.
chart: {
events: {
load: function() {
const chart = this;
const height =
chart.yAxis[0].toPixels(50) - chart.yAxis[0].toPixels(150);
chart.addAnnotation({
labels: [
{
point: {
x: chart.xAxis[0].max - 0.1,
y: 150,
xAxis: 0,
yAxis: 0
},
y: 0,
padding: 0,
height: height,
shape: "rect",
text: "test",
verticalAlign: "top"
}
]
});
}
}
}
Live demo: https://codesandbox.io/s/qqqkx2zr49
API: https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels
usage - Angular NVD3 LineChart
I am getting data, but when data is 0, it plots the graph and plot y axis from range -1,0,1.
But i do want to plot in negative y axis, since my data can never be negative.
X-axis contains time.
My graph progresses as the time elapsed increases, issue is like for first few minutes data will be 0, then afterwards i will start getting data.
JavaScript Code
$scope.options = {
chart: {
type: 'lineChart',
height: 120,
margin : {
top: 8,
bottom: 30,
left:40,
right:50,
},
color: ['#e4a91d','#444fa2','#de0000']
, showLegend: false
, wrapLabels: true
, tooltips:true
, reduceXTicks: false,
x: function(d){ return d[0]; },
y: function(d){ return d[1]; },
showDistY: true,
showDistX: true,
useInteractiveGuideline: true,
transitionDuration: 10,
xAxis: {
axisLabel: '',
tickFormat: function(d) {
return d3.time.format('%H:%M')(new Date(d));
},
tickPadding: 10,
axisLabelDistance: 1,
ticks: 10,
},
yAxis: {
axisLabel: '1 / 2 / 3',
tickFormat: function(d){
return d;
},
ticks: 4,
}
}
};
Html Code
<div>
<nvd3 options="options" data="data" api="api"></nvd3>
</div>
Screenshot
I think this should work.
Add These to your chart object
yDomain: [0, maxY] // maxY being whatever you want your max y value to be
I used something like that in my chart. Found it here https://github.com/krispo/angular-nvd3/issues/47
I am trying to get a basic NVD3 graph, and here's the code snippet.
$scope.options = {
chart: {
type: 'stackedAreaChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 30,
left: 40
},
x: function(d){ return Date(d[1]);},
y: function(d){return d[0];},
useVoronoi: false,
clipEdge: true,
duration: 0,
useInteractiveGuideline: true,
xScale: d3.time.scale(),
xAxis: {
showMaxMin: false,
tickFormat: function(d) {
return d3.time.format('%x')(new Date(d));
}
},
yAxis: {
tickFormat: function(d){
return d;
}
}
}
};
The data that is fed to the chart is like this:
$scope.data = [
{
"key" : "mac1" ,
"values" : [ [ 5000 , "2016-02-03T11:07:58.940Z"] , [ 5200 , "2016-02-03T11:08:09.862Z"] ]
}
];
There's no line or stacked area in the graph.
The X-axis, which is the time series, has the dates of 1/1/1970.
I am unsure where I am going wrong. Help please?
A few similar stackoverflow questions didn't help were -
nvd3 date formatting
The mistake I had done was this, x: function(d){ return Date(d[1]);} this line would return the date format and I was re-formatting the date again in the tickFormat.
Changing to x: function(d){ return d[1];} helped the graph to come up on the screen.
I also tried modifying the duration: 100 yet the graph is unable to be refreshed from server. Any help here?
I made a nvd3 chart. I have a problem. I want to draw a simple red line along y axis. Example: x:i y:180. But I do not want to treat as a data, than has value. So as a simple line.
Sourcecode:
vm.fhrOptions = {
chart: {
type: 'lineChart',
useInteractiveGuideline: true,
height: 300,
forceY:([60,200]),
lineY:([120,180]),
fitScreen: true,
margin : {
left:70,
bottom:0
},
transitionDuration: 1000,
xAxis: xAxisOptions,
yAxis: {
axisLabelDistance:50,
lines: {value: 120},
color : { pattern:['#1f77b4', '#aec7e8']},
axisLabel: 'FHR [pulzus/perc]',
tickFormat: function(d){
return d===null?'NaN':d3.format('d')(d);
},
rotateYLabel: -45,
showMaxMin: false,
domain:([80, 160]),
showLegend:true
}
}
};
Use the following to draw a single line across your chart, change parameters as necessary and change '#chart svg' to your selector name.
d3.select('#chart svg')
.append('line')
.attr({
x1: 500 + chart.xAxis.scale()(0),
y1: 35 + chart.yAxis.scale()(10),
x2: 57 + chart.xAxis.scale()(3),
y2: 35 + chart.yAxis.scale()(10)
})
.style("stroke", "#FF0000")
.style("fill", "#ff0000");
I'm working on project and I'm using NVD3 lineChart, and I couldn't edit chart's grid.
This is the chart's options:
chart: {
type: 'lineChart',
height: 430,
margin: {
top: 20,
right: 20,
bottom: 80,
left: 40
},
x: function (d) {
return d.x;
},
y: function (d) {
return d.y;
},
useInteractiveGuideline: true,
xAxis: {
axisLabel: 'Date',
showMaxMin: false,
tickFormat: function (d) {
return d3.time.format('%b %d')(new Date(d));
},
reduceXTicks: false,
ticks: 13
},
yAxis: {
axisLabel: 'People count',
tickFormat: function (d) {
return d3.format('1d')(d);
}
}
},
title: {
enable: true,
text: 'People count Vs Date'
}
I want to have 7 grid x-axis if there're 7 values for example.
Notice: By editing ticks value to any number the grid doesn't change.
And this is the current chart
https://www.dropbox.com/s/yfin991k0ovycnv/chart.png?dl=0
So, how can I edit chart grid?
The lineChart model exposes the axis as xAxis and yAxis, and those have options on them as well. For instance, you can do:
var chart = nv.models.lineChart();
chart.xAxis.ticks(1);
chart.yAxis.tickVAlues([1,2,3,4,5]);
Most of those options are based on D3 options, for the above example see:
https://github.com/mbostock/d3/wiki/SVG-Axes#ticks (tickValues is right below that one)
For a full list of axis options in nvd3, see the documentation from the community fork here:
https://nvd3-community.github.io/nvd3/examples/documentation.html#axis