I'm using a highstock chart similar to this example - http://jsfiddle.net/93HQn/2/. What I"m trying to add is for the % value in the tooltip to be red if it is a negative value or green if it is positive value. Has anyone done this before?
Thanks,
Linda
You can change the color of any potion of the tooltip based on a value or calculation. I modified your jsfiddle to show how to change the color of the percentage based on if it is positive or negative.
Define a formatter function for your tooltips:
http://api.highcharts.com/highcharts#tooltip.formatter
With that you should be able to take full control of the tooltip contents.
Related
I recently found that there is a built-in option to disable crisp for bar and column charts, which is awesome! However, I noticed that x-axis ticks slightly off (I believe ticks distance gets calculated based on crisp-true). Is there a way to align them properly?
Here are docs https://api.highcharts.com/highcharts/plotOptions.column.crisp
Updated example:
https://jsfiddle.net/bqo9dv5a/
Ideally, I want ticks to be centered for each column.
Thank you!
I found this parameter on documentation (xAxis.offset), maybe it will help achieve what you want.
API Reference: https://api.highcharts.com/highcharts/xAxis.offset
Live Demo: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/yaxis/offset/
find here my doubt: https://jsfiddle.net/rur3wthp/`
Function() for getting the color value from color picker and apply the same to line series dynamically
`
How can I apply the color picker color to the series in the chart.
Thanks in advance I searched all websites I cannot find the clear solution as I m beginner help me out.
Using the series.update() method from highcharts api we can update all the series options. Here we in our case it is color aspect of the series.
you can simply do
chart.series[identifier].update({
color: "#ff0000"
});
Here is a jsfiddle to update 2 different series: https://jsfiddle.net/vh27mcL2/
Here is the api ref for the update method : https://api.highcharts.com/class-reference/Highcharts.Series#update
I am using highcharts library to draw chart and I need to display Weekdays as labels on x-axis and also to auto reset it like from Monday to M if all weekdays can't fit on screen.
It should be dynamic, which means no flickering should appear when changing label text on x-axis.
Any suggestions?
Thanks in advance.
There is no straight option for that, rather simple workaround:
Disable reflow from Highcharts, use window.resize browser event
In that event add condition to decide showing full name of just shortened, and set this for chart - chart.xAxis[0].dateTimeLabelFormats should be fine
After setting new format, apply new chart dimensions using chart.setSize(w, h)
I have a Highstock chart that is populated dynamically. The chart is based on this example. One of the series is "column" series. When I call series.addPoint, the point object contains the color property, which is set to either red or green.
When there are just a few data points, the column colors are red or green, but when there is a lot of data, the colors of all bars switch to blue. Do you know how to prevent the color from switching to blue?
The other issue is the date in the tooltip shows Week of [Date] instead of just stating the Date. Not sure if the root cause of this issue is the same.
Thanks.
Probably it is relted with fact that in Highstock, dataGrouping is enabled, so data is grouped and have "no knowledge" which color should be. So I advice to disable dataGrouping.
http://api.highcharts.com/highstock#plotOptions.series.dataGrouping.enabled
highcharts legend overlapping with the name section of the series.
I have got an url : Issue example.
I want to place the legend text bellow the chart.
Please help.
You need to disable floating parameter or use y parameter (http://api.highcharts.com/highcharts#legend.y) to modify position.