I am using Highcharts to render a line chart (http://www.highcharts.com/demo/line-basic).
Every line in my chart has the same color and different markers on the end. Now what I want is when I hover over a line to change it's color.
you can find mouse events in plotOptions there you can manipulate the colors
this.chart.series[index].update({color:'color'});
this piece of code will be helpful.
here is a working example http://jsfiddle.net/vytEE/
hope this will help you
Related
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 working on adding transition to the line chart, copied a example from herehttp://bl.ocks.org/d3noob/7030f35b72de721622b8, i want the line chart to do transition when the interval happens, like in the example when you click the button the chart will move to left but in my plunkerhttps://plnkr.co/edit/sCJYfXDSjXN1IiFokK1V?p=preview doesn't work, I put the d3 code in angular's custom directive because i have a requirement where graph will be repeated more than 5 times any help is much appreciated
In your update data function, selection of the chart was var svg = d3.select("lineChart").transition();. It should be var svg = d3.select(".lineChart").transition();
I am a newbie to d3js and I am currently plotting some multiple line chart graphs. One thing I want to do is to add a legend for each line. I figured out that I can add some text and I can also give the text some color, which is same as the line's color. However, I would like to add some line representation in front of the text. For example,
Legend in Multi line chart - d3
as we can see here, the legend starts with a colored rectangle + text, and I want it a line (dashed line for example) rather than rectangle in front of the text.
Is there anyone can help me with this? Thanks a lot!
The pink line is what I'd like to add, to emphazise a certain percentage value. Is it possible with jqplot and how would this be achieved?
You should use canvasOverlay for jqplot to draw custom lines or other objects on your graph.
Please follow the link and here you can learn about how to use canvasOverlay.
http://www.jqplot.com/deploy/dist/examples/canvas-overlay.html
I want to change the color of the area chart after it is initially rendered.
In the JSFiddle demo after clicking the button you can see the color has changed when you either mouseover the data point or toggle the display by clicking on the legend to hide and then show again.
In both of these the main area color has not updated but the data points and legend has.
JSFiddle Demo: http://jsfiddle.net/simonweston/tLwy5/
Any help would be greatly appreciated.
You can change it dynamically but you need to manipulate the SVG DOM elements instead of the chart object:
$($('.highcharts-series').children()[0]).attr('fill','blue')
Produces:
I have also tried changing it without luck, the only way is to re-create the chart as seen here