Develop Reference

How can I fit series with different lengths inside same axis with Apache ECharts?

I am using the Javascript ECharts library for displaying some data in my Angular 2+ app. I see that all the examples have some configuration like the following:
{
xAxis: [
data: ['00:00', '01:15', '02:30', '03:45']
],
series: [
{ name: 'A', type: 'line', data: [300, 280, 250, 260] },
{ name: 'B', type: 'line', data: [200, 120, 700, 290] },
]
}
But my data does not always provide values for all the labels in the x axis. For example, I would need to fit these arrays of custom objects into the chart:
const series1 = [{ label: '00:00', value: 300 }, { label: '02:30', value: 120 }];
const series2 = [{ label: '03:45', value: 890} ];
Of course, I could manually insert null or empty values in all the series so that all of them provide a value for each label in the axis. But I believe there should be a more straightforward way to achieve this in ECharts, as it is quite simple in other chart libraries like Kendo Charts.

Assuming you are working with line chart, below is the solution, anyway it is not that different for other charts, just make sure your xAxis type is category
Your xAxis type should be set to category, and data should be something like this
xAxis: [
type: 'category'
data: [ {name: '00:00'}, ....]
]
your series data should look like this
//dimx , value
const series2 = [['03:45', 890]];

You can use the 'time' format to fit series with different lengths.
Even the series, in this way, can have different lengths.
const colors = ['#5470C6', '#EE6666'];
let option = {
color: colors,
xAxis: {
type: 'time',
splitNumber: 11,
axisLabel: {
rotate: 45,
formatter: { hour: '{hh} : {mm}' },
},
},
yAxis: {
type: 'value',
},
series: [
{
name: 'Precipitation(2015)',
type: 'line',
data: [
['2012-03-01T12:22:33.123', 2.2],
['2012-03-01T12:23:33.123', 5.6],
['2012-03-01T12:24:33.123', 7.9],
['2012-03-01T12:25:33.123', 9.0],
['2012-03-01T12:28:33.123', 7.9],
['2012-03-01T12:30:33.123', 9.0],
['2012-03-01T12:32:33.123', 26.4],
['2012-03-01T12:40:33.123', 28.7],
],
},
{
name: 'Precipitation(2016)',
type: 'line',
data: [
['2012-03-01T12:22:33.123', 2.2],
['2012-03-01T12:23:33.123', 5.6],
['2012-03-01T12:38:33.123', 26.4],
['2012-03-01T12:40:33.123', 28.7],
],
},
],
};
result

ECharts: Display Label For Each Item With Multiple Series

Here is an Echarts column chart:
option = {
xAxis: {
type: 'category',
data: ['Mon','Tue']
},
yAxis: {
type: 'value'
},
series: [{
data: [120],
type: 'bar'
},
{
data: [100],
type: 'bar'
}
]
};
It will display a column chart with two bars, one for each series. ECharts will render it as such:
What I really want is for Mon to be a label for the red bar in the first data series, and Tue to be a label for the blue bar in the second data series. In other words, I want the x label for each item in each series to display, as it would if it were a single series:
This second chart is the way I want it to display except I want the Tue bar to display in blue as it would if it were in another series.
In my real-life scenario, I expect there would be only one item per series, so if the solution has something to do with the name of the series as opposed to names/label of the individual items, that would work for me.
Any guidance would be appreciated.

There are at least two ways you can accomplish this.
Use two bar series and barGap:
option = {
xAxis: {
type: 'category',
data: ['Mon','Tue']
},
yAxis: {
type: 'value'
},
series: [{
data: ['-', 120],
type: 'bar',
barGap: '-100%'
},
{
data: [100, '-'],
type: 'bar'
}
]
};
ref: https://echarts.apache.org/en/option.html#series-bar.barGap
Use a single bar series with a customized data item:
option = {
xAxis: {
type: 'category',
data: ['Mon','Tue']
},
yAxis: {
type: 'value'
},
series: [{
data: [
120,
{
value: 100,
itemStyle: {
color: '#324b5b'
}
}
],
type: 'bar'
}
]
};
ref: https://echarts.apache.org/en/option.html#series-bar.data
Either of the above approaches should yield a chart that looks like this:
two vertical bars with different colours

highcharts series type 'flags' do not show point out of series

I have use highcharts series type 'flag' and have some data points.
I have a situation when my data points list from e.g. [-100;100]
But some flags value are out of this range. I cannot find any solution do show these flags which out of range.

The flag is not located on the line series because the x value is outside the range:
series: [{
id: "data",
data: [
[1569269259533, 100],
[1569269319534, 100]
]
}, {
type: 'flags',
useHTML: true,
y: -18,
id: 'flags',
onSeries: 'data'
}],
chart: {
events: {
load: function(e) {
var flagSerie = this.get('flags');
flagSerie.setData([{
x: 1569269299533,
count: 3
}]);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/rmonx6Lz/
API Reference: https://api.highcharts.com/highstock/series.flags.onSeries

Bar Chart inside Stacked Bar Chart

I want to display the following chart:
Many chart libraries allow the use of stacked bar charts, for example:
Chartist.js
d3.js
CanvasJS
etc.
But how about a chart like shown above? The idea is to provide values for the green, yellow and red area and for the black bar in the center... Based on those values such a chart should be rendered.
I thought this somehow can be realized by creating a stacked bar chart and "somehow" inserting the bar inside the stacked bar... And "somehow" putting the labels there... :D
As you can see, no clue at all... :)

Do you mean a workaround for bullet chart like this?
`data:[
{
type: "stackedBar100",
toolTipContent: null,
highlightEnabled: false,
name: "Region 1",
showInLegend: true,
dataPoints: [
{y: 60, label: "Water Filter" }
]
},
{
type: "stackedBar100",
toolTipContent: null,
highlightEnabled: false,
name: "Region 2",
showInLegend: true,
dataPoints: [
{y: 20, label: "Water Filter" }
]
},{
type: "bar",
dataPoints:[{}]
},{
type: "bar",
dataPoints: [
{y: 65, label: "Water Filter" }
]
},
{
type: "bar",
dataPoints:[{}]
}
] `

How can i change text of legend in c3 pie chart

How can I change the Text of legend of pie chart. I am using c3 charts in my php page. I have already read the documentation of c3 charts but no luck.
Currently i am using this code it show legend for true but I not able to change the text I have tried this.
var chart = c3.generate({
bindto: '#container',
padding: {
top: 10,
right: 0,
bottom: 10,
left: 0,
},
data: {
columns: [<?php echo $pieChartDataString; ?>],
type : 'pie',
labels: true
},
legend: {
show: true,
position: 'upper-center'
format: {
title: function () { return "Legend title"; },
name : function () { return "Legend name"; },
value: function () { return "Legend value";}
}
}
//But these legend values or not showing
});
It's not showing my legend values its always shows only columns as legend.
Is there any way that I can change the legend values.

You haven't provided the data that gets outputted from your php, so it's hard to say.
But the first item in each of the columns array determines the name that goes in the legend. So:
columns: [
['this is legend 1', 30],
['put your value here', 120],
]
would result in the legend labels being "this is legend 1" and "put your value here".
Here's a fiddle:
http://jsfiddle.net/jrdsxvys/9/
Edit...
Another option is to use the names property, as done here:
http://jsfiddle.net/jrdsxvys/40/
data: {
columns: [
['d1', 30],
['d2', 120]
],
type: 'pie',
labels: true,
names: {
d1: 'some name here',
d2: 'another name'
}
}

#agpt Yes. The names property is a good way to go generally because the first property of the columns data array eg 'd1' above is used when doing things like having multiple types on charts. eg for a bar and line combination using types instead of type: 'pie':
columns: [
['bar_1', 3, 8, 6],
['bar_2', 4, 0, 7],
['bar_3', 2, 3, 0]
],
types: {
bar_1: 'bar',
bar_2: 'line',
bar_3: 'bar'
},
names : {
bar_1: 'Initial',
bar_2: '3 month',
bar_3: '6 month'
}
So, using the names property allows you to use more 'dynamic' property names and be consistent throughout the config.