Solid gauge with gradient fill not working!

[marcelo-rebello]

I have a nice solid gauge working in a Jsfiddle: https://jsfiddle.net/marcelo_rebello/Luctz3pj/349/

But when I try to recreate the same gauge using HighchartsVue, it only gets a solid color:

My Vue component has exactly the same options object as in the JsFidlle example. my component code is:

<template>
  <Chart :options="options" />
</template>
<script setup lang="ts">
import { ref } from "vue";
import Highcharts from "highcharts";
import highchartsMore from "highcharts/highcharts-more";
import solidGauge from "highcharts/modules/solid-gauge";
import { Chart } from "highcharts-vue";
highchartsMore(Highcharts);
solidGauge(Highcharts);
const options = ref({ 
  // same options as used in the JsFiddle example
})
</script>

So why VueHighchart is not rendering the gradient? I would expect that both charts look the same.

[Denyllon]

Hi @marcelo-rebello,

Thank you for opening the issue. Most probably the reason is that you did not set the chart fixed height and width, and the chart container is much bigger than on the example you attached above. Have you tried it? You could also provide me with minimal demo so that I would be able to investigate the problem.

Kind regards!

[marcelo-rebello]

Hi @Denyllon You are right. fixing the width of the container makes the gradient works as expected ;) Thanks for the help.

Regards Marcelo