I got some problem with highcharts.
Try to transform the highcharts series or series group on correct.
ch1
Bottom "grid" cut my spline and I dont know why. Try to formate like this:
ch2
It is because of the plot area which is limited by the axes. You should set yAxis min to be a little lower than the cut point and set yAxis.startOnTick to false.
yAxis: {
lineWidth: 2,
startOnTick: false,
min: -2,
example: http://jsfiddle.net/jecp8jac/
Related
I have a categorical polar chart with 5 axes, and each axis has its own min/max range. I would like to configure both the axis labels and to add ticks to each individual axis.
The axis labels are drawn on the axis line itself, but I'd prefer them to be drawn slightly away from the line
There are no ticks on each axis, and I would like short ticks drawn on each axis line.
I've tried tinkering without success with the gridLine* and tick* y axis properties. Nothing seems to visually change when I do this, so I am guessing I'm barking up the wrong tree. Can I get tickmarks and better label positioning?
Here's a fiddle for this: https://jsfiddle.net/cfarmerga/cgrk96yh/
Use chart.parallelAxes.labels option to set x and y axis labels positions.
Example code:
chart: {
polar: true,
parallelCoordinates: true,
parallelAxes: {
gridLineWidth: 0,
labels: {
y: 25,
}
},
}
API Reference:
https://api.highcharts.com/highcharts/chart.parallelAxes.labels
There is no possibility to set ticks for the polar chart from the API options. You will need to draw them using Highcharts.SVGRenderer. Check the similar thread at Highcharts forum: https://www.highcharts.com/forum/viewtopic.php?f=9&t=45661
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
I need to add graphic annotations in a chart on the date (x) axis, so I added a new series with a constant value of 0 (x: date, y: 0), with custom image markers. Annotations look like this:
The problem with this approach is that the constant 0 value in the annotation series is messing around with the automatically placed ticks (on the right), which then stretch the whole Y range from 0 onwards, instead of the min and max of other series, as it is by default. That drastically affects the display of other series, whose value are far away from 0, making them look less diverse.
Highcharts comes with an annotation module, bit I didn't find an option to pin it to the axis and use a different graphic.
Is it possible to either:
a) Prevent the annotation series to influence the Y axis ticks?
b) Make customized annotations on the X axis without adding new constant series?
The easiest solution here I think would be to create a new yAxis, and have your constant series use that yAxis. Like this:
yAxis: [{
...//original yAxis
}, {
visible: false //this hides all axis lines, ticks, and labels
}]
Then in the series, you would set:
series: [{
... //Real data series
}, {
yAxis: 1, //constant series
...
}]
see this jsfiddle: http://jsfiddle.net/k0hrz224/2/
i want the max value of the yaxis to be 100. currently, as you can see, it is 150 and i dont know why, because i explicitly set max: 100 of this yaxis.
i know that changing (on line 101)
min: -25
to
min: 0
seems like a solution. however i need min: -25 because i want to display A and B as it is shown in the example.
Things can get a little odd when you have multiple y axes.
Add this to your chart:
chart: {
alignTicks:false
}
Which will stop the different axes from trying to resolve with each other, and stop your axis at 100.
Example:
http://jsfiddle.net/jlbriggs/k0hrz224/4/
Reference:
http://api.highcharts.com/highcharts#chart.alignTicks
finally i managed to do it. i "hardcoded" the ticks on my own:
tickPositions: [-25, 0, 25, 50, 75,100]
then i experienced the desired behavior, i.e., no wrong autoscaling of any axis.
I am trying to set my X and Y axes to have set minimums, maximums and intervals. Easy enough according to the docs - and indeed I have had no problem working with Highcharts to date - in fact the complete opposite, it's an awesome, awesome tool. However, when I add errors bars to my line series', it seems to knock out the x-axis - http://jsfiddle.net/Su44W/
Simply changing to series' type to arearange (http://jsfiddle.net/46dsn/1), providing the same data points [x, low, high], the chart now respects my min, max and tickInterval on the x-axis. So this begs the question, is this a bug or and I doing something wrong?
From my understanding the errorbar causes the axis to consider itself part of a "column-like chart". That is, the points on the axis have a span. The result of this is that this piece of code is ran to prevent more ticks than there are points (found on line 7194 of the source):
// In column-like charts, don't cramp in more ticks than there are points (#1943)
if (axis.pointRange) {
axis.tickInterval = mathMax(axis.pointRange, axis.tickInterval);
}
I'm not exactly sure how this solves the problem, but in some way setting the pointRange of the errorbar series causes the axis to use that pointRange for the axis as well. I'm guessing it just uses the maximum point range of all series, or something similar. This means your specified tickInterval will be the "max" in the above mathMax-function. Like this:
{
name: 'Series 1 error bars',
data: [
[4,7.26,7.34],
[12,6.85,7.06],
[26,6.92,7.12]
],
linkedTo: ':previous',
color: "#013879",
zIndex: 0,
whiskerLength: 7,
type: 'errorbar',
pointRange: 0
}
Check this JSFiddle link for pointRange in action.
The negative effect that this will have is that the top and bottom line for your errorbars will have very short width. You can counter this by specifying a pointWidth for the series as well, as in this JSFiddle demonstration.
I have a time series chart in Highcharts where I would like users to be able to zoom in on specific date ranges. This is possible by setting zoomType: 'x'. However, once the chart is zoomed, the Y-axis does not rescale to best fit the visible data. For instance, if the original Y-axis runs from 0 to 100, and I zoom on an area with data that only runs 91 to 99, then I probably want the Y-axis to change to be 90 to 100 or something similar. Basically, I want figure out how to get Highcharts to re-run its axis-scaling logic considering only the visible data.
A halfway measure is to set zoomType: 'xy' which allows the user to draw a rectangle and zoom on that rectangle. However, this is inconvenient for the user in this context, as all they really want to be able to do is isolate a date range and then study the variation in the data in that range.
If you want to stick to highchart.js and not using highstock.js (as contrary to what they were suggesting here: http://highslide.com/forum/viewtopic.php?f=9&t=13983), you can do the following with your y axis:
yAxis: {
title: {
text: 'Number of appartements'
},
min: null, // Will for min and max to adjust when you zoom
max: null, //
startOnTick: false,
minTickInterval: 1,
showFirstLabel: false
},
It works just fine for me,
Quentin