We Keep Coding

ECharts: how to show all axis labels?

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

Stacked Bar chart fixed width bar chart issue - Chartjs

I am using chartjs Version: 2.1.4 to creating Chart in MVC C# application. I am using "barPercentage: 0.2"to control the width of Bar charts for fixed width settings. Its working fine in case of Only bar charts, But in case of "stacked bar chart" i'm unable to fix the width of bars. I am using following code to stacked bar chart as:
scales:
{
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true
}
}],
xAxes: [{
stacked: true,
// Change here
barPercentage: 0.2
}]
}
In this case "barpercentage" property is not working. Please suggest me solution if any in "chartjs Version: 2.1.4".
Thanks in advance

Replace barPercentage with categoryPercentage and fiddle with its value until you get what you want. When you have a stacked bar chart, you get one bar per category, so I guess this is the reason barPercentage is ignored, while categoryPercentage works fine.

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 :

Horizontal stacked bar chart with chart.js

I am trying to find out if there is any plugin to do a horizontal stacked bar chart with chart.js
I see there are plugins for stacked bar charts and also for horizontal bar charts, but I didn't find one that combines both.
https://github.com/Regaddi/Chart.StackedBar.js
Anyone know how to achieve this?

UPDATED for CHARTJS V4
With the new version of ChartJS, you need to set the indexAXIS to 'y', and set the x and y scales to stacked.
options: {
indexAxis: 'y',
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
}
}
Here's an updated Codepen using V4 of ChartJS
https://codepen.io/jamiecalder/pen/vYaWyVy
ORIGINAL ANSWER BELOW USES ChartJS V2
I know this is a few months old, but I thought I'd add my answer for future generations.
I was able to do without extra plugins. If you set the xAxes and yAxes to stacked:true under scales, you can create a stacked horizontal graph.
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
Here's a quick pen to show how I did it. http://codepen.io/jamiecalder/pen/NrROeB

Take a look at the fork ChartNew.js (https://github.com/FVANCOP/ChartNew.js). This has HorizontalStackedBars (and many other additions). See https://github.com/FVANCOP/ChartNew.js/wiki/050_available_graphs for how its going to look like.

FLOT plot chart legend CSS being overwritten

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).