I'm using http://www.chartjs.org/ to create a simple line graph.
Now I want to show all tooltips. I do not want default on Hover behaviour. I am certain that at any moment I will not have more than 10-12 points on graph. So I want the tooltips to be always open.
If this is not possible with ChartJS, I'm open for opting for other library.
I don't know if this is possible with chartjs (a quick search did not reveal anything) but I think what you want is possible using highcharts. Here you can use the datalabels option:
plotOptions: {
line: {
dataLabels: {
enabled: true
},
Here is a demo. Does that help?
EDIT:
Another possibility for free could be jqPlot. For a demo have look here! There is a pointLabels plugin which places labels on the plot at the data point locations. Should do the trick. :)
var plot1 = $.jqplot('chart1', [line1], {
title: 'Point Labels',
seriesDefaults: {
showMarker:false,
pointLabels: { show:true }
}
});
Cheers and good luck.
If you want to add more multiple static points please use annotations. Tooltips are just tips for a user when hovering instead of static information on different points in the graph.
I suggest using a wrapper on top of chartJS and using their annotation feature https://apexcharts.com/docs/annotations/
Related
I work in angular project and use highchart.
The situation is:
At my chart, I have single series, type area.
I wanted the yAxis grid line to be displayed above my series, so I give it: gridZIndex: 10.
The problem is:
The yAxis is displayed also above the series markers, and I want it to appear only on the series area and line, not on markers.
Any solution?
Please the the demo that I draw:
There is no solution for this case using the regular API options because Z index in SVG is defined by the order the elements appear in the document. You can try to manipulate the DOM, however, this solution might not work well for all cases - like dynamic chart changes, so just keep in mind this is more like a POC then a solid fix.
Demo: https://jsfiddle.net/BlackLabel/8p1smf05/
chart: {
polar: true,
type: 'line',
events: {
load() {
this.seriesGroup.element.insertBefore(
this.yAxis[0].gridGroup.element,
this.series[0].markerGroup.element
)
}
}
},
API to the load event: https://api.highcharts.com/highcharts/chart.events.load
I wanted to enable data labels in the chart I created. However, when I saw the graph all the data labels are not visible/drawn. In this image you cannot see the data labels in all points
However as part of this post, I wanted to give the fiddle with the chart text that is generated for your reference. But when I ran that fiddle it seemed like it was working. I am not sure if I am missing any thing.
Another issue is the tool tip is gone. Can I not have tooltip along with the data labels? Data labels are essential for me since the downloaded images wont have tool tip and datalabels come handy. Tooltips are handly in web application.
Can any one help me in this here?
Here is the code from the jsfiddle I am talking about:
plotOptions: {
spline: {
dataLabels: {
enabled: 'True'
},
enableMouseTracking: false
}
}
The issue is enableMouseTracking: false. Setting this means that HC will not listen to where the mouse is so it doesn't know where to put the tooltip. Turn this back on and tool tips will show.
Also, you have tons of dangling commas on your jsFiddle. Click on JSHint at the top to highlight them. Chrome and FF can sort of ignore them but other browsers like IE will throw errors.
You need to use crop to show all datalabels.
I have 4 charts which contain multiple series. Is it possible to have the rangeSelector() change all charts at once?
Even more desirable would be using the sliding master detail which is enabled like so: $('#container').highcharts('StockChart', { ....
If it's possible could someone point me to references or examples
thanks in advance,
MAS
You can use afterSetExtremes() to catch event form one chart, and use setExtrmes to set range on the others charts. http://api.highcharts.com/highstock#xAxis.events.afterSetExtremes http://api.highcharts.com/highstock#Axis.setExtremes()
I have a line chart with markers disabled.
The legendSymbol is currently a line. I would like to show the symbol as a square. Any pointers?
With the latest Highcharts release you can also exchange the method that draws the legend icon from outside of Highcharts:
Highcharts.seriesTypes.line.prototype.drawLegendSymbol =
Highcharts.seriesTypes.area.prototype.drawLegendSymbol;
To use the element that is drawn for the area chart as an icon for a line graph.
(I have used this in Highcharts Stockcharts but this should be applicable in basic Highcharts as well)
You can use two series (one normal and one fake) with defined custom symbol. First should be hidden in legend. Then only what you need is use legendItemClick and call action.
http://jsfiddle.net/5m9JW/339/
You can change the stroke-width attribute on the path element.
We can provide functions to Highcharts that will be drawn whenever the chart is drawn. Since redraw is not called on the first drawing the load event is needed
chart: {
events: {
load: function () {
$(".highcharts-legend-item path").attr('stroke-width', 10);
},
redraw: function () {
$(".highcharts-legend-item path").attr('stroke-width', 10);
}
}
},
I like this as it's quicker than than the other two answers and adding a "fake series" feels like a hack.
If you need further customization Hendrik's would be great! The original question asked for a square, if all that's really needed is a rectangle (or a large square) this works great.
Also Hendrik's answer didn't work for me out of the box in HighStocks, this does.
I use Highchart to display an inverted graph with multiple series.
an HighStock chart should be better for what I need but I had to use it with the inverted option that is available only in HightChart.
How can I display a comparator line following my cursor on my multiple series chart ?
( like in this example from HighStock )
secondary question : why is it so many differences between highstock and highcharts ?
would be perfect to use the better of those two worlds together.
Ok I've found it.
using the tooltip shared option as:
tooltip: {
shared: true,
crosshairs: true
}
it works great on inverted charts too, the misunderstood was because this setting is enable by default in HighStock graphs.