Adding Dashed Lines to a Line Chart in React

Background:

Wijmo's FlexChart component is extremely customizable, and sometimes you need specific visual styles (like dashed lines) to signal important trends. Wijmo doesn't have built-in props to dash a line chart out-of-the-box, but by using itemFormatter and SVG control, you can easily create dynamic dashed effects.

This guide shows you how to make lines dashed or styled differently using React, Wijmo, and simple SVG manipulation.

Steps to Complete:

1. Set up FlexChart with Line Series
2. Controlling the Line Dash Based on Data
3. Suppress Default Line

Getting Started:

 First, ensure you install and import Wijmo modules:

npm install @mescius/wijmo @mescius/wijmo.react.chart

Also, bring in styles:

import '@mescius/wijmo.styles/wijmo.css';

Set up FlexChart with Line Series

In JSX, render a FlexChart that binds to your dataset.

<wjChart.FlexChart
  itemsSource={data}
  bindingX="country"
  itemFormatter={itemFormatter}
  refreshed={handleRefreshed}
>
  <wjChart.FlexChartSeries binding="sales" name="Sales" />
  <wjChart.FlexChartSeries binding="expenses" name="Expenses" />
  <wjChart.FlexChartSeries binding="downloads" name="Downloads" chartType="Line" />
</wjChart.FlexChart>

• itemFormatter allows manual drawing of custom lines.
• The refreshed event gives access to low-level elements for additional manipulation.

How dashed lines are made:

The itemFormatter function gives low-level access to:

• Chart engine (the SVG drawing context)
• HitTest information (what part is being drawn)

const itemFormatter = (engine, ht, defaultFormat) => {
  let binding = 'downloads';
  if (
    ht.series.binding == binding &&
    ht.pointIndex > 0 &&
    ht.chartElement == chart.ChartElement.SeriesSymbol
  ) {
    let chart = ht.series.chart,
      items = chart.collectionView.items,
      valNow = items[ht.pointIndex][binding],
      valPrev = items[ht.pointIndex - 1][binding];

    let pt1 = chart.dataToPoint(ht.pointIndex, valNow),
      pt2 = chart.dataToPoint(ht.pointIndex - 1, valPrev);

    let style = null;
    // Decide style based on trend
    if (valNow > valPrev) {
      style = {
        stroke: 'gold',
        strokeWidth: 6,
        'stroke-dasharray': '12px', // <<< Dashed line
      };
    } else {
      style = {
        stroke: 'green',
        strokeWidth: 3, // <<< Solid thinner line
      };
    }
    engine.drawLine(pt1.x, pt1.y, pt2.x, pt2.y, null, style);
  }
  // Continue normal rendering
  defaultFormat();
};

Controlling the Line Dash Based on Data

• If downloads increased → Draw a gold dashed line between points.
• If downloads decreased or same → Draw a solid green line.

Dynamic styling gives powerful visual cues directly based on data changes.

Suppress Default Line

FlexChart still tries to draw its own line.
We suppress this unwanted default polyline by hiding it after render:

function handleRefreshed(sender) {
  if (sender.series.length) {
    let seriesHostElement = sender.series[sender.series.length - 1].hostElement;
    if (seriesHostElement) {
      let polyline = seriesHostElement.querySelector('polyline');
      if (polyline) {
        polyline.style.display = 'none'; // Hide default line
      }
    }
  }
}

This ensures only your custom dashed or solid lines are visible!

Why this approach works:

• itemFormatter gives you direct draw commands (engine.drawLine) during rendering.
• handleRefreshed allows you to surgically hide the unwanted default visuals.
• You achieve full control over:
• Line colors
• Line thickness
• Dashed vs solid styles

Hope you found this helpful. You can find the sample application showcasing this code here.

Happy coding!