Please see attached image from below link. i am making chart of dummy data for a local project.
Problem Statement:
My problem is when i set userHTML: true in below code, it move my x-axis labels to up. but when i remove this line, my labels are on their right position. but i need useHTML true and their right position same time.
xAxis: {
categories: seriesDataMonthName,
title: {
text: 'Month/Year (Charge Date of Service)'
},
labels: {
useHTML: true,
formatter: function () {
return '<a style="display:inline !important" class="clsCPTTrendingChart" data-toggle="modal" data-target="#myModal" name="' + this.value + '">' + this.value + '</a>'
},
}
},
Thanks for comments. I simply remove the useHTML: true and call javascript function directly in tag. It works for me.
Related
I have a chart drawn using Highcharts API, which has two series and multiple levels of data shown using DrillDown feature of the API. When i tend to modify the default Axis label format using formatting property and by setting useHTML 'true', the labels are displayed with underline even in the last level which is not the expected behaviour.
xAxis: {
type: 'category',
labels: {
rotation: -45,
formatter: function (e) {
return '<div class="chartXAxisLabel" title="' + this.value + '" ><span>' + this.value + '</span></div>';
},
useHTML: true
},
title: {
enabled: true,
align: 'high'
}
},
The issue could be seen in the below fiddle link.
http://jsfiddle.net/6LXVQ/418/
I find it odd that only adding/removing useHTML: true causes this problem by itself. The formatter does not need to be involved (as shown in this minimal example).
I found that adding this minimal code fixes the problem (JSFiddle example with your code):
xAxis: {
labels: {
useHTML: true,
style: {
"text-decoration": "none"
}
}
}
I'm not exactly sure why, but it removes the underline from the span element that is causing it.
I've just encountered a problem I could not find solution for, so that's the cause of my post.
I am using:
xAxis: {
gridLineWidth: 0,
type: 'datetime',
labels: {
useHTML: true,
formatter: function() {
return '<div class="labels" style="margin-top:20px;font-family:Open Sans;">' + $charts.convert_label_time(this.value) + '</div>';
}
}
},
After AJAX call labels are going to disappear and the "DIV" ('.highcharts-axis-labels') that is related to them is removed.
The cause of this reaction is - Adding dynamically series using
chart.addSeries();
Any tips?
Is there way to set the label of an Bar Chart to 50% of the charts width? I've tried this but it does not work:
xAxis: {
categories: [],
labels: {
formatter: function() {
var text = this.value;
return '<div class="js-ellipse" style="width:100%; overflow:hidden; text-overflow: ellipsis" title="' + text + '">' + text + '</div>';
},
style: {
width: '50%'
},
useHTML: true
}
},
So goal is to have labels on the left side of the bar chart that are 50% of the width of the whole chart container.
You have an option for that in the plotOptions :
plotOptions: {
bar: {
dataLabels: {
enabled: true,
inside: true
// ^^^^^^^^^^^^
}
}
},
The property inside :
For points with an extent, like columns, whether to align the data label inside the box or to the actual value point. Defaults to false in most cases, true in stacked columns.
And an example forked from the official documentation : http://jsfiddle.net/XXB9k/
EDIT :
There is another option to center the x labels (I don't know witch labels your are talking about), but there is a solution not far away from your code :
xAxis: {
...
labels: {
enabled: true,
x: this.width / 2,
}
}
An example : http://jsfiddle.net/QMPkh/
FINAL EDIT :
In fact you can simply use the width of the chart in the label formatter :
labels: {
enabled: true,
formatter: function() {
return '<div style="width:' + (this.axis.width/2) +'px">'+this.value+'</div>';
},
useHTML: true
}
An example to show the result : http://jsfiddle.net/QMPkh/2/
Unfortunately width in percent is not supported, only in pixels.
I have this chart:
http://jsfiddle.net/ECAM9/1/
And it works fine.
However when I print or export it, I want the resulting image or pdf file to look like this:
http://jsfiddle.net/rFzTG/
That means that I want every point to have info over it.
I was looking at this answer:
Highcharts add legend on export
And I tried adding this:
exporting:{
chartOptions:{
scatter: {
dataLabels: {
enabled: true,
formatter: function() {
return this.series.name +'</b><br/>'+ this.x +': '+ this.y +'°C';
}
},
}
}
},
But again, the jpg file I print is without the info.
One way:
1) use 'useHTML' in the datalabels
2) on chart load event, hide the datalabel elements
The chart will display without datalabels, since you hid them, but print with datalabels, since the chart was created with them
http://jsfiddle.net/jlbriggs/Z7csw/
dataLabels: {
enabled: true,
useHTML:true,
formatter: function() {
return '<div class="datalabel">' +this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C</div>';
}
},
.
events:{
load:function() {
$('.datalabel').hide();
}
}
EDIT: -->
Ok, I have a quick example that works with printing here, based on comments below:
http://jsfiddle.net/jlbriggs/Z7csw/6/
It's not perfect, but it does work...
Based on: How to position datalabel at the base of bar series
I've made some updates so that a column chart shows a stacked column for 100%-total
However, using:
stackLabels: {
formatter: function() {
return this.total + '%';
},
enabled: true,
verticalAlign: 'middle',
align: 'left',
y:10
},
I am getting the total 100% for the entire stack. How can I adjust the formatter to only show the value for a single series?
Try this.
formatter: function() {
return this.total + '%';
},
I have trying SUM for 3 number of stack bar and it only using enable : true;
I am not sure but to get value for individual series you can use this.y or this.x.
try
return this.x OR
return this.y