Highcharts: show series on legend but hide on chart - javascript

Is there a way in highcharts where we can hide a series from the chart, but still display it on the legend?
Alternatively, can we add an imaginary/pseudo legend item but not really existing in the chart?
For context: the client asked us to color the bars depending on their category (the first 10 bars should be the default color dark blue, the next 2 bars would be colored blue, the last 3 bars light blue). Now they're requesting we put 3 legend items: Group A (for the first 10 bars), Group B (for the next 2), Group C (for the last 3). Group B and C do not need to be clickable as they are imaginary legends.

You can set up any number of dummy series, with no data, which will set up an entry in the legend.
To make sure the dummy series do not take up any space in the plot area, you can set grouping: false in the plotOptions.
Code:
plotOptions: {
series: {
grouping: false,
events: {
legendItemClick: function() {
return false;
}
}
}
}
The legendItemClick event returning false stops the legend from showing/hiding the series. You could get much more elaborate with the function if you wanted different behavior.
Of course, if you wanted the full behavior of the legend, you can build the chart with three actual series, rather than using two dummy series, and just supply the data as [x,y] pairs.
Fiddle:
http://jsfiddle.net/jlbriggs/3d3fuhbb/167/
Output:

You can links legend in group by linkedTo attribute in series, refer below code.
http://jsfiddle.net/jlbriggs/6gw5P/2/

Related

Can I change series array completely in highcharts

I have a requirement where I need to change series array completely in the chart,
I have 2 legends in my chart, I wish to load a chart with one disabled legend, that's working fine,
now when the user clicks on the disabled legend corresponding data should be added automatically to the chart,
I tried same with chart.series.addSeries(), but that is giving different issues, as the new data which is to be added is not only after the first legend but it's in between those legends
chart
For eg: chart loads, with just grey legends, orange is hidden or is not added at all, on clicking on the orange colour legend I want to add this data to that chart, Please check the chart in the image
is there any way to replace series array completely.
Something like
chart.update({
series:newSeriesArray
});
I am using the bar chart from highchart.
Thanks in advance.
I have 2 legends in my chart
Do you have a separate legend for each series or do you mean legend item for each series?
Highcharts provide a possibility to set data to particular series - series.setData() method. So when a chart is initialized you can create empty series (series with name, color etc but without data array) with property visible: false, then your series will be hidden and legend item disabled:
{
name: 'Year 2016',
data: [],
visible: false
}
When user clicks legend item plotOptions.series.events.legendItemClick function will be invoked (if defined). In this function, you can set data to this particular series using series.setData() as mentioned above:
plotOptions: {
bar: {
events: {
legendItemClick: function() {
if (!this.data.length) {
this.setData([665, 234, 2344, 123, 23])
}
}
}
}
}
Demo:
https://jsfiddle.net/wchmiel/uLfcknsb/

Custom gridLines and Axes Chartjs

I am trying to design a CDF Chart using chartjs to show probabilities in a graph. Basically, I will always have 100 points starting at 0 to some max number which I calculate beforehand and I want to generate the charts as I attached. Smooth and not many gridLines. I tried using chart type "line", yet it is far off.
Could you please help me out to configure the chart correctly.
Examples of what I am looking for:
This is a solution without autoSkip, using gridline colour options to hide unwanted x axis gridlines. (sorry about my British spelling of 'colour'!)
I can't use autoSkip since my time/x axis labels show new Year, Month, Date only once and I couldn't work out how to not skip the particular labels which indicate a new month, for instance. I finally found that you can define gridline colours in an array, so my solution is to create a gridline colour array, setting the chart background colour to the gridlines I want to hide. In my case, I already send a list of labels with empty values for when I don't want a label and gridline, just a datapoint.
var labels = data3json['labels'].split(',');
//set gridline colour to background when label is empty:
var xaxis_gridline_colours = [];
for (var i = 0; i < labels.length; i++) {
if (labels[i].length > 0) {
if (i == 0) {
xaxis_gridline_colours.push("#cccccc"); //x and y axis!
} else {
xaxis_gridline_colours.push("#dddddd"); //visible gridline
}
} else {
xaxis_gridline_colours.push("#ffffff"); //invisible gridline
//or call a chart background colour variable like:
//xaxis_gridline_colours.push(chart_bkg_colour);
}
}
Later in the code:
chart = new Chart(ctx24, {
options: {
scales: {
xAxes: [{
gridLines: {
display: true, //default true
color: xaxis_gridline_colours,
etc
First about the gridLines, you can in your chart options change the stepSize of your xAxes (put it to 10 for instance) so you will have 10 times less vertical grid Lines (since your xAxes stepSize seems to be 1 by default).
If the big points are bothering you, when you create your datasets you can change their pointRadius to 0; this way no points displayed just a smoothline.
Finally you can change the color of the line of each dataset by setting the property borderColor.
Take a look at this page for more customization : http://www.chartjs.org/docs/latest/charts/line.html
Hope this helps.
I have noticed that most of you add the line styles only via code. I just spend 1h looking for the settings, as I change it once, but then I couldn't change it again.
How to do it. Post on Stackoverflow pointed me in the right direction.
Charts grid lines style
Line: this.chart1.ChartAreas[0].AxisX.LineDashStyle.Dot
Go to Properties->Chart->Chart Areas and click on 3 dots (...) next collection.
Properties
In Collection, go to Axes and again click on 3 dots (...) next collection.
Axes Collection
You will have 2 Axis: X and Y. Select each Axis and go to the required section to change properties. Be careful. They are well hidden, but I tried to highlight all the options. Of course, to perform the custom modification, you will have to code it.
Axis Collection Editor

Highcharts Custom display of tooltips, based on data series values

I could explain better if you can focus on the image attached here:
Can the hover line height be shown only up to the max line height (Please see the image below)
I do not want to show the hover values for first and last week. (I mean on hover of 'week 0', I do not want to show the hover boxes, same as for 'week 7')
Can I set the floor and ceiling for the each series data, Some thing like
series: [{
name: 'CPM',
data: [5,524,4,1,4,1,3,20,3],
color: 'rgb(87, 188, 0)'
//floor: 5,
//ceiling: 524,
},{ ....}
}]
Is there any such floor/min and max/ceil for the each data set.
Such that the other two series data gets visible in the chart. please refer this fiddle
How to show All Data Series Fiddle jsfiddle.net/4vzEt/21/
Could you show jsFiddle what is wrong? It's a little not clear for me.
In tooltip.formatter check this.x and return false when tooltip shouldn't be displayed.
Well, you can set that options, but it won't do anything.
Your image is saying something really different than 2) .. to remove that vertical line, just disable tooltip.crosshairs.
To change order of points, you need to use tooltip.formatter - sort points descending and return formatter string.
References:
tooltip.formatter
tooltip.crosshairs

Highcharts - Series tooltip doesn't work when plotting lines that zigzag on the x axis

I have a highcharts chart that I need to plot but which has lines which can go back on themselves on the X Axis.
e.g. jsfiddle example
My problem isn't that I can't plot it but rather the series tooltips don't display correctly.
If you zoom right in to individual points they seem ok, but not at normal zoom level.
E.g. if you scan your mouse across the series from right to left it doesn't want to show you the tooltip on x Value 1, intead it jumps to the second set of values on x value 2.
I've changed the tooltips to being not shared:
tooltip: {
shared: false,
},
but this has made little difference, apart from now it seems to work when zoomed in, but I suspect this is only because there are only one set of x Axis values visible.
Does anybody know how it is possible to configure Highcharts to allow for series where the x values aren't sorted either ascending or descending as I can't find anything in the documentation.
From the API documentation:
Note that line series and derived types like spline and area, require
data to be sorted by X because it interpolates mouse coordinates for
the tooltip. Column and scatter series, where each point has its own
mouse event, does not require sorting.
So change your series to type: 'scatter' with a lineWidth > 0. Here's an updated fiddle.

Remove serie and replot with new values when toggling series on and off with EnhancedLegendRenderer

Let's say you have a line-graph with the series shown on the picture. When you toggle series on and off with EnhancedLegendRenderer, the serie toggles between hidden and visible. That is how it is supposed to be. The thing is though, that i want the series that remain visible to scale so that the serie with the highest y-value will be on top of the chart, adjusting the values on the y-axis at the same time. The bottom picture shows how it looks when i have toggled the series with the highest values to hidden.
Is there an easy, or an advanced for that matter, way to do this? I have tried to remove the serie totally from the chart, by removing it from the data, and creating a new jqplot. But then it's not visible on the legend anymore either. Also tried different approaches with chart.series[i].show = false; chart.replot(); etc, but with the same results.
There is also an undocumented renderOption that you can use that will do the same:
seriesToggleReplot: { resetAxes: true }
So my legend looks like this:
legend: {
show: true,
renderer: $.jqplot.EnhancedLegendRenderer,
rendererOptions:{
seriesToggleReplot: { resetAxes: true }
},
placement: 'outside'
}
Did not find any real built-in solution for this, so i created my own work-around.
By setting each y-value of the chosen serie from the legend to "0", and then chart.replot(), the chart gets replotted with the remaining series values.
var j = //index of chosen serie.
for(var i = 0;i < chart.series[j].data.length ;i++)
{
chart.series[j].data[i][1] = 0
//1 is the index of the y-value.
}

Categories