How do I change the size of the symbols in the legend? Right now they look like this:
I would like them to be squares approximately the same size as the titles. After looking at the docs, I thought changing symbolHeight, symbolRadius and symbolWidth would do the trick, but it doesn't. In fact these parameters don't change anything at all, as far as I can see.
No working demo provided using official spline-plot-bands demo
You can use css to achieve the requirement
.highcharts-legend-item path{
stroke-width:10
}
fiddle demo
If you are using line series, you need change its legend symbol to column series legend symbol. Then you can use symbolHeight, symbolWidth and symbolRadius properties.
API Reference:
http://api.highcharts.com/highcharts/legend.symbolHeight
http://api.highcharts.com/highcharts/legend.symbolWidth
http://api.highcharts.com/highcharts/legend.symbolRadius
Example:
http://jsfiddle.net/x2vk088m/
Just use symbolHeight, symbolWidth in your config...
Something like this:
////////
legend: {
align: 'left',
rtl: false,
verticalAlign: 'top',
useHTML: true,
itemStyle: {
'cursor': 'default',
'font-weight': 'normal'
},
symbolWidth: 10, <<<<<//HERE
symbolHeight: 2, <<<<<//HERE
symbolRadius: 0, //creating square legend,
labelFormatter: function() {
return this.name;
}
},
/////
Related
Hi I am using Highcharts. In one of the chart I have too many legends so there is an overflow. In this scenario Highcharts is rightly adding pagination arrow as shown in attached pic. My question is how can I control number of legends per page. I need only 4 legends per page when pagination occurs. I could not find anything in highcharts doc. Please help. [
There is no API option to set the number of series showing at the legend.navigation but you can control it using legend properties, such as itemWidth, maxHeight and other options for styling legend. You can also use responsive.rules for more precise settings.
Example config:
legend: {
align: 'center',
itemMarginTop: 1,
useHTML: true
},
responsive: {
rules: [{
condition: {
maxWidth: 500,
},
chartOptions: {
legend: {
width: 250,
itemWidth: 125,
maxHeight: 60
},
}
}
]
},
Demo:
https://jsfiddle.net/BlackLabel/j6gn1uto/
API Reference:
https://api.highcharts.com/highcharts/legend
https://api.highcharts.com/highcharts/responsive.rules
I'm working on a chart using echarts library with antd and react and I have to follow a specific tooltip design as below :
what I could do is :
tooltip implementation :
const chartOptions = {
tooltip: {
trigger: 'item',
responsive: true,
position: 'top',
formatter: '{c}',
backgroundColor: '#fafcfe',
borderColor: '#c8e2f7',
borderWidth: '0.8',
textStyle: {
color: '#5d6f80'
}
},
xAxis: {
data: xdata,
},
yAxis: {
type: 'value',
position: 'right',
},
series: [{
data: data1,
type: 'line',
name: 'data1',
},
{
data: data2,
type: 'line',
name: 'data2',
} ]
}
is there any way to add the down arrow and the link ( baby blue line between the tooltip and symbol)
css solution is acceptable but I'm beginner in css and frontend development in general
any suggestion would be helpful,
thank you
To add that vertical axis line, you can simply change to trigger: 'axis'. Beware that position: 'top' does not work with this option, so you would have to change it to something like this:
position: function (point) {
return [point[0], '20%'];
// if u wanna center it to the line, then u could do something like
// [point[0] - width_of_tooltip / 2, '20%']
}, ...
Regarding the down arrow, I see two options:
Change the formatter option to a function:
formatter: function (params) {
return `<div class="tooltip">${params[0]}</div>`;
}, ...
and then you can create the arrow with css, assigned to that tooltip class (see the example under Tooltip Arrows here: https://www.w3schools.com/css/css_tooltip.asp).
Other option, would be to manually add a background image of a tooltip arrow and assign it through the extraCssText option, like this:
tooltip: {
trigger: 'axis',
extraCssText: "background-image: url(https://f0.pngfuel.com/png/287/216/white-box-illustration-png-clip-art.png);background-size:cover;min-height:100px;",
...
}
there you can add more css options to make it look like you want (I just chose a random bubble text box).
I'd personally like the first option better. Good luck!
I've built a Highmaps map where states are colored according to their ranking. I set that up like this:
colorAxis: {
min: 0,
maxColor: 'blue',
dataClasses: [{
from:0,
to: 3.000,
color:'#6497b1'
}, {
from: 3.001,
to: 4.500,
color:'#005b96'
}, {
from: 4.510,
to: 7.000,
color:'#03396c'
}, {
from: 7.001,
to: 10.000,
color:'#011f4b'
}]
},
legend: {
title: {
text: 'Desarrollo democratico',
style: {
color: ( // theme
Highcharts.defaultOptions &&
Highcharts.defaultOptions.legend &&
Highcharts.defaultOptions.legend.title &&
Highcharts.defaultOptions.legend.title.style &&
Highcharts.defaultOptions.legend.title.style.color
) || 'black'
}
},
align: 'left',
verticalAlign: 'bottom',
floating: true,
layout: 'vertical',
valueDecimals: 3,
symbolRadius: 5,
symbolHeight: 14
},
It works as expected. However, I would like to disable the default behavior in which when you click on a legend category it hides the corresponding states from the map. Generally, this can be accomplished by adding legendItemClick to plotOptions and setting it to return false, as follows:
plotOptions: { //For point links
series: {
events: {
legendItemClick: function (e) {
return false;
}
}
},
However, after several hours of researching its evident that there is a known HighCharts bug that prevents legendItemClick from working when there are dataClasses in the colorAxis object: https://github.com/highcharts/highcharts/issues/9246
There's a workaround in the forum at the previous link, but I haven't had any luck getting it to work. Does anyone out there have a solution for this?
Here's a JSFiddle illustrating the problem: https://jsfiddle.net/sstoker/3cdaqkyx/
As an alternative, if anyone knows how to make legendItemClick highlight the corresponding states rather than hiding them, that would work as well. Many thanks in advance!
To prevent hiding the states, you can overwrite the setItemEvents method:
(function(H) {
H.Legend.prototype.setItemEvents = null;
})(Highcharts)
Live demo: https://jsfiddle.net/BlackLabel/usaveL4w/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I'm using highcarts to add a label to the centre of my pie chart. I'm using the labels config options but I want to add a label to the beginning of it as such:
I've tried multiple things, including the labelFormatter but nothing seem to work. Currently my code stands as:
labels: {
items: [{
useHTML: true, // Using HTML for label
//html: "Transactions",
html: '<img src="https://github.com/tobi-ajala/shell-exercise/blob/master/icons/card.png?raw=true"/>' + "Transactions", // Doesn't work!
style: {
fontFamily: 'Arial,Roboto,Helvetica,sans-serif',
fontWeight: 'bold',
fontSize: 14,
verticalAlign: 'middle',
top: 140,
left: 460
}
}]
},
Please see the JS Fiddle here: http://jsfiddle.net/tobitobetoby/1fqvzpdn/22/
labels.items doesn't seem to support images.
You can use renderer to create the label with the exact inner HTML that you pass as an argument. Notice that useHTML option (7th argument) is enabled. Then you can style it via CSS.
this.renderer.label("<div class='transactions'>
<img src='https://github.com/tobi-ajala/shell-exercise/blob/master/icons/card.png?raw=true'/>
Transactions</div>", 120, 125, null, null, null, true).add();
Demo: http://jsfiddle.net/kkulig/p4nnxjq1/
API reference: http://api.highcharts.com/highcharts/Renderer.label
I have a single series column graph with x-axis as datetime and y-axis as some constant value. I would like to show the columns in different colors based on some information I have , is this possible ?
e.g. I have dynamic data coming in to plot my graph,I use series.addPoint({x:x,y:value,extra:info}, false, false) to plot the same. Based on the info, how can I vary the colors?
I am pretty new to javascript and highcharts. So pardon my limited knowledge, any help in the right direction would be appreciated.
Updated code:
if(type=='a')
color='#7cb5ec';
else
if(type=='b')
color='#f45b5b';
else
if(type=='c')
color='#8085e9';
else
if(type=='d')
color='#2b908f';
else
color='#e4d354';
series.addPoint({x:x,y:value,extra:info,marker:{fillColor:color}}, false, false);
I have also set the colorByPoint: true option. The series.addPoint function runs in a loop which runs as and when I get my data.
Try out the following
plotOptions: {
column: {
colorByPoint: true
}
},
colors: [
'#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'
],
Fiddle link :)
Update 1:
Dynamic series fiddle:)
Update 2:
Use the following code to have specific color for specific bar
chart.series[0].addPoint({y: Math.random() * 100, color:'#659355'}, true, true);
You also can put colorByPoint: true in series option.
This way I do in my project, share for whom concern.
plotOptions: {
series: {
pointWidth: 30,
colorByPoint: true,
dataLabels: {
format: '{point.y:.0f}억원',
enabled: true,
align: 'right',
color: '#FFFFFF',
x: -5,
y: 3,
style: {
fontSize: "16px",
color: '#fff',
fontWeight: '500',
}
}
}
},
colors: Array(3).fill().map(()=>`#${Math.floor(Math.random()*16777215).toString(16)}`)