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'
}
Related
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 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
Problem: The chart legend covers top of the chart.
What I have done: I read the docs for chart js but cannot find a property to lift the legend up over the chart itself. Also, changing the size of the chart (canvas) does not work as it changes the whole thing altogether.
Semi-solutions: I understand there is an option to put the legend in the bottom and left and right, but I would like to keep it on top.
Any ideas how to change it, please?
var myChart = new Chart(ctx, {
type: "line",
data: chartData,
options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: "some data",
fontColor: "#999",
fontStyle: "300",
fontSize: 12,
fontFamily: '"Poppins", sans-serif'
},
legend: {
padding: 20
},
tooltips: {
mode: "index",
intersect: true
}
}
});
Edit: It is a known bug that appeared in version 2.7 and till now March 2017 has not got a solution. One thing to help it is to use not 10th increments in data. (The bug is something to do with rounding)
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