ECharts: how to show all axis labels? - javascript

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,
},

Related

"Inline" labels in ChartJS

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.

Chart.js V2 ticklines no grid

I'm using ChartJs V2. Trying to have no horizontal gridlines but still have a little tick-line at the ticks. How is this possible? I'm using angular-charts to set the global options currently:
scales: {
yAxes: [{
gridLines: {
display: false,
drawTicks: true,
}
}],
}
What I have:
What I want:
The gridlines display option must be set to true for the ticks part of the gridlines to be drawn.
To show only the ticks, use the drawOnChartArea option to turn off the gridlines on the chart.
scales: {
yAxes: [{
gridLines: {
display: true,
drawOnChartArea: false,
}
}],
}
EDIT:
JSFiddle
What you need for this are Chart.js plugins.
They let you handle what is happening when events like the rendering or the update are triggered.
For instance, in your case, we want to draw again the ticks which were erased via the display:false attribute of options.scales.yAxes.gridLines.
We will then need the afterDraw event. Plugins in Chart.js are created like this :
Chart.pluginService.register({
afterDraw: function(chart, easing) {
// Your code in here
}
});
Now that you know how to do, let's focus on what to do.
What we want is to redisplay the tick lines on the yAxes. But they were removed (as I said above).
We can't bring them back, but since Chart.js charts are using a <canvas> tag, we can try to draw them once again.
To do it dynamically (most I can at least), we will need to loop in the different ticks of your y axe and, by also getting the height of your axe, we will be able to draw our own ticks.
Here is a jsFiddle (improved by the OP) with some explanation about what we must do and of course a fully working example, and here is its preview :

Displaying/EnablingShield UI JavaScript chart gridlines

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',
},

Highcharts - Resizing Columns to Fix Data Label

I'm trying to get the columns of my Highcharts chart to resize in order to always leave room for the data labels.
Right now, I can only do one of the following:
Have the data labels appear inside the columns themselves: jsfiddle.net/gjslick/LrAuf/
Have the data labels cropped when they don't fit: jsfiddle.net/gjslick/L7LKA/1/
Have the data labels display, but overlap other lines in the chart: jsfiddle.net/gjslick/WbQb4/1/
Is there any way to get the columns to be resized in order to guarantee that the label fits above/below the column? Thanks!
My preference would be for #1. But, you could also try using xAxis.offset to add some padding between the xAxis labels and the actual chart area (see this one). But, as you can see I increased the negative value to be much larger than your original one. This shows how the yAxis is auto-scalling and it actually increases the padding a bit too much. To fix this you may need to go and get prefetch the maximum/minimum y-values and manually set the yAxis min/max.
xAxis: [{
offset: 14,
title: {
text: ''
},
type: 'category'
}],
yAxis: [{
min: -10,
max: 10,
title: {
text: ''
},
labels: {
enabled: false
},
gridLineWidth: 0
}],

Highcharts - area "appearance" but not start at 0

This might be a strange request but is it possible to have a single line chart "display" as area, as in have the shaded part below the line, however not rescale the y axis from 0?
So for example this chart: http://jsfiddle.net/29shP/1/
Is chart type line...
But if I change type: 'area'
Then it displays like this:
Is it possible for the series to stay as it is in the first image, but with the shaded colour below?
Thanks
I advice familiar with this https://github.com/highslide-software/highcharts.com/issues/1401 thread which describe this issue.
Here is the answer given in the thread:
The difference is that the threshold is set to 0 by default for areas. You'll find the same for columns. See http://api.highcharts.com/highcharts#plotOptions.area.threshold. You can disable that behaviour by setting the threshold to null.
yes you can do that
highcharts allow you to keep separate series options in the navigator there you can change
navigator: {
series: {
data: ADBE,
type: 'line'
}
},
here is a jsfiddle for your reference http://jsfiddle.net/GhA5d/
updated your fiddle at http://jsfiddle.net/29shP/2/
Hope this will be useful for you
Use "min"
yAxis: {
startOnTick: false,
endOnTick: false,
min: 0
},
Example: http://jsfiddle.net/29shP/4/
If you want multiple yAxis min, you can do this:
yAxis: [{
min: 0
},
{
min: 0
}],
Check this: Highcharts - Multiple Y Axis Stacked Charts (include jsFiddle in comments)

Categories