Please consider the following fiddle: http://jsfiddle.net/Lmbw75mg/4/
As you can see, there are 3 data points. You are able to hide/show the series by clicking on the corresponding legend item. When you click on dog or bird the chart nicely reacts, and redraws; removing the x-axis label and only displaying 2 columns.
Why doesn't this happen when I click on fish? How can I achieve this effect?
Related
I am developing a series chart of efficiencies (in percentage) over time.
I have specific requirements for the legend:
Clicking on a legend item leaves the series on the chart but fades the line, markers and legend item so that they appear as ‘inactive’
Clicking on an ‘inactive’ legend item undoes the fade, so the line, markers and legend item appear as ‘active’
Add checkboxes for each legend item – deselecting and selecting a checkbox have the same effect as clicking on the associated legend item
Group series by a category header (in the fiddle that is the ‘Chrystalline Si Cells’) – clicking on this header or it’s associated checkbox makes the entire series group ‘active’ or ‘inactive’
All of this is working in a fiddle - https://jsfiddle.net/slaws/0wjpcaqt/138/ - which uses styledMode and a custom legend and dynamically sets the opacity of the chart and custom legend elements:
$('.highcharts-legend-item.highcharts-series-' + value).css('opacity', new_opacity);
$('.highcharts-series.highcharts-series-' + value).css('opacity', new_opacity);
$('.highcharts-markers.highcharts-series-' + value).css('opacity', new_opacity);
However I am struggling with one more key requirement, which is to export the current state of the chart to an image or PDF, with all of series exported with their current 'active' or 'inactive' state. So, if a series is faded, it should be exported as faded to the image or PDF.
Here are screenshots to illustrate:
This is the display of chart in the browser with the Multichrystalline series inactive
This is how that chart is exported to PNG - I want the Multichrystalline series to be exported to look like it did in the browser, with it's line, markers and legend item faded to make it appear ‘inactive’
Any suggestions how I export the chart with it’s styling currently in effect?
PS The legend in the fiddle may start off misaligned, but rerunning it corrects that.
You should not use the CSS to achieve it, but do a series update to keep those changes in the chart config.
events: {
checkboxClick() {
this.update({
opacity: 0.5
})
}
},
Take a look at this approach: https://jsfiddle.net/BlackLabel/b4n0z5k8/
API: https://api.highcharts.com/class-reference/Highcharts.Series#update
I have a stacked bar chart as follows:
I want to draw a horizontal line that goes through all the bars of a specific color on hover. Basically, if I hover on the following purple/mauve color, I want the following:
I looked alot in online as well as the documentation, but couldn't find anything.
Any help is really appreciated; thank you!
In theory you should be able to pre-render 5 line charts in addition to your stacked bar chart. Give each line chart a unique id or class html attribute, and each segment of a specific color needs a corresponding html classname, eg 'chartSegmentPurple' (actually it would be better to name the class based upon what the color represents, eg 'chartSegmentEconomicInequality'). Keep each line chart hidden. Give your chart an event listener for hover, then in the event handler get the classname. Use the classname to make visible the corresponding line chart.
I am rendering a chart using Highcharts.js library
$('#container').highcharts({
title: {
...
I have some checkboxes to select which series to plot. Depending which series I plot the first time, the colors will be different.
How to reproduce
Go to the example: http://jsfiddle.net/1u98o3aq/1/
Select only "Tokyo" checkbox, click plot
Select "New york" checkbox, click plot
Select "Berlin" checkbox, click plot
...
As you can see, it is not using all the colors, all of them are plotted in blue.
You can now unselect everything, plot. Then select everything, plot. The 4 series will remain all with the same color.
However, if you start (Run) the example again, and this time select everything and plot, now it is rendered correctly. Now you can unselect everything and go one by one. The colors are right.
If you select now only the 2nd and the 3rd series, the 2nd and 3rd colors will be used (no blue).
It is like Higcharts is caching for each series a color (which should not) and chosing wrongly (starting from color 0) when adding more series to be shown.
Using custom colors does not solve the problem.
I think that your problem is connected with how you are loading your series to your chart.
Right now, when you are loading the new chart, you are basing into previously drawn series (you are updating the series array).
To avoid the problem you have, you should be able to make copy of your array before you will load it into your chart:
lastSeries = $.extend(true, [], seriesSelection);
Here you can see an example how it can work: http://jsfiddle.net/1u98o3aq/3/
I'm looking for an answer similar to a previous question:
Link: chart js tooltip how to control the data that show
But I need a solution for a Line Chart via Chart.js. I'm wanting a line chart with multiple lines and I would like each point to return only the data for that point in the tooltip. By default the tooltip returns data in a group for each point at the index you hover over. So I would want each point to only return it's data and have it's own tooltip box.
See default example of line chart : http://www.chartjs.org/docs/#line-chart
It would also be nice if I could have all the tooltips displayed by default and not triggered by a mouse hover.
I have plotted chart bars as Stacked, but overlapped one on another. but only last two series need to overlap, not first one. First series(additional income) need to be plot as same as 'stacked : "normal"' do.
Here is the jsfiddle to explain my experiment with highchart.
Is there any option for Series object to achieve that?
Thanks
Peter
You should disable gruping or set pointWidth http://api.highcharts.com/highcharts#plotOptions.column.pointWidth