How to set datalabels as vertical in Highcharts - html

I want to create a graph "stacked column" using Highcharts plugin with the data in a XML file. (See here)
My XML file is:
<?xml version="1.0" encoding="utf-8"?>
<chart>
<categories>
<item>2000</item>
<item>2001</item>
<item>2002</item>
.... </categories>
<series>
<name>Impots locaux</name>
<data>
<point>231</point>
<point>232</point>
.... </data>
</series>
<series>
<name>Autres impots et taxes</name>
<data>
<point>24</point>
<point>27</point>
<point>37</point>
.....</data>
</series>
<series>
<name>Dotation globale de fonctionnement</name>
<data>
<point>247</point>
<point>254</point>
....</data>
</series>
</chart>
The HTML coding is:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mazet</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<script type="text/javascript" src="../js/themes/gray.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Produits de fonctionnement du Mazet-Saint-Voy'
},
subtitle: {
text: 'Source : Ministère de l\'économie et des finances'
},
tooltip: {
formatter: function () {
return '' + this.y + ' €/hab. en ' + this.x;
}
},
plotOptions: {
column: {
/* pointPadding: 0.2,
borderWidth: 0,*/
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
xAxis: {
categories: [],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
title: {
text: 'En euros par habitant'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
series: []
};
// Load the data from the XML file
$.get('../xml/43130.xml', function(xml) {
// Split the lines
var $xml = $(xml);
// push categories
$xml.find('categories item').each(function(i, category) {
options.xAxis.categories.push($(category).text());
});
// push series
$xml.find('series').each(function(i, series) {
var seriesOptions = {
name: $(series).find('name').text(),
data: []
};
// push data points
$(series).find('data point').each(function(i, point) {
seriesOptions.data.push(
parseInt($(point).text())
);
});
// add it to the options
options.series.push(seriesOptions);
});
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Where and how code 'dataLabels' to data of my 3 series is vertical?
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
Merci.


You can set rotation to 90. demo
Or you can set useHTML to true and style it using css.
.highcharts-data-labels span {
width: 7px;
white-space: normal !Important;
}
Then your dataLabels formatter should be:
formatter: function() {
return this.y.toString().split('').join(' ');
}
This way you'll get the labels the following way.
9
0
0
demo

Related

Adjust position of a line chart series label using echarts

i have a angular web application with a line graph (using echarts) with multiple series.
the labels of the series are overlapping, is there a way to adjust their position or size etc to prevent them from over lapping ?
my code:
thisInstance._paidUnpaidSplitGraphOptions = {
title: {
text: 'Paid/Unpaid Claims'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['Unpaid Claims', 'Paid Claims']
},
grid: {
left: '5%',
right: '6%',
bottom: '5%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
title: "Download Image of Chart"
},
dataZoom: {
yAxisIndex: false,
title: { "zoom": "Zoom Chart", "back": "Remove Zoom" }
},
brush: {
type: ['lineX', 'clear'],
title: {
"lineX": "LineX", "clear": "Clear" }
}
}
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: xAxisData
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Paid Claims',
type: 'line',
stack: 'WWWWWWWW',
label: {
position: 'TopLeft',
normal: {
show: true,
formatter: function (data) {
return thisInstance.GetFormattedValue(data);
},
color: '#151515'
}
},
areaStyle: { normal: {} },
data: paidAmounts
},
{
name: 'Unpaid Claims',
type: 'line',
stack: 'WWWWWWWW',
label: {
normal: {
show: true,
formatter: function (data) {
return thisInstance.GetFormattedValue(data);
},
position: 'BottomRight',
color: '#151515'
}
},
areaStyle: { normal: {} },
data: unPaidAmounts
}
]
}
html code:
<div class="clr-row">
<div class="clr-col-2">
</div>
<div class="clr-col-8">
<div echarts [options]="this._appService.GraphsService._paidUnpaidSplitGraphOptions" class="demo-chart"></div>
</div>
<div class="clr-col-2">
<button class="btn btn-outline btn-sm" (click)="this._appService.ClaimCaptureService.GetHpCodesLagReport()"><clr-icon shape="download"></clr-icon>LAG REPORT</button><br />
<button class="btn btn-success-outline btn-sm" (click)="this._appService.ClaimCaptureService.GetHpCodesAgeReport()"><clr-icon shape="download"></clr-icon>AGE ANALYSIS REPORT</button>
</div>
</div>
What i have tried so far is to change the position of the labels as you can see in the above code t making the one 'TopLeft' and the other 'BottomRight', but this didn't seem to help at all the labels are still overlapping.
below is a screenshot of what it looks like

To move text slightly you can use offset: [0,-15], reference.
However you might want to use the label formatter to mask the labels that are under a certain value.
Example
var data = [
[820, 932, 901, 934, 1290, 330, 320],
[0, 0, 0, 0, 0, 900, 1320]
];
var option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {},
itemStyle: {
},
series: [{
data: data[0],
type: "line",
stack: "stack",
color: 'blue',
areaStyle: {
color: 'blue',
opacity: 0.3
},
label: {
position: "top",
offset: [0, -15],
show: true,
}
},
{
data: data[1],
type: "line",
stack: "stack",
areaStyle: {
color: 'red',
opacity: 0.3
},
label: {
position: "top",
show: true,
formatter: function (params) {
return (params.value === 0) ? "" : params.value;
}
}
}
]
}
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
if (option && typeof option === "object")
myChart.setOption(option, true);
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 90%"></div>
</body>
</html>
Stacked line graph with masked labels

You should try avoidLabelOverlap = true

How to remove color label on tool tip?

I am trying to remove the colored label square from the chart tool tip. How can I make that happen in this code with all the other code in tact?
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Title
</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js">
</script>
</head>
<body onLoad="ready()">
<canvas id="myChart" width="600" height="200">
</canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [], //start empty backgroundColor: '#e8ebf8', borderColor: '#615BD4', borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { display: false, beginAtZero: true } }], xAxes: [{ ticks: { stepSize: 2, maxTicksLimit: 90 } }] }, legend: { display: false }, tooltips: { intersect: false, showTooltips: true, tooltipEvents: ["mousemove", "touchstart", "touchmove"], tooltipFillColor: "rgba(0,0,0,0.8)" } } }); window.onmessage = function(event) { myChart.data.datasets[0].data = event.data.data; myChart.data.labels = event.data.labels; myChart.update(); }; function handleClick(e) { var activeBars = myChart.getElementAtEvent(e); var value = myChart.config.data.datasets[activeBars[0]._datasetIndex].data[activeBars[0]._index]; var label = activeBars[0]._model.label; window.parent.postMessage({ "type": "click", // "label":label, "value": value }, "*"); } function ready() { window.parent.postMessage({ "type": "ready" }, "*"); }
</script>
</body>
</html>

Use the callbacks feature to remove the label:
options: {
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
console.log(tooltipItem)
return tooltipItem.yLabel;
}
}
}
}

Google charts candlestick strip out every thing but the candle bar

I find that the google documents are i bit limited in explaining if this is possible
how would you strip out all the empty space in a google candlestick chart.
Then fit the candlestick over a background element
code
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
//label,low,opening,closing,high
['09', 1.14799, 1.15027, 1.14848, 1.15275],
//['15', 1.14775, 1.15027, 1.14776, 1.15275],
//['20', 1.14772, 1.15027, 1.14807, 1.15275],
//1.15275 1.14799 1.15027 1.14
// Treat first row as data as well.
], true);
var options = {
legend:'none',
backgroundColor: { fill:'#515151' },
'width': 100,
'height': 340,
chartArea:{left:50,top:20,width:'50%',height:'75%'},
candlestick: {
risingColor: {stroke: '#4CAF50', fill: '#4CAF50'},
fallingColor: {stroke: '#F44336', fill: '#F44336'}
},
colors: ['white'],
hAxis: {title: 'get rid of this space', textPosition: 'none', gridlines: {color: '#515151', count: 0}},
vAxis: {title: 'get rid of this space', textPosition: 'none', gridlines: {color: '#515151', count: 0}},
title: 'get rid of this space'
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<style>
.background01{background-image: url("../img/Candle_Box_Tag.png")}
</style>
</head>
<body>
<div class="background01" id="chart_div"></div>
</body>
</html>

use the chartArea option to stretch the chart to the edges of the container
chartArea: {
backgroundColor: 'transparent',
top: 0,
left: 0,
bottom: 0,
right: 0,
height: '100%',
width: '100%',
},
set the background and various other colors to 'transparent',
then you can apply any background to the <div> element
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
//label,low,opening,closing,high
['09', 1.14799, 1.15027, 1.14848, 1.15275],
//['15', 1.14775, 1.15027, 1.14776, 1.15275],
//['20', 1.14772, 1.15027, 1.14807, 1.15275],
//1.15275 1.14799 1.15027 1.14
// Treat first row as data as well.
], true);
var options = {
chartArea: {
backgroundColor: 'transparent',
top: 0,
left: 0,
bottom: 0,
right: 0,
height: '100%',
width: '100%',
},
backgroundColor: { fill:'transparent' },
legend:'none',
width: 50,
height: 340,
candlestick: {
risingColor: {stroke: '#4CAF50', fill: '#4CAF50'},
fallingColor: {stroke: '#F44336', fill: '#F44336'}
},
colors: ['white'],
hAxis: {textPosition: 'none'},
vAxis: {
textPosition: 'none',
gridlines: {color: 'transparent', count: 0},
minorGridlines: {color: 'transparent', count: 0}
}
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
#chart_div {
background: #515151;
display: inline-block;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Adding a Y Axis to a google stacked column chart

I have been creating column charts using the google chart tool, but am struggling to add a Y axis to my charts. I just need a standard series of values to appear on the axis on the left hand side of the chart.
I am able to create and manipulate the X axis but the Y axis will not appear for some reason. I'm sure there is something simple I am missing here.
Also apologies if the following code is messy, I am pretty new to this.
<head>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Year','Orange','Orange2','Blue','Blue2','Green','Green2','Purple','Purple2','Brown','Brown2','Grey', 'Grey2', {role: 'annotation'}],
['2007',0,2,0,0,0,0,0,0,0,0,0,0,''],
['2008',0,0,0,1,0,0,0,0,0,0,1,0,''],
['2009',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2010',0,0,0,1,0,0,1,0,0,0,0,1,''],
['2011',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2012',0,0,0,0,0,0,0,0,1,0,5,0,''],
['2013',0,0,2,0,0,0,0,0,3,0,0,0,''],
['2014',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2015',0,0,0,2,0,0,0,0,1,0,1,0,''],
['2016',0,2,0,0,0,1,0,0,4,0,0,0,''],
['2017',1,0,0,1,0,0,0,2,0,0,0,0,'']
]);
var colors = [
{ color: 'ff884d' },
{ color: 'ffddcc' },
{ color: '3366ff' },
{ color: '99b3ff' },
{ color: '33ff77' },
{ color: 'b3ffcc' },
{ color: 'd633ff' },
{ color: 'f0b3ff' },
{ color: 'e6ccb3' },
{ color: 'ac7339' },
{ color: 'c0c0c0' },
{ color: 'e6e6e6' },
];
var options = {
isStacked:true,
series: colors,
bar: {groupWidth: "90%"},
legend: {position:'top', textStyle: {fontSize: 9}},
chartArea: { width: "100%"},
axes: {
y: {
0: { side: 'left', label: 'Count'}
}}
};
// Instantiate and draw the chart.
var chart = new google.visualization.ColumnChart(document.getElementById('publicbarchart'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="publicbarchart" style="width: 900px; height: 300px;"></div>
</body>
Thanks in Advance,

the y-axis is being hidden by chart option --> chartArea: {width: "100%"}
chartArea controls the size of the center section where the bars are,
and does not include the labels on either axis or at the top
use height & width outside of chartArea for the entire chart
if you want to maximize the chart area, then set limits on left, bottom, top, and / or right,
recommend replacing with the following...
height: '100%',
width: '100%',
chartArea: {
top: 32,
left: 32,
bottom: 32,
right: 12,
height: '100%',
width: '100%'
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Year','Orange','Orange2','Blue','Blue2','Green','Green2','Purple','Purple2','Brown','Brown2','Grey', 'Grey2', {role: 'annotation'}],
['2007',0,2,0,0,0,0,0,0,0,0,0,0,''],
['2008',0,0,0,1,0,0,0,0,0,0,1,0,''],
['2009',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2010',0,0,0,1,0,0,1,0,0,0,0,1,''],
['2011',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2012',0,0,0,0,0,0,0,0,1,0,5,0,''],
['2013',0,0,2,0,0,0,0,0,3,0,0,0,''],
['2014',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2015',0,0,0,2,0,0,0,0,1,0,1,0,''],
['2016',0,2,0,0,0,1,0,0,4,0,0,0,''],
['2017',1,0,0,1,0,0,0,2,0,0,0,0,'']
]);
var colors = [
{ color: 'ff884d' },
{ color: 'ffddcc' },
{ color: '3366ff' },
{ color: '99b3ff' },
{ color: '33ff77' },
{ color: 'b3ffcc' },
{ color: 'd633ff' },
{ color: 'f0b3ff' },
{ color: 'e6ccb3' },
{ color: 'ac7339' },
{ color: 'c0c0c0' },
{ color: 'e6e6e6' },
];
var options = {
isStacked:true,
series: colors,
bar: {groupWidth: "90%"},
legend: {position:'top', textStyle: {fontSize: 9}},
axes: {
y: {
0: { side: 'left', label: 'Count'}
}
},
height: '100%',
width: '100%',
chartArea: {
top: 32,
left: 32,
bottom: 32,
right: 12,
height: '100%',
width: '100%'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

semi circle donut chart highchart with text embedded inside

I am using Highcharts js and I am trying to draw a pie chart with highCharts
which is a semicircle and some text embedded inside it.
and
Till now what I have made is
my html markup is
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<div id="trends-pie-chart-1" class="trends-pie-chart">
<!-- draw pie chart here -->
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div id="trends-pie-chart-2" class="trends-pie-chart">
<!-- draw pie chart here -->
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div id="trends-pie-chart-3" class="trends-pie-chart">
<!-- draw pie chart here -->
</div>
</div>
</div>
css used
.trends-pie-chart {
width: 100%;
margin-bottom: 30px;
}
and Js used
// Create the chart for Microsoft office
var chart_completion = new Highcharts.Chart({
chart: {
renderTo: 'trends-pie-chart-1',
type: 'pie',
margin: [60,10,10,10]
},
colors: ['#fcfcfc', '#F4E998'] ,
tooltip: {
enabled: false,
},
plotOptions: {
pie: {
slicedOffset: 0,
size: '50%',
dataLabels: {
enabled: false
}
},
series: noBorder
},
title: {
text: 'Microsoft Office',
align: 'center',
verticalAlign: 'bottom',
y : 10,
style: {
fontSize: '2em'
}
},
credits: {
enabled: false
},
series: [{
name: 'Browsers',
data: [["",25],[,75]],
innerSize: '60%',
showInLegend:false,
dataLabels: {
enabled: false
},
states:{
hover: {
enabled: false
}
}
}]
},function (chart) { // on complete
chart.renderer.text('42 K Users', 140, 200)
.css({
color: '#9BA0A2',
fontSize: '2em',
zIndex:100000
})
.add();
});
// Create the chart for azure
var chart_time = new Highcharts.Chart({
chart: {
renderTo: 'trends-pie-chart-2',
type: 'pie',
margin: [60,10,10,10]
},
colors: ['#fcfcfc', '#3EC1F9'] ,
plotOptions: {
pie: {
slicedOffset: 0,
size: '50%',
dataLabels: {
enabled: false
}
},
series : noBorder
},
tooltip: {
enabled: false,
},
title: {
text: 'Azure',
align: 'center',
verticalAlign: 'bottom',
y : 10,
style: {
fontSize: '2em'
}
},
credits: {
enabled: false
},
series: [{
name: 'Browsers',
data: [["",25],[,75]],
innerSize: '60%',
showInLegend:false,
dataLabels: {
enabled: false
},
states:{
hover: {
enabled: false
}
}
}]
});
// Create the chart for Cloud Storage
var chart_budget = new Highcharts.Chart({
chart: {
renderTo: 'trends-pie-chart-3',
type: 'pie',
margin: [60,10,10,10]
},
colors: ['#fcfcfc', '#6355FC'] ,
plotOptions: {
pie: {
slicedOffset: 0,
size: '50%',
dataLabels: {
enabled: false
}
},
series: noBorder
},
title: {
text: 'Cloud Storage',
align: 'center',
verticalAlign: 'bottom',
y : 10,
style: {
fontSize: '2em'
}
},
tooltip: {
enabled: false,
animation: false,
backgroundColor: null
},
credits: {
enabled: false
},
series: [{
name: 'Browsers',
data: [["",25],[,75]],
innerSize: '60%',
showInLegend:false,
dataLabels: {
enabled: false
},
states:{
hover: {
enabled: false
}
}
}]
});
/*pie charts trends page*/
var noBorder = {
states:{
hover:{
halo: {
size: 1
}
}
}
};

You can change zIndex of your text by using .attr():
http://api.highcharts.com/highcharts#Element.attr
chart.renderer.text('42 K Users', 140, 200)
.css({
color: '#9BA0A2',
fontSize: '2em',
}).attr({
zIndex: 5
})
.add();
It will work because your text is svg/vml object.
example:
http://jsfiddle.net/dL6rebf5/22/

This looks like a z-index issue. But well, I have got a better solution. Not sure if it helps:
.wrap {position: relative; z-index: 1; width: 150px; height: 150px;}
.wrap span {top: 0; right: 0; width: 50%; line-height: 95px; background-color: #fff; z-index: 5; position: absolute; text-align: center; font-size: 2em; height: 50%; overflow: hidden;}
.wrap .outer-circle,
.wrap .inner-circle {position: absolute; border-radius: 100%; background-color: #00f; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; margin: 25px;}
.wrap .inner-circle {background-color: #fff; z-index: 3;}
<div class="wrap">
<span>75%</span>
<div class="outer-circle">
<div class="inner-circle"></div>
</div>
</div>
Preview: