Im facing an issue with highcharts js library where im trying to put the value of the point inside the shape.
for this im using inside: true, verticalAlign: 'middle' for data label which seem to work just fine but whenever the point is at the start or at the end of the chart the label does not align correctly.
I have already tried offset and padding but its for the whole axis not the label.
I would really appreciate any suggestion, clues or solutions
http://jsfiddle.net/Andam/6km2fw31/1/
Highcharts tries to position data labels on a plot area due to default justify option for overflow. As a solution change overflow to allow.
dataLabels: {
enabled: true,
verticalAlign: 'middle',
crop: false,
overflow: 'allow'
}
Live demo: http://jsfiddle.net/BlackLabel/f2r7hL3j/
API Reference: https://api.highcharts.com/highcharts/series.column.dataLabels.overflow
Related
I am building a pie chart with highchart. I need to set custom title for my pie chart. And I need to align it to the center of the pie chart. Everything works fine except the initial circle loading animation of pie chart. If I remove
verticalAlign: 'middle',
It will work. The problem is only in highchart v7.1.1 . This animation is working fine in Highchart v7.0.3.
This is my codepen link.
Can any one please help me to fix it?
Reported issue: https://github.com/highcharts/highcharts/issues/10835
To workaround enable floating in title configuration object:
title: {
floating: true
},
Live demo: http://jsfiddle.net/BlackLabel/9nywd2mx/
API Reference: https://api.highcharts.com/highstock/title.floating
Is it possible to render a chart with "inline" labels between horizontal bars in ChartJS?
You can use chartjs-plugin-datalabels for this which is very useful when displaying labels on data for any type of charts and is highly customizable.
Note that this requires Chart.js 2.7.0 or later.
Use it by including it under the plugins key of your chart options as shown in the following solutions below.
Solution #1.
The configuration below will display your labels on the top center of each bar. See working example.
var options = {
plugins: {
datalabels: {
// use the formatter function to customize the labels displayed
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
},
align: "top",
anchor: "center",
offset: 25,
padding: -2,
clip: true,
font: {
size: "16",
weight: "bold"
}
}
}
};
However, this is not exactly like the screenshot you provided so,
Solution #2.
Here's one workaround I can suggest to replicate the exact behaviour that you want.
anchor: 'start' and align: -60: that will bring your data label on top, left aligned
make your chart start at zero by setting scale.ticks.beginAtZero to true
offset: 25: distance (in pixels) to pull the label away from the anchor point
padding: function() {}: use a scriptable option to dynamically compute the left padding based on the label approximate size since adding a specific padding will only work if your labels have the same width that doesn't change which is not this case
See working example for a detailed overview of the configurations.
This solution will work but it's definitely not ideal since the
position of these labels may change depending on the label size, bar
thickness, and the size of the chart.
I have been searing for a solution to have centered text in highcharts donut. Some solutions use title, or subtitle with following option to center text but this does not work when chart is responsive and does not have specified width:
verticalAlign: 'middle',
floating: true
http://jsfiddle.net/pDdcd/483/
Does anybody have a solution which works when chart is responsive, even is it includes modified source code?
i am using chart.js for making the charts. i have successfully done the graph things. Just i want a help in this regard that sometimes there could be just 30-40 points to plot. but usually there are about 1000 points.
So what is the good option which i can use for better analysis for this reporting tool. Like is there any option of blow up specific point or i can use a scroll to scroll my chart and expand it horizontally, a very large.
this is my chart image.
u can see there are many points and all are congested. i want to know what is the suitable solution.
This is my chart configuration in which i have set it to the responsive.
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: label,
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
var multistringText = ['Assay Value: '+tooltipItems.yLabel];
multistringText.push('Assigned Value: '+assigned_value[tooltipItems.index]);
multistringText.push('Sample ID: '+sample_id[tooltipItems.index]);
return multistringText;
}
}
},
Update: After searching and creating an issue on the official chartjs git repository . This is not possible for the category/simple x-axis lines. This mean you cannot add pan through the chart in this way using the category/simple scales on x-axis. however zooms still works fine.
Editing this question for the future readers.
P.s: Leave a comment in case of negative voting.
Check out chartjs-plugin-zoom. It is a plugin that adds the capability to zoom in/out and pan left/right/up/down to view the rest of your data that is not currently displayed on the zoomed chart.
Here is a live codepen example.
I'm not sure it will do exactly what you need, but its a great place to start (you can use this as a base and extend it to your needs). This plugin is also developed/supported by the same team as chart.js.
Using highcharts, legends are displayed in a horizontal manner. I am trying to display in vertical order (one series below the other) but I could not find any solutions for that.
In the image below, the order of legends are horizontal. Can someone help me figure out how to display the legend in a vertical order?
Use this snippet, it will place the label vertically in bottom of chart:
legend: {
verticalAlign: 'bottom',
layout: 'vertical
},
You can check it with this fiddler.