Highcharts Line Chart with Only x-axis - javascript

I've recently made the switch to Highcharts, for easy compatibility with IE8, and have been updating past projects because of the simplicity, but I have run into a minor hurdle.
In one project the last SVG element remaining is a single x-axis without any accompanying chart (see below). Is it possible to show only an x-axis in Highcharts without any accompanying series or y-axis? Or if not, is there a way to create this type of design as a DIV?


Yes, you can display just xAxis. Don't add any of series, but set xAxis.min and xAxis.max. Demo: http://jsfiddle.net/m4r1qttL/6/
Now just disable titles, legend etc.


Just add
yAxis: {
...
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
...
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
}
To the axis definition

Related

Grid line view as background in Highchartjs?

In Highchartjs we can have grid lines based on series points. However I'd like to modify that by adding as many grid lines as I prefer.
In other words, I'd like to set this Grid-line as a background for this JsFiddle highchartjs line-graph
From looking at the docs, both the xAxis and yAxis support gridlines
The question really is; Is it possible to do this? If so please shed some light to this matter.

This can be set pretty much as you said:
xAxis: {
minorTickInterval: 0.25,
gridLineWidth: 1
},
yAxis: {
minorTickInterval: 0.25,
gridLineWidth: 1
}
The minorTickInterval governs how many "boxes" you have. Since the tick interval is 1 here, I set the minorTickInterval to 0.25, 1/0.25 = 4. Setting it to 0.2 would give 5 small boxes. Naturally if you change scale on the axes this will change as well.
Working example: http://jsfiddle.net/ewolden/t0bzyywe/1/
API refs: gridLineWidth and minorTickInterval

Using Chart.js, how do I avoid having tooltips overlap?

I am using Chart.js via Angular Char. I have displayed all the tooltips in order to download a chart with the information displayed by creating a plugin.
The tooltips overlap, there doesn't seem to be any logic to distribute them so that they don't. Is there a way to do this?
Some of the plugin code. This isn't important to my question. The 'beforeRender' function creates a new Chart.Tooltip for each item in the dataset and afterDraw renders them:
// turn on tooltips
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
tooltip.initialize();
tooltip.update();
// we don't actually need this since we are not animating tooltips
tooltip.pivot();
tooltip.transition(easing).draw();
The chart:

You can achieve some overlap solution using these snippets:
tooltips: {
mode: 'index',
intersect: false,
yPadding: 2,
xPadding: 2,
caretSize: 0,
borderWidth: 0,
}

Plot line is hiding behind trend in highcharts and movement of plotline is become very hindrance when loaded with very large data sets

Hi all I am using high stock to visualise my data. In that plot line is hiding behind the trend.is there is any way to show the plot line above the trend. and also movement of plot line become hindrance when the chart is loaded with large data sets.
I have attached image for reference. Here plot line is hiding behind the trend.

You should use the zIndex option of plotLines to solve this problem.
yAxis: {
plotLines: [{
color: '#FF0000',
width: 2,
value: 80,
zIndex: 5
}]
}
You can see the live example in this jsFiddle.

Area chart with two data points. Full width

I got problems with an area chart to full the entire width when I have two datapoints. Here's a js-fiddle. http://jsfiddle.net/user1572526/dG2s5/1/
It has something to do with the min and max value on the xAxis.
xAxis: {
categories: ['2013', '2030'],
min: 0.5,
max: 1.5
},
I'm reading the docs but I cant figure out how to use theese when they are applied on the xAxis since I don't have any number values here. http://api.highcharts.com/highcharts#xAxis.min
Any ideas?

That is not related to min/max
Its related point placement with respect to tick
in plotOptions > area you have pointPlacement.
pointPlacement: null //default
pointPlacement: 'on' // on the tick
pointPlacement: 'between' //between the ticks
Updated your fiddle at http://jsfiddle.net/dG2s5/2/
I hope this is what you are looking for.

How replicate the value of Y Axis on both sides of the axis in Highcharts

I need only replicate the value of Y axes on both sides os the axis. Note that my chart DOES NOT have multiple axes.
Look the example: [http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-basic/]
I know it's something simple, but I could not find the solution.
Please guide me. Thanks in advance.

You still need to specify multiple axes, and then you can use the 'linkedTo' and 'opposite' properties:
yAxis: [{
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},{
linkedTo:0,
opposite:true
}],
.
Edit for clarification based on comment below:
Highstock, at the time of this writing, sets the opposite property as true for the yAxis by default.
However, Highstock is not a "version of Highcharts".
Highstock is its own product, originating from and related to Highcharts.
All versions of Highcharts currently set opposite to false both axes by default - yAxis will be on the left, and xAxis will be on the bottom.

Categories

Resources