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
.