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.
Related
Echarts seems to have a nice feature that automatically chooses which labels to display depending on the space provided. However, this algorithm seems to be bit too aggressive at times and does not take into account text rotate. I've gone through the chart options and there doesn't appear to be a way to disable this feature. I'm hoping it's just something I've overlooked. Help appreciated.
axisLabel (under yAxis or xAxis) has an option interval. Set this to 0 and labels will be displayed.
You can try this to force the label of the x-axis,
xAxis: {
type: "category",
data: data[0],
axisLabel: {
interval: 0,
rotate: 30 //If the label names are too long you can manage this by rotating the label.
}
//If your label is in the `y-axis` simply change the code `xAxis` to `yAxis`.
If your axis label is not showing in a chart frame (mean ECharts label's length is too long), Try this,
grid: { containLabel: true },
2 ways to solve long label text
Using rotate option xAxis : { axisLabel: {
rotate: 45
} }
Using formatter and introducing '/n' to break the text
just for the record:
If your categories have a fixed width, you can also set it up like this, in order to show all labels:
axisLabel: {
width: 100, //fixed number of pixels
overflow: 'truncate', // or 'break' to continue in a new line
interval: 0,
},
So in version 1 of chart.js we could use legendTemplates to format and style where and how the labels of a chart showed up. However since switching to v2 I cannot seem to find an equivilant. See my example below of a pie chart with the labels way to condensed.
Ideally I would be able use some form option to move, spread out or otherwise style these labels.
Here is an example of the old legend template I used
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend text-center\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label.capitalizeFirstLetter()%><%}%></li><%}%></ul>"
You can configure the legend using the config options section, as explained here:
http://www.chartjs.org/docs/latest/configuration/legend.html
Example:
var chartInstance = new Chart(ctx, {
type: 'pie',
data: data,
options: {
legend: {
position: 'left',
labels: {
boxWidth: 15,
padding: 20
}
}
}
})
This code will move the legend to the left side of the chart, will make the colored boxes smaller, and will increase the amount of whitespace between the legend items.
Working JSFiddle: https://jsfiddle.net/o81qqrLn/1/
You can view a full list of configurable legend and label options is the documentation linked above.
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.
I am trying to figure out how one can set or enable the gridlines net for a Shield UI JavaScript chart. I have one line type graph and would like to enable the gridlines so that data becomes easier for users to read.
What I can find online is the lines stype:
axisX: {
plotStripColor: 'red',
plotStripDashStyle: 'ShortDashDot',
plotStripWidth: 2
}
but the actual result isn’t gridlines displayed as I need.
There aren’t a classical grid lines or net as you say. But you can easily mimic one by using the minor ticks for both the X and Y axes.
axisY: {
minorPlotStripColor: 'red',
minorPlotStripWidth: 2,
minorTicksRepeat: 'auto',
},
What you can specify is the color of the lines, which in the given example is red, the line thickness, which you need to set to a value greater than 0 to be visible.
The minorTicksRepeat property in most cases is better to be set to auto. The reason is that when set to a fixed value when the user zooms in the gridlines will become too thick and this may prevent user from easily read the graph.
Below is a code sample that you may find useful:
axisX: {
},
minorPlotStripColor: 'red',
minorPlotStripWidth: 2,
minorTicksRepeat: 'auto'
},
axisY: {
minorPlotStripColor: 'red',
minorPlotStripWidth: 2,
minorTicksRepeat: 'auto',
},
I am experimenting with the FLOT plot tool and having some problem with the legend. Specifically, the CSS for the legend must be being overwritten somewhere in my code because the legend is looking like this:
When I try to pass legend options to the plot, they do not appear. What do I need to do fix this CSS problem? Thanks.
Here is some of the code I am working with:
var options = {
series: {
lines: { show: true },
points: { show: true },
legend: {
margin: 5
}
}
};
$.plot("#flotcontainer", [ json ], options);
The margin option from flot specifies the distance to the plot edge which seems about right at 5 pixels. Try to set the position option too (see the documentation for more information).