md`# Nebula.js - Combo Chart 2`
selectionsToolbarElement = html`<div ></div>`
chartElement = html`<div style="width:100%;height:400px;"></div>`
import { n } from "@yianni-ververis/nebula-js"
{
const selections = await n.selections();
selections.mount(selectionsToolbarElement);
n.render({
element: chartElement,
type: 'comboChart',
properties: {
qHyperCubeDef: {
qDimensions: [
{
qDef: {
qFieldDefs: ['Date.autoCalendar.Date'],
qFieldLabels: ['Date']
},
qNullSuppression: true,
},
],
qMeasures: [
{
qDef: {
qDef: 'Sum([Number of New Cases])',
series: { type: "line", axis: 0 },
qLabel: 'New Cases',
// autoSort: false
},
qSortBy: { qSortByNumeric: -1 },
},
{
qDef: {
qDef: 'Sum([Number of Closed Cases])',
series: { type: "line", axis: 1 },
qLabel: 'Closed Cases',
},
qSortBy: { qSortByNumeric: -1 },
},
],
qInitialDataFetch: [{ qWidth: 3, qHeight: 1000 }],
qAlwaysFullyExpanded: true,
qSuppressMissing: true,
qSuppressZero: true,
},
scrollStartPos: 1,
dimensionAxis: {
axisDisplayMode: 'custom', // 'auto'|'custom'|'max'
dock: 'far', // 'near'|'far'
label: 'auto', // 'auto'|'horizontal'|'tilted'
maxVisibleItems: 4,
show : 'all', // 'all' | 'labels' | 'title' | 'none'
},
showTitles: true,
title: 'Combo-chart 2',
subtitle: 'Sample supernova combochart',
footnote: 'Sample supernova combochart',
},
});
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
