I'm using Highcharts for a dynamical data, and when I try to display multiple series ( > 10 ), it gives some series with the same color.
For example :
John series: Blue line | Mary series: Blue Line
How can I fix it ? Thanks
You can add more colors as array color array in the parameter.
Related
I am using bubble chart from highcharts. If i hover over a bubble it shows the tooltip information.In that, the "sugar intake" value is appearing with a space in between to represent denominations as 9 500.
Is there a way to change that to 9,500 ?
https://jsfiddle.net/t48xyg9o/1/
Please refer this image
bubblechart
Following the documentation, you can change the thousand separator like this
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
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 looking for solution to add custom text labels on yAxis with highcharts for selected plot only.
I have 3 plot items/legends among which one should have custom string to show on yAxis instead of default values and rest keep showing default label at yAxis.
I know we can use this
yAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
but this is going to show the categories/yAxis label with all plot/legends values, I want to show above categories with specific plot/legends only. Such that if any one click load page, chart show the provided data with default labels but clicking on this plot will show yAxis label provided by me.
I am using spline highchart.
You can find similar example here:
https://www.highcharts.com/demo/spline-plot-bands
The chart on the link mentioned above have 2 bands and its y-axis is showing plot-bands. In my case, I have total of 3 bands (say yellow, black and blue bands) to show among them plot bands is required to show with only 1 band (blue band). So when user click on blue band only then plot bands should appear on the chart.
I have total of 7 charts. Among them 2 of them are not going to have blue band and the whole code is centralised so I am not using separate code for each chart.
Thanks
Already I have created a normal yAxis plotline with label styles.But now I want to create a yAxis plotline with some CSS styles. Any Suggestions?
This is what i have tried so far
This is my code
var chart = $('#tv_chart_container').highcharts();
chart.yAxis[0].removePlotLine('hori_line');
data = chart.series[0].data;
var test = data.length;
var value = data[999].y;
chart.yAxis[0].addPlotLine({
value: value, // Value of where the line will appear
width: 2 ,
color: '#248EC6',
// dashStyle: 'dash',
id: 'hori_line',
label: {
text: value,
align: 'right',
style: {
color: '#FFFFFF',
fontWeight: 'bold',
}
}
});
Here is the sample.What i actually need
I worked up a proof-of-concept that gets pretty close to what you're asking. This is using all code within Highcharts, and not anything dealing with outside CSS.
Plot lines can't possess the data label formatting you're seeking, so I used a scatter plot series to serve as the line instead. Plus, this also gives you the (default) Highcharts animation when you move over a new point in your line graph.
I did a few things here:
I added the scatter plot line as a separate "dummy" series that the user won't see in the legend and won't be able to interact with.
I formatted the data label for the last (second) point of the scatter plot line to show the blue background and white numerals as in your example.
I set a marker on the last (second) point of the scatter plot line with a diamond shape. Together with the data label settings, this gives you the marker example you showed above. Now, there is a shape: 'callout' option for data labels, but the carats only point up or down for this kind of series.
I updated your mouseOver event to update the value of the scatter plot line, rather than adding and removing plot lines.
Here's the proof-of-concept fiddle: http://jsfiddle.net/brightmatrix/tzu3khp1/. You can also see a screenshot of the result below.
I hope all of this information is helpful for you. Please let me know if you have any questions; I'll be glad to update this answer to elaborate.
How can I sort the legends values (40, 80, 10, 5) in descending order?
The first value should be displayed in Green color and then other 3 will be any colors.
I tried with this code to display my first legend item in green color. Any Ideas for sorting the legend item?
{name: '{/literal}{$value.0.opt1}:{$a}{literal}',y: {/literal}{$a}{literal}, color: '#6B8E23'}, //green
{name: '{/literal}{$value.0.opt2}:{$b}{literal}',y: {/literal}{$sort.0}{literal}, color: '#A9A9A9'},
{name: '{/literal}{$value.0.opt3}:{$c}{literal}',y: {/literal}{$sort.1}{literal}, color: '#696969'},
{name: '{/literal}{$value.0.opt4}:{$d}{literal}',y: {/literal}{$sort.2}{literal}, color: '#FFFFFF'}]
P.S. I am not familiar with jQuery.
The only way to sort the legend values quickly is to add your series in the order you want the legend to be in. See this answer. You could try and create a javascript custom legend to do what you want as well - I have no quick answer for how to do that. If what you mean is that you want to order the points in a series in descending order you would first need to provide an example of what your actual data looks like: is it time based? category? linear?
To have the first value in a series be green you can use the point color like this.
i find a solution. you should sort the legend values before pass the values in data. then set the colors in array.