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.
Related
My data needs to have an x and a y value, because I want to show the x value when the user hovers over the chart.
I only want to show a limited amount of labels on the x-axis though, which is why I am using categories. I keep getting Highcharts error #19 though, because the chart apparently tries to use the x-values provided in the data array.
I've played around with using type: 'datetime', since I am working with timestamps but I can't position the labels properly in this case and want to use categories instead.
I've created a jsfiddle to explain my problem: http://jsfiddle.net/kf6wrj37/
Instead of just the first and last x-value being display, I want my categories array
categories: [
'1453417200000',
'1456873200000',
'1460325600000',
'1463781600000',
'1467237600000',
'1470693600000',
'1474149600000',
'1477605600000',
'1481065200000',
'1484521200000',
'1487977200000'
],
to be displayed as labels on the x-axis.
How should I go about this? Is it even possible to use categories when my chart's data has x and 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
Highcharts and stockcharts, they both provide the options to add some padding at the x axis in order to avoid drawing some values on the edge of the plot area (left or right).
According to the doc this is archived by employing the minPadding and maxPadding members of the xAxis property of the configuration object used for constructing the chart... but in practice this is not working for stockcharts. So i wonder how i can achieve this... i leave you with the examples...
var examples
Working example for highcharts
Not Working example for stockcharts
P.D: Using property min for setting the lowest x value also isn't working.
The maxPadding is applied when you not call the setExtremes() method. In the Highstock, we call the setExtremes to set the range on the navigator, as a result padding is ignored.
To achieve your goal, you can define the tickLength parameter and set x param per labels.
yAxis: {
tickWidth: 1,
tickLength: 50,
labels:{
x: 50
}
},
Example:
http://jsfiddle.net/b6a42kz0/
OP Note: See the comments for updated answer.
Im trying to create a pareto2d dual y axis Fusion chart. The primary y axis and x axis data are getting plotted fine. But the values that are being passed for the secondary y axis (cumulative percentage line graph ) is not getting plotted properly. It plots incorrect values for the cumilative percentage. Although the data that is being passed for generating the graph is correct. But while its plotted, it shows incorrect values.
code
function(response) {
var myChart = new FusionCharts("FusionCharts/Pareto2D.swf",
chart1Id", "500", "230","0");
myChart.setChartData(response, "xml");
myChart.render("VisifireChart55");
In the above code, the setChartData() parameters contains the right values.Even after plotting the graph, the tool tip specifies the right cumilative % values. But the actual values plotted in the graph are incorrect. When I right click and select the option copy to clipboard, and paste it in a notepad, it contains incorrect data for Cumilative percentage. I have also checked the fusion charts faq and verified whether any duplicate attributes are there in the chartxml data . But there is no redundancy. Any help on this is much appreciated.
I have a datastructure like
[{ name: "a", value: 5000},
{ name: "b", value: 6000},
{ name: "c", value: 7000},
{ name: "d", value: 4000}]
I try to draw a yaxis using the name and the value column using two different yaxis components. However, it appears that the value yaxis is missing one of the the last value (I get 4 ticks for the "name" yaxis labels and 3 ticks for the "value" yaxis labels). See the following fiddle:
http://jsfiddle.net/namit101/AmHhg/73/
It does not draw 3 ticks, as you say. Axis component uses interpolation. The component works as expected, you are just not using it right. You should have individual labels on top of bars. Try changing the values like in this fiddle: http://jsfiddle.net/AmHhg/81/
Since the axis component interpolates between values, if you have the same value twice (bars 2 and 3) it makes sense it's displayed only once...
In the first case (first bar) the bar is changing it's value so we don't actually see it when we have the same value...
Read more about axis here: https://github.com/mbostock/d3/wiki/SVG-Axes.
Also try to look at Bob Monteverde's NVD3 axis components.
To fix this: if you do not actually want to use axis but rather labels, just add labels on top of each bar instead of having them displayed automatically like in the bar tutorials from Mike Bostock and Scott Murray (alignedleft).