CODEWITHSUNDEEP
javascripthighcharts
rysahara
rysahara

Reputation: 356

Style dash in highchart graphic

I'm trying to change the line style of a chart, but I'm not getting it. I'm looking to change the black line in the middle of the chart, to the style "DASH"

enter image description here

I already put the "dashStyle: 'dash'" in several places, but without success.

The example is the one of the highcharts

Upvotes: 0

Views: 461

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

I'm trying to change the line style of a chart, but I'm not getting it.

It is not possible because what you call line is actually an SVG rectangle element. That's why it can't be dashed.

However, you can achieve what you want by adding some custom logic and using Highcharts.SVGRenderer. Simply remove default rectangle graphic of each series point and render several rectangles with breaks to create a dashed line. Check the code and demo posted below.

Code:

Highcharts.setOptions({
  chart: {
    inverted: true,
    marginLeft: 135,
    type: 'bullet',
    events: {
      render: function() {
        var chart = this,
          point = chart.series[0].points[0],
          width = point.shapeArgs.height,
          height = point.shapeArgs.width,
          x = chart.plotLeft,
          xEnd = x + width,
          y = chart.plotTop + point.shapeArgs.x,
          dashWidth = 15,
          dashBreakWidth = 5,
          dashColor = '#000',
          dashElem,
          dashAmount,
          realDashBreakWidth;

        if (chart.dashedColl) {
          chart.dashedColl.forEach(function(oldDashElem) {
            oldDashElem.destroy();
          });
        }

        point.graphic.element.remove();
        chart.dashedColl = [];

        dashAmount = Math.floor(width / (dashWidth + dashBreakWidth));
        realDashBreakWidth = (width - dashAmount * dashWidth) / (dashAmount - 1);

        while (x < xEnd) {
          dashElem = chart.renderer.rect(x, y, dashWidth, height)
            .attr({
              fill: dashColor
            })
            .add()
            .toFront();

          chart.dashedColl.push(dashElem);

          x += dashWidth + realDashBreakWidth;
        }
      }
    }
  },
  title: {
    text: null
  },
  legend: {
    enabled: false
  },
  yAxis: {
    gridLineWidth: 0
  },
  plotOptions: {
    series: {
      pointPadding: 0.25,
      borderWidth: 0,
      color: 'red',
      targetOptions: {
        width: '200%'
      }
    }
  },
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  }
});

Demo:

API reference:

Upvotes: 1

Related Questions