I am trying to get more space between my highcharts plotArea and the xAxis... nothing so far seems to be working. The picture shows how close they are and I am wanting to add about 30 more px to it.
Thank you for the help!!
Assuming I unerstand your question correctly...
Here is a standard xAxis and an altered yAxis from the Highcharts documentation.
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/labels-x/
Now, here is a fork of that fiddle, but with the labels of the xAxis pushed further down.
http://jsfiddle.net/BCPL5/
The relevant Highcharts API documentation:
http://api.highcharts.com/highcharts#xAxis.labels
The alteration to the xAxis is in this statement.
...
xAxis: {
labels: {
y: 25
}
},
...
Now, you could also use offset, as can be seen in the Highcharts example below, but I don't believe that is what you want in this case.
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/yaxis/offset/
You can try to set min/maxPadding http://api.highcharts.com/highstock#yAxis.minPadding
Related
I am wondering how to show labels only on one axis in echarts like this
some other radar chart
If I do:
axisLabel: {
show: true
}
All the labels from all the axis are shown
Or, is it possible to use polar RadialAxis and AngleAxis and show strait lines instead of round ones between axis. Like this:
Not supported.
Radar has only one axis.
see: https://github.com/apache/incubator-echarts/issues/5467#issuecomment-293513560
I made a workaround if someone stumbles on my question.
I added text graphic and placed it on chart. Like this:
I have a Highcharts 5.0.14 line chart in which the x-axis crosshair will not display. The y-axis works.
xAxis: { crosshair: true },
yAxis: { crosshair: true },
Both the x-axis and y-axis documentation show objects so that's what I started with. When the x-axis wasn't working and I started Googling and found a JSFiddle with them as true rather than objects. I tried that and x-axis still does not work.
http://api.highcharts.com/highcharts/xAxis.crosshair
http://api.highcharts.com/highcharts/yAxis.crosshair
The following JSFiddle is linked directly from Highcharts' documentation. It shows crosshair: true for both x and y and it works.
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/xaxis/crosshair-both/
Inspecting the HTML I found a <path> element with class="highcharts-crosshair highcharts-crosshair-category undefined" - the "undefined" class caught my eye.
I appreciate your attention, thank you.
I got this working though I don't understand why the chart configuration resulted in the x-axis crosshair not appearing.
Before wanting to use crosshairs, when I first built the chart I was populating xAxis['categories']. I soon changed some of the chart design and no longer needed 'categories'. While making the changes, rather than delete the code to populate it with the previous data I set it to null.
Long story short, once I removed 'categories' altogether the x-axis crosshair appeared.
Strange considering the documentation at http://api.highcharts.com/highcharts/xAxis.crosshair.color states (for 'color')...
The color of the crosshair. Defaults to... rgba(204,214,235,0.25) for category axes, where the crosshair by default highlights the whole category.
I'm not sure what the last part, "where the crosshair by default...", means. Regardless, crosshairs and categories must work is what the documentation reveals.
while using the older version of highchart - 2.1.6, if a plot had only one value or a series of same values, it would plot at the middle of the screen as below.
But, ever since i have upgraded the version of the highchart to 4.1.5, the line sticks to the bottom, on the xaxis. like this.
I am looking for the option to set it back to normal but, didn't find it yet. Help me out with this please.
I have tried pointPadding on the series and even maxPadding on the yAxis, but no use.
Here is the fiddle where it is replicated -
http://jsfiddle.net/ka4p4sym/2/
var chart = $('#container').highcharts();
I would set yAxis.minRange option, demo. It won't place line exactly in the middle, but will make some extra space on top and bottom.
I have a bar chart that created in dc.js and hosted in jsfiddle. i want to remove x labels of this chart . after searching i find this SF question. but even i set
.xAxis().ticks(0)
it doesn't work and i can see the label.so how can i remove the xAxis labels.
Use the .tickValues() function instead, passing an empty array:
.xAxis().tickValues([]);
Complete demo here.
I need my yAxis categories to be 0 = 'Poor', 0.25 = 'Below Average', 0.75 = 'Average' 1="Good"
I set the categories right, but Highcharts seems to interpret each point I plot to be equal to "1" step on the yAxis. See http://jsfiddle.net/54cFG/
Ideally, that chart should always show 4 labels on the yAxis and the plotted points should line up at "Below Average" and "Average".
Is there a setting I'm missing? I think I pretty much tried everything at http://www.highcharts.com/ref/
You could always use plot bands to display categories on the Y axis. That way you could still keep the actual values. I have demonstrated that with your code here.
EDIT
Here is another example with the grid lines taken off and the plotBands each with their own color. Here is the color chart if you wan to change any of them.
If you prefer to use the plot bands and no y-axis labels, here is an example of that. I think it works just fine. If the user really wants to see the exact value they can hover over the point.