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
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 have bar charts with value on top using chartjs-plugin-labels, and some values bumping to each other as image shown below on highlighted values
How do I add background color to the values or is there any other nice solutions?
you can see my code here, please click Show Files and then choose bar-chart.html
https://replit.com/#panjigemilang/html?v=1
you can user plugin option of chart js as per below code.
plugins: {
datalabels: {
color: "#000",
backgroundColor: "#f0f0f0",
font: {
weight: "bold",
size: 12
},
formatter: Math.round,
anchor: "end",
offset: -20,
align: "start"
},
}
}
https://www.npmjs.com/package/chartjs-plugin-datalabels => You can use this plugin
https://www.npmjs.com/package/chartjs-plugin-labels => This is very old plugin
I'm trying to create a graph based on data from database using Chart.js, and I'm running into issues with making multiple labels for the data. One label is the month that the data is a part of, and the second label is the type of visit.
Here's what I have at the moment.
I'm doing this by adding in another label just for this one case:
xAxes: [{
position: 'top',
offset: 1,
ticks: {
fontColor: 'black',
beginAtZero: true,
fontSize: 35,
},
gridLines: {
display: false
},
},
{
labels: ["M SP W/I B", "M SP W/I B"],
position: 'bottom',
offset: 1,
ticks: {
fontColor: 'black',
beginAtZero: true,
fontSize: 35,
},
gridLines: {
display: false
},
}
]
Problem is it's too McGyvery. My plan is to add another Label for the dataset, besides the Month/Year and put the visit types there. This will deal with the problem where there's more or less than two months on the graph.
What I would really like to do is make it so that each bar has the label underneath it (I've already tried with the label on the bar next to the number, and it does not look good). And also I would like to get rid of the empty spaces left by the 0 value bars that would be amazing, which has already been asked.
Here is an example of what I'm trying to get at.
Is there any way to do this with Chart.js?
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;
}
},
/////
I'm loading my highchart data on a node/react single page application and I cant figure out how to center it in the middle of the page. Currently it looks like this:
It's floating to the left and I want to center everything in the orange box in the middle. I've looked throughout the highcharts api doc and can't seem to figure it out. The jsfiddle is here: http://jsfiddle.net/tobitobetoby/1fqvzpdn/36/ (even though it's centered in jsfiddle, it floats to the left on a web/html page)
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
events: {
load: function(event) {
var chart = this,
points = chart.series[0].points,
len = points.length,
total = 0,
i = 0;
for (i = 0; i < len; i++) {
total += points[i].y;
}
chart.setTitle({
text: '<br>€' + total,
verticalAlign: 'middle',
style: {
fontFamily: 'Arial,Roboto,Helvetica,sans-serif',
fontWeight: 'bold',
fontSize: 34
},
});
// Adding 'transaction' label - labels below don't support images/icons
this.renderer.label("<div class='transactions' style='fontSize:20px !important;'><img style='width:25px; height:25px; position:relative; top:7px;' src='https://github.com/tobi-ajala/shell-exercise/blob/master/icons/card.png?raw=true'/>   Transactions</div>", 120, 130, null, null, null, true).add();
// Adding date label
this.renderer.label("<div class='transactions'>11 Sept 2017 - 11 Oct 2017</div>", 95, 225, null, null, null, true).add();
}
}
}
Looking at the complete git repo, the index.css file was not being imported in the index.js file, hence not being able to reference the css commands. The solution is, in the index.js file, add:
import './index.css';
To the top of the code. Then in the index.css file, add:
.highcharts-container {
margin: 0 auto;
}
And this will centre the enter Highcharts div.
Center it in the div tag. Just add align="center" to the div and that should do it. Here is your updated fiddle
add this field in your js function
legend: {
backgroundColor: '#F5F5F5',
layout: 'horizontal',
floating: true,
align: 'center',
verticalAlign: 'top'
}