I want to change the legend Symbol in column chart and make a legend Symbol like spline. I've seen the document => legend.
As I've seen I can change the legend width and some other features like CSS designing but how can I change the symbol?
change to
Please help...
Thanks
I don't believe the Highchart's API offers the ability to customize the legend symbol with a bar chart. You can, however, modify the symbol after the chart is drawn.
chart: {
type: 'column',
events: {
load: function(event) {
// modify the legend symbol from a rect to a line
$('.highcharts-legend-item rect').attr('height', '2').attr('y', '10');
}
}
},
Fiddle here.
Since Highcharts 3.0 you can use linkedTo option. API with the demo.
Remove Legend symbol
chart: {
type: 'column',
events: {
load: function(event) {
// modify the legend symbol from a rect to a line
$('.highcharts-legend-item rect').attr('r', '0');
}
}
},
Related
I am attempting to the css color of my legend for my treemap layout.
In my treemap legend I am only displaying the parent's name and color. I would like to do the same but make the parent's name the same color.
For example: low display in blue text, med-low display in green text; while still displaying the color circle next to it.
i've attempted this by using the legend labelFormatter function but it seems to have no affect on my legend.
here is a code snippet of what I tried:
legend: {
labelFormatter: function () {
return `<span style="color:${this.parent.color};"> <br/> ${this.parent.name}</span>`;
}
},
Here is a jsfiddle link to the chart :
The legend object cannot be nested in the chart object config.
Rendering the as a span needs to set the legend.useHTML to true, which allows rendering the legend label as outstanding HTML element which could be styled in this way.
Demo: https://jsfiddle.net/BlackLabel/dmy9uqbe/
legend: {
useHTML: true,
labelFormatter: function() {
return `<span style="color:${this.color};"> <br/> ${this.name}</span>`;
}
},
API: https://api.highcharts.com/highcharts/legend.useHTML
I want to show some bars' tooltip as default (not all of them) without hovering on them. is there any way to do this?
After chart is loaded, you can use onMouseOver point's method to display a tooltip.
chart: {
events: {
load: function() {
this.series[0].points[3].onMouseOver();
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/dnao0rv6/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#onMouseOver
Would love some help here with highcharts,i have attached an image i want to accomplish 2 things here
First: Is it possible to place the data of the yAxis in this case a day between 2 plotlines and the datalabel in between those 2 lines instead of getting crossed in the middle by it? For example i want the 30th of April under that line and the datalabel above that line as well positioned according to the day
Second: How can i change the color of the numbers to black when the color is that light green, it makes it hard to read.
You can set yAxis.type as category and use formatter to imitate dates.
Use dataLabels.formatter to change a color depending on a point value.
series: [{
...,
dataLabels: {
enabled: true,
formatter: function() {
if (this.color === '#FF00FF') {
return '<span style="color: orange">' + this.y + '</span>';
}
return this.y;
}
}
}],
yAxis: {
type: 'category'
}
Live demo: http://jsfiddle.net/BlackLabel/qxfa9b0c/1/
API Reference:
https://api.highcharts.com/highcharts/yAxis.type
https://api.highcharts.com/highcharts/series.heatmap.dataLabels.formatter
I found a plugin that is able to show current price line on highstock candlestick chart, but it only displays the latest data.
I have tried to find a way to display the horizontal price line when user hovers over the data.
I thought it might be related to tooltip event, but I have no idea how to do it.
Could someone give me a hint? Thanks,
tooltop:{
formatter: function () {
}
},
http://jsfiddle.net/RolandBanguiran/nf7ne/
There is a couple of ways to achieve that. Problem is a little missing description (do you want to display current price on hover, or actually hovered value?).
Anyway, the easiest way would be to enable crosshairs: demo.
Another way is to add/remove plotLine on mouseOver event for series.point, demo and code:
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
chart.yAxis[0].removePlotLine("tooltip-line");
chart.yAxis[0].addPlotLine({
width: 2,
color: "black",
id: "tooltip-line",
value: this.y
});
}
}
}
If you want to hide that line, use mouseOut event and simply remove plotLine like above.
Third option bases on the above one - in case you want to display current price instead of hovered one. In such case, change value for the plotLine, demo and code:
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
chart.yAxis[0].removePlotLine("tooltip-line");
chart.yAxis[0].addPlotLine({
width: 2,
color: "black",
id: "tooltip-line",
value: this.series.yData[this.series.yData.length - 1][0]
});
},
mouseOut: function() {
this.series.yAxis.removePlotLine("tooltip-line");
}
}
}
Extra tip:
Check out more option for plotLines in the API (like dash style, or label).
I have a highstock chart with many series. I placed the legend with series names below the chart. The problem is that I cannot know in advance which is the height of the legend, and sometimes it happens to be soo large that it overwrites the graph above.
Is it possible to adapt the size of the graph to the size of the legend in javascript code? Best solution for me would be to keep fixed the size of the graph and enlarge the height of enclosing element.
edit:
a jsfiddle which resembles my situation: http://jsfiddle.net/KfWDD/1/
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
legend: {
enabled: true,
},
rangeSelector: {
selected: 1
},
series: [{
name: 'ADBE',
data: ADBE
}, {
name: 'MSFT',
data: MSFT
}]
});
I would like to have the legend below the navigator. I can obtain this by fixing some margins and offsets in the elements, but then the layout breaks if the legend becomes too tall.
You can set maxHeight for the legend, and add fixed margin to make some space for that legend.