I am using Apexcharts to display a heatmap, which works fine.
However, i'm struggling with positioning the xAxis ticks and labels to align with the beginning of a cell in the heatmap.
Currently the behaviour is as follows:
Each series has 7 values, therefore 7 ticks which are spread equally along the xAxis which causes the offset.
What i want is to have a tick and value at the beginning of each cell in the heatmap (basically for a series with 7 values, 8 ticks along the xAxis) so that the ticks are aligned with the cells like this:
How can this be achieved?
I found a workaround to achieve this for integer x-values, even though I think this is not the optimal solution.
Apparently setting the tickAmount as well as the range property to the length of the series, delivers the desired solution if combined with an incrementation of every x value by 1.
Add this to the chart options:
xaxis: {
axisTicks: {
show: true
},
tickAmount: 7,
range: 7,
labels: {
show: true
}
}
And increase every x value of the series by 1.
Related
I have certain requirement where I need to override the auto calculated values for Y axis in highcharts. For eg.
Here, the gridlines plot area is equally divided into 100. I wanted to override this so that the negative plot area should be at a max of let's say 50 and the positive ones can remain the same. Even if I try the max, min, softMax, softMin, ceiling and floor properties, the result is the same. I was thinking of using a secondary axis but then there is only one data in the series which would render the second one useless. I don't think using setExtremes() will be helpful either. I'm hoping to avoid modifying the library itself to add a certain option but it'll be helpful if such an option already exists in highcharts. Any suggestions?
Use tickPositions or tickPositioner property:
yAxis: {
tickPositions: [-50, 0, 100, 200, 300, 400]
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4883/
API Reference:
https://api.highcharts.com/highcharts/yAxis.tickPositions
https://api.highcharts.com/highcharts/yAxis.tickPositioner
I created a very simple line chart, for use on mobile devices. I find that when I include the scale, it takes up a lot of space on the side of the chart.
Instead, what I've seen accomplished on other mobile charts is only showing the minimum and the maximum value. A user can use the tooltip to find specifics.
Anyway, I'm hoping someone can show me how to create a scale such as the one here:
The two main takeaways of this scale:
Only the min and max values are shown
They are shown with absolute positioning approximately in the top left and bottom right corners.
My thought process was possibly using the scaleOverride, then just defining scaleSteps : 1 with a scaleStepWidth equal to the difference between the min and max of my data. Even if this is on the right track, I don't know how I would override the positioning of the scale to be absolute and not take space away from the line itself.
I've broken this answer down into the steps needed to get your chart to look like the provided image:
1. Only show max and min labels
First, use JavaScript max() and min() methods to determine the highest and lowest values in the data array:
var min = Math.min(...data);
var max = Math.max(...data);
Then, add the following options to the yAxes ticks configuration section:
Set the max and min values to the data array max and min values.
Set stepSize to the difference between the max and min value. This will ensure that it only shows the highest and lowest numbers in the labels.
2. Move labels to inside the right side of the chart
This can be done in two steps:
Add position: "right" to move the align the scale yAxes to the right side of the chart.
Set mirror: true in the ticks configuration to flip the labels over the yAxes, to get them to show inside the chart.
3. Format number with dollar sign and 2 decimal places
To format the numbers with a dollar sign and two decimal places, add a callback function to the ticks options:
callback: function(value) {
return '$' + value.toFixed(2);
}
See How To Format Scale Numbers in Chart.js v2 and Formatting a number with exactly two decimals in JavaScript for more information.
4. Change color or hide the yAxes grid line
Although your question is about changing the color of the grid line, based on the provided image, I am assuming you want to remove the yAxes line. To remove the grid line, set drawBorder to false in the grid line configuration settings.
If you do want to change the grid line color to white, color: "#fff" will work, you just need to make sure that you put that line in the gridLines config section like:
gridLines: {
color: "#fff"
}
5. Change label font formatting
This wasn't in your questions, but if you want to change to label font color and sizing, simply use the fontColor and fontSize tick config options.
Final yAxes code:
yAxes: [{
id: 'share_price',
type: 'linear',
position: "right",
gridLines: {
display: false,
drawBorder: false,
//color: "#fff"
},
ticks: {
stepSize: max - min,
min: min,
max: max,
mirror: true,
fontColor: "#fff",
fontSize: 18,
callback: function(value) {
return '$' + value.toFixed(2);
}
}
}]
JSFiddle Demo: https://jsfiddle.net/ujsg9w8r/5/
I have some temperature data I want to graph using dygraphs in JavaScript.
new Dygraph(document.getElementById("graph"),
chartdata, //js array containing the x and y values in js arrays according to http://dygraphs.com/data.html
{
labels: labels, //x and y label(s) in js array
title: 'Weatherstation',
legend: 'always',
labelsDivStyles: { 'textAlign': 'right' },
showRangeSelector: true,
rangeSelectorHeight: 30,
//valueRange: [-5, 25]
});
The temperatures range from about -1.7°C to about 24°C and the data contains gaps. According to dygraphs' reference the default valueRange (y axis scale) is this:
valueRange
Default: Full range of the input is shown
The resulting graph has a y-axis-range of about -0.7°C to 5°C though.
Apparently I cannot show you a screenshot of the manually ranged version due to my low rep
A workaround is setting valueRange manually, but then the y-axis-range won't dynamically adapt to the x-axis-range selected.
You can see all readings above 0°C in the range selector below the actual graph. I can even see the > 5°C values in the legend when I hover above that x-range and the scale adapts, when I select a small range with only high y values.
Is this a bug or am I doing something wrong?
A possibility to show negative parts of the graph in the rangeselector would be nice, too. So if someone knows a solution for that, please tell me.
I found a similar unanswered bugreport for a R package that generates dygraphs from R data, but they didn't have a solution either:
https://github.com/rstudio/dygraphs/issues/32
I've used AddPoint repeatedly on a scatter Highchart to show some data evolution, using
setinterval()
When the chart updates the axes' ranges as a consequence of the presence of new data points, the chart sometimes "twitches" as the data distribution is not longer well balanced around the origin:
http://jsfiddle.net/dhigger/qfxe87tr/
I would like to keep the redrawing of the axes to accommodate various data distributions, so one solution would be to keep the origin at the centre of the graph at all times, and scale positive and negative of an axis together, and always scale up. But I can't see how to achieve these.
Is there a way to avoid the twitch?
Those "twitches" are coming from Highcharts' native axis auto-scaling. You can fix the xAxis so your chart won't move anymore. For example, I managed to have your JSFiddle working by adding min: -15 for the xAxis:
xAxis: {
plotLines: [{
color: '#FA5858',
width: 1,
value: 0,
zIndex: 2
}],
minRange: 30,
min: -15,
gridLineWidth: 1
}
See the JSFiddle working with not "twitches" here.
After setting the limits of the axes (per #Kabulan0lak's answer), I found that I could monotonically increase both positive and negative axis limits by keep track of the largest-magnitude data values and then re-set the max and min limits of the axes manually using setExtremes (manual).
e.g. chart.xAxis[0].setExtremes(min_x,max_x);
Updated jsfiddle: http://jsfiddle.net/dhigger/qfxe87tr/3/
I'm using Highcharts for a project in which I have to display two series with about a thousand points each. The x-axis represents a date, and the y-axis a quantity. In addition, each point has an associated list of namesMy data is day-by-day without gaps, with a structure such as
var mydata = [ ...
{x: theDate, y: theValue, names: theNames},
... ]
where theNames is an array of strings. I can access these in the tooltip formatter through this.points.point.names, given that the range displayed on the chart is small enough. If I change the x-axes so that the start date and end date are more than roughly a year apart, then the tooltip is not rendered at all.
One of the possible avenues that I have tried but failed with so far is setting the turboThreshold limit to the length of the longest series plus 1. Setting this lets me at least display a graph when mydata.length > 1000 (the default value). However, this only displays the tooltip if the x-axis range is less than 261. Otherwise, the tooltip disappears entirely, as does the point.data object where I'm getting the name from.
I'm also not great at JavaScript, but I was wondering if there were a way to separate the names of the points from the array containing them (in my examples, myData1 and myData2) and somehow access those names from the tooltip function without going through the current point.
Here is the link to the jsFiddle demonstrating this issue.
All help is appreciated!
The problem is in dataGrouping, when disabled works fine: http://jsfiddle.net/34tfg/1/
DataGrouping is method in Highcharts to approximate points and display them when width of the chart is not enough, e.g. how to display 10 000points in a chart of width 1 000px -> 10 points in a one pixel..? And when dataGrouping is used, new points are created, so all your custom options like 'names' etc. are lost (at least not accessible).
Code:
plotOptions: {
line: {
dataGrouping: {
enabled: false
},
turboThreshold: 10000
}
},