diff --git a/src/charts/gv-chart-gauge.js b/src/charts/gv-chart-gauge.js index 5073084b..357f7b0b 100644 --- a/src/charts/gv-chart-gauge.js +++ b/src/charts/gv-chart-gauge.js @@ -28,7 +28,8 @@ import HCSolidGauge from 'highcharts/modules/solid-gauge'; * * @attr {number} max - The maximum value of the gauge. * @attr {Array} series - Array of the series to display. - * + * @attr {Object} tooltip - The list of tooltip attributes to overwrite. + * @attr {Object} pane - The pane serves as a container for axes and backgrounds for circular gauges and polar charts. */ export class GvChartGauge extends ChartElement(LitElement) { constructor() { @@ -54,6 +55,7 @@ export class GvChartGauge extends ChartElement(LitElement) { }, tooltip: { enabled: false, + ...this.tooltip, }, pane: { @@ -67,6 +69,7 @@ export class GvChartGauge extends ChartElement(LitElement) { borderWidth: 0, }, ], + ...this.pane, }, yAxis: [ diff --git a/stories/charts/gv-chart-gauge.stories.js b/stories/charts/gv-chart-gauge.stories.js index 9af1c9ae..b2352a0f 100644 --- a/stories/charts/gv-chart-gauge.stories.js +++ b/stories/charts/gv-chart-gauge.stories.js @@ -82,3 +82,52 @@ const confWithBackground = { export const WithColorfulBackground = makeStory(confWithBackground, { items: [{ series, max: 3 }], }); + +const installationsSeries = [ + { + name: 'Installations', + data: [ + { + color: '#64b5f6', + opacity: 0.8, + radius: '112%', + innerRadius: '88%', + y: 2, + }, + ], + dataLabels: [ + { + enabled: true, + align: 'center', + verticalAlign: 'middle', + format: 'Installations: 3 ', + borderWidth: 0, + style: { + fontSize: '16px', + }, + }, + ], + }, +]; + +const tooltip = { + enabled: true, + distance: 20, + pointFormat: '2 started
1 pending', + nullFormat: 'Value is not available.', +}; + +const pane = { + background: [ + { + outerRadius: '112%', + innerRadius: '88%', + backgroundColor: '#ffb74d80', + borderWidth: 0, + }, + ], +}; + +export const witCustomPaneAndTooltip = makeStory(conf, { + items: [{ series: installationsSeries, max: 3, tooltip, pane }], +});