I am having a highchart which shows multiple Y-Axis in opposite directions. It plots correctly but it shows separate lines for both of the axis.
This is for yAxis which I am plotting on highchart. I have set tried on highchart site and tried to replicate multiple lines on fiddle.
yAxises.push({
allowDecimals: false,
title: { text: ' ' },
opposite: true,
top: '0%',
height: '100%',
min: yAxises[0].min,
max: yAxises[0].max,
offset: 0
});
I expect that if I have multiple y-axis with different min and max values then both min and max should be plotted on same line e.g.
YAxis -1 Y-Axis - 2
2 ------------------- 1.5
1 ------------------- 0.5
You can set the same tickAmount property for the y-axes or use tickPositioner function.
yAxis: [{
min: 0,
max: 10,
tickAmount: 3
}, {
min: 0,
max: 16,
tickAmount: 3
}]
Live demo: http://jsfiddle.net/BlackLabel/p12xj7zL/
API Reference:
https://api.highcharts.com/highcharts/yAxis.tickPositioner
https://api.highcharts.com/highcharts/yAxis.tickAmount
Related
Not sure if it's a limitation or not but I can't make chart display all data (I have 1500 records). fitContent() or setVisibleRange() doesn't help.
Demo
var chart = LightweightCharts.createChart(document.body, {
width: 600,
height: 300,
rightPriceScale: {
scaleMargins: {
top: 0.1,
bottom: 0.1,
},
},
});
var areaSeries = chart.addAreaSeries({
topColor: 'rgba(76, 175, 80, 0.56)',
bottomColor: 'rgba(76, 175, 80, 0.04)',
lineColor: 'rgba(76, 175, 80, 1)',
lineWidth: 2,
title: 'AAPL',
});
areaSeries.setData([{
"time": 1629353327,
"value": 19.97
}, {
"time": 1629439727,
"value": 19.67
},
....
}]);
chart.timeScale().fitContent();
Is this expected? It'll work if chart width is set to 800px.
By default the min bar spacing value (the min space between bars) is 0.5, which allows you to show 2 values per 1 pixel. But if you want to show more data in a small viewport, you need to change this value to a smaller value, e.g. 0.001.
You can do that by modifying minBarSpacing option of timeScale - just add timeScale: { minBarSpacing: 0.001 } to your chart's options and it will work. Demo
I want to introduce a Packed circle chart (a variation of bubble chart which contains only the radius as its dimension). React Chartjs and even Chartjs support only Bubble chart but not Packed circle chart. Here is an example of the expected chart I want to add
Can I get something like this using react-chartjs? For example, one needs to do something like below for a regular initiation of a bubble chart.
const defaultDatasets = [
{
label: ["China"],
backgroundColor: "rgba(255,221,50,0.2)",
borderColor: "rgba(255,221,50,1)",
data: [{
x: 735,
y: 50,
r: 15
}]
}, {
label: ["Denmark"],
backgroundColor: "rgba(60,186,159,0.2)",
borderColor: "rgba(60,186,159,1)",
data: [{
x: 116,
y: 50,
r: 10
}]
}, {
label: ["Germany"],
backgroundColor: "rgba(0,0,0,0.2)",
borderColor: "#000",
data: [{
x: 2116,
y: 50,
r: 15
}]
}
]
Since my requirement is a Packed circle chart, so I have two options.
I could omit x and y values. But then all bubbles get messed up.
I could randomise the x and y values and hide the axes. But then the randomisation won't guarantee any bubble overlapping or may bring some bubbles concentrated to one point.
Is there any hack or workaround to show bubbles in a nice order like in the picture above?
I am using Vertical progress bar from rgraph charts.
My output is
What i am trying to do is adjust scale in multiple of 10 wrt numticks.
So if my numticks are 6, scale should to 0,10,20,30...60
How can i do this? Is there any other alternative?
Code
var vprogress = new RGraph.VProgress({
id: 'cvs',
min: 0,
max: 60,
value: 46,
options: {
colors: ['#5bc0de'],
tickmarksInner: true,
gutterRight:35,
numticks:6,
tickmarksColor:['black'],
arrows:true,
textSize: 12,
margin: 5,
}
}).grow();
If I understand correctly you can use the labelsCount option.
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