Using CSS to apply patterned dashes to line graphs and column outlines

This demo shows how you can use CSS to style your line graphs (and outlines of column graphs) with intricate combinations of dots and dashes.

To make it possible, it has an addClassNames property set to true in chart config. It enables application of class names to various chart elements, such as line graphs.

It also has id attribute set for each line graph, so that we can target each line individually in CSS.

Finally, we are using stroke-dasharray in CSS to modify appearance of the lines:

.amcharts-graph-g1 .amcharts-graph-stroke {
  stroke-dasharray: 5, 2, 2;

.amcharts-graph-g2 .amcharts-graph-column-front,
.amcharts-graph-g2.amcharts-legend-marker {
  stroke-dasharray: 10, 5, 10;

Notice the second CSS clause, which targets column graphs, has two selectors. The second one targets graph's marker in the legend.

Refer to this Mozilla article about ways how you can use stroke-dasharray.