I have a graph in C3JS and i was trying to avoid duplicate labels. When I have a large range of data it does not duplicate the labels but with a small range of data it does.
How do I have it so that it will only display the numbers 19-23% in this case.
Solution 1:- Use axis.tick.limit config set to lesser value like 4 or 5, so that less number of tick values are shown.
Solution 2:- Set axis.tick.format config to a function, which returns percentages a rational number like 20.0%, 20.5%, 21.0%, 21.5%, etc.
Second solution is better.
From the additional y axis labels, it looks like you have already overridden the format function, Just make sure it returns percentages with decimals.
axis: {
y2: {
tick: {
count:3, // Limit number of axis ticks (solution 1)
format: function(d){//logic to return formatted percentages with decimal digit}
}
}
}
Related
What I would like to have: a dygraphs plot with reverse y-axis as shown in the documentation example:
https://github.com/danvk/dygraphs/blob/master/tests/reverse-y-axis.html except I would like the y-max value (now at the bottom) to be dynamic so that its value is equal to the maximum data value in the zoom.
I have tried to set value range as valueRange: [ , 0] in place of valueRange: [ 3000, 0] (which works fine for non-reversed y-axis).
But in the reverse y-axis example yields this:
The original with fixed reverse y-axis valueRange: [ 3000, 0] was this:
I could try adding a zoom listener and then after each zoom set the valueRange: to [ max_value, 0 ]
where max_value is for that specific zoom. But I'd very much like a simpler/cleaner solution if one exists.
Any suggestions appreciated! Thanks!
To decide whether to flip the y-axis, dygraphs looks at whether the min y-value is greater than the max y-value. If you don't specify one, it can't do that, so that's not going to work.
Probably the easiest solution is to flip the y-axis after the data loads:
g = new Dygraph(div, data, options);
g.ready(() => {
const [minY, maxY] = g.yAxisRange();
// Change either of these to a hard-coded value as you wish:
g.updateOptions({valueRange: [maxY, minY]});
});
Full example here.
I'm using ChartJS 2.7.2.
Now Y-axis scale is automatic depending on values. I want it to be still automatic but max should not be too high.
I always want to see max scale at for example: (value+20%).
desired look:
good looking chart
unwanted look:
not so good looking chart
/edited:
example with data
I'm using ajax to get data: my real JS code
I want to see only 3 Y-axis ticks (screen 2) but scale and line should look like here (screen 1).
How it looks without maxTicksLimit: 3,:
screen 1
How it looks with maxTicksLimit: 3,:
screen 2
If you're using a backend language to parse the data prior to displaying it, I'd be doing a calculation there to work out what the "max" figure should be, then insert that into the yTicks are as "max: " (as a PHP example), otherwise, use javascript .forEach to cycle through your data array and determine the highest number, then put that in the max field.
I am having problems controlling the Y-Axis range of a highcharts graph. It seems like highcharts likes nice round numbers. When my data passes or is close to certain thresholds, the Y-Axis range can expand a lot which effectively compresses all the plot points downward.
Here is a jsfiddle that illustrates the problem I am having:
https://jsfiddle.net/shannonwrege/z8h5eork
The relevant code for this post is this:
chart.yAxis[0].setExtremes(0, max, true, false);
Keep in mind that I don't know what the data will look like in advance, so I must dynamically modify the Y-Axis range. Right now I am using the setExtremes because of other suggestions I've read on stackoverflow.
The maximum y-value of the data in the first two charts is 99. You'll notice that the y-axis is set at 150 in the first chart where the range is automatically calculated and 100 in the second chart where I specifically set the extreme values. The look of the 2nd chart is what I want. So it seems like setExtremes(0,99,true,false) should do the trick, but it actually doesn't.
In the 3rd chart I changed the data so that the maximum y-value of the data is 101, and I called setExtremes(0,101,true,false). You'll note that the y-axis is now back to 150.
Ideally I want the scale of the graph to be capped on the maximum value to limit the about of extra white space. I want to see all of the data, but I don't necessarily care about the y-axis displaying a maximum band that is greater than the max data value. In this case, I would be happy with the y-axis displaying 100 on the axis and some points over but still visible.
Does anyone know how to make this work?
I ended up using the endOnTick parameter to solve this problem. Adding the following line to the yAxis configuration parameters did exactly what I wanted:
endOnTick: false,
Here's the updated Fiddle showing the results.
https://jsfiddle.net/shannonwrege/z8h5eork/3/
All of the charts look pretty good in my opinion (even the one where the yAxis range was auto calculated).
You will need to read the data and then round up to set the idealMax
var chart,
idealMax = 0; // init the max value
// Read the data to find the highest value
for (i=0;i < (options.series[0].data).length; i++ ){
if (options.series[0].data[i][1] > idealMax) {
idealMax = options.series[0].data[i][1];
}
}
// Round the max to the nearest 10
idealMax = Math.round(idealMax / 10) * 10;
options.yAxis.tickPixelInterval = idealMax/10;
Highcharts.chart('container1', options);
chart = $('#container1').highcharts();
chart.yAxis[0].setExtremes(0, idealMax, true, false);
Updated Fiddle
I am confused on how to change the precision of high, open, low, close in candlestick chart in amCharts specially when balloon also comprises text.
This is different from other answers I found on Stack Overflow as they are for valueAxes and categoryAxes balloons but not for data point balloons (with text).
For example:
In this balloon, for eg, if I want to show 3 digits after decimals. Also in some cases I am a facing problem where values are rounded and shown as eg. 12k. But I want real value.
If you're using the built-in short tags (i.e. [open] [high], [value], etc), you can set a precision inside your graph object or at the chart level to the desired number of decimals:
AmCharts.makeChart("...", {
precision: 3, //affects everything
// ...
graphs: [{
// ...
precision: 3, //affects just this graph
},
// repeat as needed
],
// ...
});
Stock charts need this set in the panel or in panelsSettings
If you're accessing your values by name instead of through the built-in tags, you'll need to use the balloonFunction to format your data. There's an example in the knowledge base that illustrates this here.
I am using dojo Chart2D to plot a graph having milliseconds values along the X axis. To display the minor tick values I want to convert the milliseconds value to hh:mm:ss:msec format. I can do it easily overriding tickFormat() method in D3. But I am stuck here with Chart2D.
While adding the axis to the chart, we can use the attribute "labelFunc" which should be function taking 3 arguments:
1) text is the already pre-formatted text. Pre-formatting is done using dojo/number is available, Date.toFixed otherwise.
2) value is the raw axis value.
3) precision is the requested precision to be applied.
and returns the label. eg:
chart.addAxis("x", {
...,
labelFunc: function(text, value, precision) {
return "axisLabel";
}
});