When representing data on a bar chart, it is possible to want to represent this data with a different color depending on a condition on the value. For example, green for a target achieved, red otherwise.
You would then need to be able to have:
For this example, we have chosen to put the data in two series depending on whether or not the objective has been achieved. In this way, the two colors are clearly visible both on the graph and in the legend.
On the other hand, this requires us to filter the values displayed in the tooltip so as not to display the series of a target that has not been reached when it has been reached and vice versa.
This filter is created using tooltip value formatter in the default Apache ECharts configuration, and to send back
undefined if we don't want the value to be displayed:
tooltip: {
formatter: function (params) {
return (
params[0].value ? Math.round(params[0].value * 100) / 100 + '$' : undefined
);
}
}
NB: This formatter could also be provided through
getPopupContentValue() callback of the externalizePopover() feature:
themeManager.externalizePopover(undefined, {
...ODSCharts.ODSChartsPopoverManagers.NONE,
getPopupContentValue: ({ seriesName, itemValue }) =>
itemValue ? Math.round(itemValue * 100) / 100 + '$' : undefined,
});
In the example below, we prefer the Apache ECharts
tooltip.formatter method.
<div class="border border-light position-relative">
<div class="chart_title">
<h4 class="display-4 mx-3 mb-1 mt-3">Title</h4>
<h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
</div>
<div id="barLine_holder">
<div id="barLine_chart" style="width: 100%; height: 50vh" class="position-relative"></div>
</div>
<div id="barLine_legend"></div>
</div>
///////////////////////////////////////////////////
// Used data
///////////////////////////////////////////////////
var goals = new Array(...new Array(12).keys()).map((i) => {
return 50 + Math.random() * 50;
});
var results = new Array(...new Array(12).keys()).map((i) => {
return 50 + Math.random() * 50;
});
var resultsOK = results.map((res, i) => (res >= goals[i] ? results[i] : 0));
var resultsNOK = results.map((res, i) => (res < goals[i] ? results[i] : 0));
var dates = new Array(...new Array(12).keys()).map((i) => {
var d = new Date();
d.setMonth(d.getMonth() - i);
return d.toLocaleDateString(undefined, {
month: 'short',
year: 'numeric',
});
});
// Data to be displayed
var dataOptions = {
xAxis: {
type: 'category',
data: dates,
},
yAxis: {},
series: [
{
data: resultsOK,
type: 'bar',
stack: 'result',
},
{
data: resultsNOK,
type: 'bar',
stack: 'result',
},
{
data: goals,
type: 'line',
},
],
legend: {
data: ['Results OK', 'Results NOK', 'Goal'],
},
tooltip: {
formatter: function (params) {
return params[0].value ? Math.round(params[0].value * 100) / 100 + '$' : undefined;
},
},
};
///////////////////////////////////////////////////
// ODS Charts
///////////////////////////////////////////////////
// Build the theme
var themeManager = ODSCharts.getThemeManager();
echarts.registerTheme(themeManager.name, themeManager.theme);
// Get the chart holder and initiate it with the generated theme
var div = document.getElementById('barLine_chart');
var myChart = echarts.init(div, themeManager.name, {
renderer: 'svg',
});
// Set the data to be displayed.
themeManager.setDataOptions(dataOptions);
// Register the externalization of the legend.
themeManager.externalizeLegends(myChart, '#barLine_legend');
// Manage window size changed
themeManager.manageChartResize(myChart, 'barLine_chart');
// Register the externalization of the tooltip/popup and use the second parameter as specified in https://ods-charts.netlify.app/api/classes/odschartspopoverdefinition to change the popup value (cf https://ods-charts.netlify.app/api/classes/odschartspopoverdefinition#getPopupContentValue)
themeManager.externalizePopover();
// Display the chart using the configured theme and data.
myChart.setOption(themeManager.getChartOptions());