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
Related
I have a bar chart that always shows 4 bars. The bars are coloured dynamically. It looks like the coloured box takes its colour from the first data. I would like to use the colour from the 4th (last) data value. Maybe the options:plugins:legend:label:sort function helps but I don't understand what it does.
options
const options = {
scales: {
x: {
grid: {
display: false,
color: 'rgba(0,0,0)'
}
},
y: {
display: false,
min: 0,
max: 4
},
},
plugins: {
legend: {
position: 'bottom'
}
}
}
So I don't know if I can change the data that the box color comes from, or if there is a config option somewhere where I can change it manually.
You can use the generateLabels function as described here.
Please take a look at below runnable sample code and see how it works.
new Chart('myChart', {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: 'My Dataset',
data: [300, 50, 100],
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
}]
},
options: {
responsive: false,
plugins: {
legend: {
labels: {
generateLabels: chart => {
let ds = chart.data.datasets[0];
let color = ds.backgroundColor[ds.backgroundColor.length - 1];
return [{
datasetIndex: 0,
text: ds.label,
fillStyle: color,
strokeStyle: color
}];
}
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart" height="180"></canvas>
Following up with #uminder's answer, if you want to keep the hide/show chart and the line-through style after clicking on the legend, you can add the following line:
options: {
responsive: false,
plugins: {
legend: {
labels: {
generateLabels: chart => {
let ds = chart.data.datasets[0];
let color = ds.backgroundColor[ds.backgroundColor.length - 1];
return [{
datasetIndex: 0,
text: ds.label,
fillStyle: color,
strokeStyle: color,
+ hidden: !chart.isDatasetVisible(0)
}];
}
}
}
}
}
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
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");