I'm trying to show only a certain amount of yAxis Lines in my Apache ECharts Chart.
I tried the following:
yAxis: [
{
type: 'value',
min:0,
max:6000
}
],
yAxis: [
{
type: 'value',
scale:true,
splitNumber:4,
}
],
I need to dislpay it like this:
For your information: I need this to work on every Chart-Type, Line Chart, Bar Chart etc.
Thanks in advance :)
So, as I have not got any answer. I wanted to share with anyone who might need it in the future, how I solved it.
I looked and got the highest number of the data for the current Chart and looked if it is near 1000 I rounded it up to 1000, if it is over 1000 I rounded it up to the nearest 200.
For example a number 1059 becomes => 1200 or the number 1215 becomes 1400.
Than simply get this Number and divide it by 4(to have 4 Lines).
And give this number to the yAxis max. For the min set 0.
Related
I created a range using offset and setting the format for the range
I did that using below code
a1_range = Sheet1.getRange("D43");
var a4_range = a1_range.offset(0,6);
a4_range = a4_range.offset(0,1,15,6);
a4_range.setBackground("#e6e6e6").setBorder(true, true, true, true, true, true);
a4_range.setNumberFormat("$#");
The setNumberFormat is setting is write as I want , but the problem is when user enters the data, it is rounding up the value as shown in the picture.
However, to not round the values, I did this
a4_range.setNumberFormat("$#, ##0.000000");
This works but has extra trailing zeroes which I do not want as below,
What I want is when user comes and enters 56.768 in that range, the value should be exactly $56.768 and NOT 56.768000 and NOT have it round off to any decimal places.
Similarly, if the user enters 34.3 then it should be $34.3 and if user enters 8.98945 it should be $8.98945
How do I achieve this?
Try this:
a4_range.setNumberFormat("$0.#######");
issue that i am facing is, i have my bar graph made using react-chart-js. i want to remove space between the bar and center align the bar's . The bar's should have Thickness equal to 50
I try using dummy data ,that way i got the desired output but that is not the correct way of doing . Also I try using barPercentage , categoryPercentage option but didnt get the desired output
Link for CodeSandbox
I don't know if this actually works out of the box. There is nothing in the documentation about this use case either.
You could do it with ghost values to extend the chart in general.
This is not really a solution, but it may be an option.
const labels = ["","","January", "February", "March","",""];
export const data = {
labels,
datasets: [
{
label: "Dataset 1",
data: labels.map((elem, index) => {
if (index > 1 && index < 5)
return faker.datatype.number({ min: 0, max: 1000 })
}),
backgroundColor: "rgba(255, 99, 132, 0.5)",
barThickness: 50
}
]
};
I have a simple time-series in highchart:
series: [{
"data": [[Date.UTC(2021,0,1), 22312], // January
[Date.UTC(2021,1,1), 12312], // Feburary
[Date.UTC(2021,2,1), 23322], // ... etc.
],
Now I want to zoom into one month, and show just one column with the given code:
rangeSelector: {
buttons: [{
text: '1m',
type: 'month',
count: 1, // This should show only 1 month, but it shows 2.
// If this is changed to "0", one month will be show, but
// The css "highcharts-button-pressed" is disabled, and you cannot
// see that "1m" was clicked.
},
According to documentation "rangeSelector.buttons.count" should span over an area of one month if type is "month" and count is "1". But what I´m getting here is a span over two months.
Here is an example:
https://jsfiddle.net/ds90vf5r/1/
Question 1: Why is higchart showing two columns instead of one when choosing/clicking on just 1-month (1m)?
Question 2: How can I zoom into the current date and show just one moth (or one column)?
I am setting up range slider in my angular project. The all values for range slider is coming from api.Api response for slider is looking like this.
[{
toolValue: { defaultvalue: 120,
min: 30,
max: 120,
step: 30 }
}]
I am setting up these values in range slider and the slider is working but when step value is 30 or any other then the slider is not going to max position, instead of it is setting up at position 90. But when the steps are 0.1, that time slider is set to max position . I don't know what wrong with steps.
Html code:
<input type="range" class="slider" [value]="item.toolValue.defaultvalue" [min]="item.toolValue.min" [max]="item.toolValue.max" [step]="item.toolValue.step" id="rangeslider{{index}}" (mouseup)="onMouseupRangeslider($event.target.value,item,index)">
Please let me know how to
As you can see in the upper image, From API in both slider the default value is coming 100 and 120. In first slider steps are 0.1, so that it's going to max position but in the second slider, steps are 30 so that the slider is not going to max position, instead of it is stopped at 90. Please help me with this issue. Thank you
The api response for slider values are as per below.
[{
cols: 12
id: "dvetool0"
rows: 3
toolValue: {defaultvalue: 100, max: 100, min: 0, step: 0.1}
type: "rangeslider"
x: 0
y: 0 },
{
cols: 11
id: "dvetool1"
rows: 3
toolValue: {defaultvalue: 120, max: 120, min: 30, step: 30}
type: "rangeslider"
x: 0
y: 4 }]
Updated Answer:
To follow up after your clarification, I think your problem is the use of the [value] DOM property here. Instead, try tracking the value with ngModel instead.
Replace [value]="default" with [(ngModel)]="inputValue" and create the inputValue variable in your component.ts
Here's a working stackblitz as an example: https://stackblitz.com/edit/angular-szdxyn
By the way, the reason you were seeing 90 is because the browser calculates a a default value using rangeElem.min + (rangeElem.max - rangeElem.min)/2. See the MDN page: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#Value
I've a Higstock lineal graph. Sometimes I need to show just one serie, other times I need two or three series to draw.
Obviously, this is an example of adding series dynamically. I put:
$(function() {
var chart = new Highcharts.StockChart({
// ...
series: []
// ...
})
chart.addSeries({name : "Value1",data : value1Data});
chart.addSeries({name : "Value2",data : value2Data});
chart.addSeries({name : "Value3",data : value3Data});
But not working, the chart needs to have at least one serie with data values in "series" node, not allowing an empty series node, like I put before.
I need to add all my series dynamically.
Anyone can help me? Thanks.
Example: http://jsfiddle.net/8aP69/1/
FYI: The graph only draws the navigation bar.
After many little test, a man that I loved him give me the solution.
I need to set initial series node like that:
series: [{ name: "Serie1", data : [null]}] // first serie has to be null
And after that, adding data point for first serie.
chart.series[0].setData(data1); // adding his data here