How can I position my custom label at the VERY TOP LEFT of the chart?
I tried doing this:
labels: {
items: [{
html: 'Testing Custom Label',
style: {
left: '0px',
top: '0px',
color: 'red'
}
}],
style: {
position: 'absolute'
}
}
but it doesn't take the yaxis / title into consideration. Is there a way to do this which will work for ANY chart instead of me hardcoding some negative values for top/left (which will only work for this particular chart) ?
http://jsfiddle.net/itsVicc/xu9nL8cn/
You can use renderer to generate the label instead of doing this via chart constructor options. The label will be positioned using the whole chart (not plot area) as baseline.
chart: {
events: {
load: function() {
this.renderer.label('test label', 0, 0).add();
}
}
},
Live demo: http://jsfiddle.net/kkulig/ns3rh6rx/
API reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
Related
I am storing chart data in localstorage.
Then I add them to the chart.
chart_obj.addAxis({
id: element.yAxis,
lineWidth: 1,
lineColor: '#08F',
offset: 0,
});
chart_obj.addSeries({
type: element.type,
linkedTo: ''+element.linkedTo+'',
yAxis: element.yAxis
});
As a result, my height indicator is on a different indicator.
The thing is that you have to set the height and position manually there.
But, when you add an indicator from the menu of indicators, it is added normally.
Example
How does adding yAxis automatically recalculate the height?
I tried different methods from the API, read the forum - but nowhere found information on how to do it.
To ensure that the series do not scale, you need to do an update on the axes and set their top and height.
chart_obj.yAxis[0].update({
title: {
text: 'updated'
},
height: '50%',
top: '50%'
})
chart_obj.addSeries({
type: 'ao',
yAxis: 1,
greaterBarColor: '#00cc66',
lowerBarColor: '#FF5E5E',
linkedTo: 'AAPL',
showInLegend: true
});
chart_obj.yAxis[1].update({
title: {
text: 'updated'
},
height: '50%',
top: '0%'
})
},
DEMO: https://jsfiddle.net/BlackLabel/u3s2cjyv/
Im currently developing a Pie Chart with ChartJS (3.9.1) and react-chartjs-2 wrapper,
my chart is using full-width.
I want my chart to stick to the left side, to be able to show more than 12 options. How can I stick the Pie Chart to the left? I've tried using padding:0 already (ref. config).
My options config for the Pie Chart is:
const optionsPie = {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
left: 0,
right: 0,
},
},
plugins: {
legend: {
position: 'right' as const,
},
},
};
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 have the high-chart with label as shown below
how to display the chart from the top left corner
i have tried doing it as below
{
legend: {
itemStyle: {
fontSize:'8px'
},
align: 'right',
layout: 'vertical',
verticalAlign: 'top',
x: this.state.legendXValue ? this.state.legendXValue : 10,
y: this.state.legendYValue ? this.state.legendYValue : 30,
backgroundColor: 'rgba(255,255,255,0.2)'
}
}
but chart is not aligning to the top left
please let know how to configure chart parts to render it from the top left i mean there is lot of space in the top left how to remove it and utilize it for the chart
You can position the pie chart according to your requirements by using center property:
series: [{
center: ['30%', '40%'],
size: '80%',
...
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4812/
API Reference:
https://api.highcharts.com/highcharts/series.pie.center
https://api.highcharts.com/highcharts/series.pie.size
I have created variable pie chart using highchart. In legend section I need to show one name and one value. so I put value in span tag. Now I can't align the value. The external styles are not working. Once we inspect that span tag, automatically generate dx="0". When we edit that value in console it's working. But when we give it to internal style or external style, it's not working.
I need alternate style attribute of "dx". The above image dx value is automatically generated.
data: [
{
name: 'Name Score '+'<span class="score-percentage" >99% </span>',
y: 100,
z: 99
}
]
This is what I did in code. Using span class "score-percentage" to fill color black.
To have more flexibility, you can use Highcharts.SVGRenderer to add the values, for example in this way:
chart: {
type: 'variablepie',
events: {
render: function() {
var legend = this.legend,
legendItems = this.legend.allItems;
legendItems.forEach(function(item, i) {
if (!legend.customLabels) {
this.renderer.text(
legendValues[i],
110,
item.itemHeight
).attr({
}).add(item.legendGroup)
}
item.legendItem.css({
color: item.color
})
}, this);
legend.customLabels = true;
}
}
},
legend: {
align: 'left',
squareSymbol: false,
padding: 0,
symbolWidth: 0,
layout: 'vertical'
},
Live demo: http://jsfiddle.net/BlackLabel/nsdv659x/
API: https://api.highcharts.com/highcharts/chart.events.render