HighChart tooltip visiblility without mouse hover

Question

What I have done so far is that HighChart Activity guage is being displayed. Once it is mouse-hovered it displays the text continuously. but I want it to display the text soon as the chart is created (without the need to mouse hover it at all). Since I am saving the image of the chart and then storing it in localDirectory. Furthermore, is there any way to create chart withot rendering on the browser? I was thinking it to be made server-side (since a 100 tabs for 100 graphs will make no sense).

Index.cshtml

 <div id="container" style="width:40%; height:70%">
    </div>


        Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function (p, delay) {
            if (this.options.alwaysVisible) {
                return this.refresh(this.chart.series[0].data[0])
            }

            p.call(this, delay)
        })

^^ this works once I hover the mouse, but I don't want to hover it. rather have the internal text displayed (for the outermost series) soon as the chart is created. Like thise fiddle: http://jsfiddle.net/mushigh/ubb2wz72/ but sadly when I tried to adopt this, I did not work the same in the browser. I even tried this:

chart.tooltip.refresh(chart.series[0].points[0]);

but this thre undefined "chart" error in the console.

For th second query: Below is the image data that I am sending on the controller side which later saves it in the localDir. Is there anyway I can create it without rendering on the browser?

 setTimeout(function () {
            html2canvas(document.querySelector("#container")).then(canvas => {

                var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                ///location.href = img;

                $.ajax({
                    type: 'POST',
                    url: "Test/UploadImage",
                    data: '{ "imageData" : "' + img + '" }',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    success: function (msg) {
                        alert('Image saved successfully !');
                    }
                });

            })
        }, 3000);

Controller:

[HttpPost]
        public ActionResult UploadImage(string imageData)
        {
            string fileNameWitPath = path + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png";
            using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
            {
                using (BinaryWriter bw = new BinaryWriter(fs))
                {
                    string convert = imageData.Replace("data:image/png;base64,", "");

                    string input = imageData.Substring(imageData.IndexOf(",") + 1);

                    byte[] image64 = Convert.FromBase64String(input);

                                        bw.Write(image64);
                    bw.Close();
                }
            }
            return View();
        }

    }

Answer 1

You can use Highcharts official functionality for rendering images: exporting module ( https://www.highcharts.com/docs/export-module/export-module-overview ). It gives you an opportunity to setup your own exporting server or utilize the one provided by Highcharts.

For this specific case it's easy to disable the tooltip and render the custom tooltip in chart.events.load , plotOptions.solidgauge.point.events.mouseOver and exporting.chartOptions.chart.events.load . No point hovering is required.

  function renderCustomTooltip(point) {
    var series = point.series,
      chart = series.chart,
      renderer = chart.renderer,
      customTooltip = chart.customTooltip;

    if (customTooltip) {
      customTooltip.destroy();
    }

    chart.customTooltip = renderer.label(series.name + '<br><span style="font-size:2em; color: ' + point.color + '; font-weight: bold">' + point.y + '%</span>', 180, 180, null, null, null, true).attr({
      zIndex: 999
    }).add();
  }

Live demo: http://jsfiddle.net/kkulig/4p4rocx1/

API reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label