I want to customise the Y axis but have no idea if is it possible to do it with Recharts. I receive the following data:
{ note: "C3", frequency: "1337", time: "13.37" }
I would like to see the notes like chart labels and use frequency for changing charts along the Y axis. Somehow I need to get the current frequency range eg: from 1000 to 1500, and to make breakpoints in the right places.
Can I realise this with Recharts or will it be easier to do it myself with canvas?
Using Recharts, you can set your frequency prop as the YAxis range; just by setting the dataKey prop to frequency:
<YAxis dataKey="frequency" />
This means that your YAxis range will be based on the frequency prop given on your data.
I'm trying out react-nvd3.js, and I have no problem rendering a line chart with a single series. However, I am not sure on how to render with multiple series on the same chart (same axis).
I know that my data is in the correct format since the chart will render one series (the first series). The option to show/hide the two series does appear correctly. I am guessing adjusting the y="value_1" should do the trick, but have so far not been successful.
my data:
datum = [
{
values: series_1,
key: 'value_1',
},{
values: series_2,
key: 'value_2',
}
];
and my rendering:
<NVD3Chart id="lineWithFocusChart" type="lineWithFocusChart" datum={datum} x="label" y="value_1"/>,
It seems you have a problem with how you are referencing the dataset to the x and y axis.
Try changing your attributes to
x='key' and y='values'
<NVD3Chart id="lineWithFocusChart" type="lineWithFocusChart" datum={datum} x="key" y="values"/>
I setup a chart: https://jsfiddle.net/hanoncs/t6rkbp1L/3/ and the second yAxis wont scale to percent. Based on what im googling I should be able to do it this way.
I added the alignTicks:false and it doesn't seem to working.
Just add correct y axis index in time serie description
name: 'OT Percent',
yAxis: 1,
...
Current implementation makes Highcharts assume your second timeserie is still in dollars
You can see more about multiple axes here
Instead of numerical values on the x-axis, i want to set my attribute names.
I am no Javascript hero.
I am using the scatter Chart.
I believe it should be something like :
chart.xAxis.tickFormat(d3.format(String));
and then i can set:
chart.xAxis
.axisLabel('Attributes').staggerLabels(true).tickValues(["A", "B", "C"]);;
and then set the values:
data[i].values.push({
x : "A" ,
y : 29.765957771107,
size: Math.random(),
shape: shapes[j % 6]
} , ..
How to see my attributes "A", "B", etc on the x-axis ?
I browsed the nvd3 source code also but not finding the right API call.
You can pass in a format function that returns label. This is an API of d3js.
var x_format = function(num) {
if (num === 2.3)
return "A";
else if (num === 5.6)
return "B";
else if (num === 45.2)
return "C";
};
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(x_format);
Check out this example that I make for scatterplot.
http://vida.io/documents/jSGz9TQEmzwMqQzhs
{(A, 2.3), (B, 5.6), (C, 45.2) }
Update: my answer with fixed value.
Update: hybrid combination between line, bar, scatterplot:
http://vida.io/documents/fN5FjsYaHaJSXEjz7
I have the same problem. My simple solution consists in avoiding the code declaring the x axis. In the nvd3 web also there is this solution: see http://nvd3.org/livecode/index.html#codemirrorNav for an example.
Rotating a bar chart into a column chart largely involves swapping x with y.
However, a number of smaller incidental changes are also required.
This is the cost of working directly with SVG rather than using a high-level visualization grammar
like ggplot2
On the other hand, SVG offers greater customizability; and SVG is a web standard,
so we can use the browser’s developer tools like the element inspector, and use SVG for things beyond visualization.
When renaming the x scale to the y scale, the range becomes [height, 0] rather than [0, width]. This is because the origin of SVG’s coordinate system is in the top-left corner. We want the zero-value to be positioned at the bottom of the chart, rather than the top. Likewise this means that we need to position the bar rects by setting the "y" and "height" attributes, whereas before we only needed to set "width". (The default value of the "x" attribute is zero, and the old bars were left-aligned.)
var x = d3.scale.ordinal()
.domain(["A", "B", "C", "D", "E", "F"])
.range([0, 1, 2, 3, 4, 5]);
It would be tedious to enumerate the positions of each bar by hand, so instead we can convert a continuous range into a discrete set of values using rangeBands or rangePoints. The rangeBands method computes range values so as to divide the chart area into evenly-spaced, evenly-sized bands, as in a bar chart. The similar rangePoints method computes evenly-spaced range values as in a scatterplot.
For example:
var x = d3.scale.ordinal()
.domain(["A", "B", "C", "D", "E", "F"])
.rangeBands([0, width]);
For more information Click http://bost.ocks.org/mike/bar/3/
My data is something like this:
[
{"months": ["2012.10","2012.11"], "score": 0.1048387096775},
{"months": ["2012.11","2013.1" ], "score": 0.1048387096775},
{"months":["2013.1","2013.2"],"score":0.45362903225749995},
{"months":["2013.2","2013.3"],"score":0.4912023460409091},
...
]
The x axis shows the months in the form of 2012.10 & 2012.11; the y axis shows the score accordingly. However, the x axis only has two ticks and the line chart turns into a weird shape.
Here is my code: http://plnkr.co/edit/uX8ctTEJy5lDs7LWY0Pq?p=preview
The problem is that you are using an ordinal scale. Ordinal scales are a map between the domain values to range values. I think that you may want to use an actual date (the end of the first month, for instance) and set the label to have both values. Take a look at the avg.axis.tickFormat documentation.