If you want to understand my requirement , first you have to see this demo highcharts demo
. Now click on Tokyo from that demo chart, that tokyo line will be dissappear. Now I want to able to set that property in page load, I mean whenever the page is loaded, the tokyo link should be clicked and only one line should display, when I click on Tokyo then the tokyo line should display. You can find the source code from that demo itself Thank you in advance.
I think what you are after is a way to make only the clicked legend series show. If that is the case you can do it with the plotOptions.series.events.legendItemClick. To have only one series show up initially on the chart (but still show in the legend) you need to set that series' visible property to true and the others to false. If you want to have all series show on initial load that step can be ignored.
To get the toggle working you need to get the index of the legend item you clicked. You then loop through all the series in your chart to find the one that matches that clicked index. When it matches you set series\[i\].show() for the ones that don't you set series.hide().
Here is the basic toggling code:
series: {
events: {
legendItemClick: function (event) {
var seriesIndex = this.index;
var serie = this.chart.series;
console.log(seriesIndex);
for (i = 0; i < serie.length; i++) {
if (serie[i].index == seriesIndex) {
serie[i].show();
console.log(serie[i].index);
} else {
serie[i].hide();
}
}
return false;
}
}
}
And here is a live fiddle.
When creating chart, just set series.visible = false for series which should be hidden by default.
See docs.
Related
In my project I have I have ten graphs in a table with each graph showing two datasets.
I want to toggle the visibility of each dataset by clicking it which is default behaviour in ChartJS.
All the charts are held in an array and following the built in toggle method of ChartJS, every chart is updated to the dataset of the first chart. So to be clear, when the page loads, each chart is shown correctly, but if I made the dataset invisible and visible again, it becomes visible but with the wrong data.
I tried writing my own update function to toggle the visibility.
var option = {
legend: {
onClick: ToggleDatasetVisibility,
}}
and then
function ToggleDatasetVisibility() {
this.chart.getDatasetMeta(1).hidden = !this.chart.getDatasetMeta(1).hidden;
// this.chart.update();
}
However exactly the same thing happens. After the update,
*Note, I'm only toggling the second dataset of each DatasetMeta so that's why the 1 is hardcoded in this example. That's not the chart in question.
In case it's useful, we is the code when the charts are primed with data when the page loads and here the update shows the correct data.
for (var i = 0; i < 10; i++) {
var MyArray= await fetch("http://localhost:1234/Demo/FetchResults?model_id=" + i);
//Add the recorded tunnel data to dataset 0
LineChartArray[i].data.datasets[0].data = ResultsArray;
LineChartArray[i].data.datasets[0].label = '';
LineChartArray[i].data.datasets[1].data = MyArray;
LineChartArray[i].data.datasets[1].label = 'LabelXYZ';
LineChartArray[i].update(); //This update updates the graph with the correct data.
}
}
So, I don't know if there's a bug with chart JS or a correct determine which chart to update but I discovered that the render method works. This updates the chart following the visibility toggle loads the correct data back in when made visible. I thought it might be my use of the 'this' command but it works fine with the render method.
I just updated the toggle function like so,
function ToggleDatasetVisibility() {
this.chart.getDatasetMeta(1).hidden = !this.chart.getDatasetMeta(1).hidden;
this.chart.render();
}
I have a react highcharts bar chart and a table showing the same data, and I'm trying to display the same selected item in both components. So when a row is highlighted in the table, the corresponding column should change border color.
I've manage to get the table to update from a click event in the chart by setting the state like this
const plotOptions = {
series: {
point: {
events: {
click: e => this.setState({selectedColumn: e.point.x})
}
}
}
}
<HighchartsChart plotOptions={plotOptions}>
...
</HighchartsChart >
but I don't know how to update the chart with the state property.
I've tried looking for selected properties in the in the highchart docs, but I haven't found anything that solves my problem.
You need to and use select method on point which is related to clicked tabble cell. Please take a look at the example below:
handleClick(e) {
let index = Number(e.currentTarget.innerHTML);
this.setState({ index: index });
this.chart.series[0].points[index].select();
}
Live demo: https://codesandbox.io/s/61zx86993
I have the following use case: On a page there is a Highcharts column with drilldown as in this example.
When the labels below the bars are clicked, I would like to drilldown, as default. However, when the bar / column itself is clicked, I do not want to drilldown but rather get information on the clicked bar (e. g. the name of the category). How is this possible?
What I've tried so far is to evaluate the click event with jQuery and then stop drilling down by using "return false;". The problem with that is that I have seen no way to retrieve the column data as the JavaScript object itself is not accessible.
What I did then is to use the "drilldown" event. I can now easily access the objects data / properties but have have two difficulties:
How to identify whether a bar or the label below the bar was clicked?
How can I prevent the drilldown in case a bar was clicked?
Thank you in advance for hints and tips!
Andy
You can wrap doDrilldown method, and there decide what should happen and when, snippet:
(function (H) {
H.wrap(H.Point.prototype, 'doDrilldown', function (p, hold, x) {
var UNDEFINED;
if (x !== UNDEFINED) {
p.call(this, hold, x); // x is defined when clicked on a category
} else {
myFun(this); // call your method after click on a bar
}
});
})(Highcharts)
And live demo: http://jsfiddle.net/L51c8fa4/
i'm trying to add a message when hover a series name and i just cant find the way to do it,
this is what i want want to happen:
when the user hover the "all your locations" series name the red box will apear.
as for now the only way i found to do it is to search div contains the same words but its a really bad practice and im pretty sure there is a better way to do it..
is it possible to do it via highcharts ?
A popup like that is not in the Highchart API for the legend. The closet thing is Legend.ItemOnHover
legend: {
itemHoverStyle: {
color: '#FF0000'
}
}
But that really only styles it.
The way you are currently doing it is probably fine if you are careful about it.
You can try to add tooltip to the legend item, like in the related topic Add tooltip to legend in highcharts when hovering
the only way i have found to do this popup is by adding this function in the end of the function building the chart :
var titles = $("tspan");
$("tspan").each(function(index) {
if( (this.textContent.indexOf("cashiers data") !== -1) ){
$(titles[index]).click(function(){
alert('to use our new cashiers bars \n'
+'please contact us at our contact page');
return false;
})
}
});
I have a scenario where I want to toggle series based on checkbox selection. I have added the checkbox to the legend using labelFormatting in legend option like:
var otherOptions = {
legend: {
container: legend,
labelFormatter: function (label, series) {
var cb = '<input type="checkbox" name="' + label + '" checked="checked" id="id' + label + '"> ' + label;
return cb;
}
},
};
And I have added the click event for the legend so that I can manipulate the series based on checked items. It all works fine except when I uncheck a label in legend, on re-draw it removes that series line from the legend as well. So for ex., below is the before and after image:
Before
After
Notice that in after image "USA" checkbox is missing.
Is there any way I can still show the unchecked "USA" checkbox in legend?
I looked at the suggestion here: flot graph, use legend to turn on/off series
But the only problem is that I don't want to have legend AND checkbox legend separate. The question on the given link was answered 1+ year ago so I thought I am gonna take a chance and ask the question again in case someone knows a way to do this.
Please let me know.
Thanks!
Instead of removing the series all together if the checkbox is unchecked, add it with empty data.
Something like this:
function plotByChoice(doAll)
{
$('#legend .legendCB').each(
function(){
if (this.checked)
{
data.push(datasets[someLabel]);
}
else
{
data.push({label: someLabel, data: []})
}
}
);
// plot call etc...
}
Working fiddle is here.
For anyone looking for a clean solution AND for Chart.js v3 :
This is unfortunately not possible for Chart.js v3 as legends are generated with text (no HTML can be appended to the legend itself, unfortunately).
We have to use generateLabels function to render the legend labels.
I suggest using the pointStyle option to render an image (checkbox, actually), instead of a rectangle by default, so we can rerender automatically everytime the user checks or not the legend (it's dynamic, ofc, and we don't have to do something complicated programmatically).
So, first, generate the 2 images, corresponding to the checkboxes (I'm using FontAwesome icons that I've generated in PNG from SVG files) :
let checkboxYes = new Image(14, 14);
checkboxYes.src = '/static/img/check_yes.png';
let checkboxNo = new Image(14, 14);
checkboxNo.src = '/static/img/check_no.png';
Then, we can use it in the Chart.js options:
legend: {
labels: {
usePointStyle: true,
generateLabels: function(chart) {
labels = Chart.defaults.plugins.legend.labels.generateLabels(chart);
for (var key in labels) {
labels[key].pointStyle = labels[key].hidden ? checkboxNo : checkboxYes
}
return labels;
}
}
},
Explanations
I'm setting usePointStyle to true so that I can customize the point style
later
Chart.defaults.plugins.legend.labels.generateLabels(chart) kind of pre generate the labels for me (and store it into labels), so it's like a function override!
Then for each label, I'm changing its pointStyle to the checkbox image depending on the hidden parameter (if the user checked the box)
Finally, return the labels
It's perhaps not the best solution, but works amazingly well for me:
Click here to see the animated result in GIF :)