.chart { height: 400px; } .ct-legend { position: relative; z-index: 10; list-style: none; text-align: center; } .ct-legend li { position: relative; padding-left: 23px; margin-right: 10px; margin-bottom: 3px; cursor: pointer; display: inline-block; } .ct-legend li:before { width: 12px; height: 12px; position: absolute; left: 0; content: ''; border: 3px solid transparent; border-radius: 2px; } .ct-legend li.inactive:before { background: transparent; } .ct-legend.ct-legend-inside { position: absolute; top: 0; right: 0; } .ct-legend.ct-legend-inside li{ display: block; margin: 0; } .ct-legend .ct-series-0:before { background-color: #d70206; border-color: #d70206; } .ct-legend .ct-series-1:before { background-color: gold; border-color: gold; } .ct-legend .ct-series-2:before { background-color: limegreen; border-color: limegreen; } .ct-legend .ct-series-3:before { background-color: lightsalmon; border-color: lightsalmon; } .ct-legend .ct-series-4:before { background-color: mediumorchid; border-color: mediumorchid; } .ct-legend .ct-series-5:before { background-color: navy; border-color: navy; } .ct-legend .ct-series-6:before { background-color: darkcyan; border-color: darkcyan; } .ct-series-b .ct-line, .ct-series-b .ct-point { /* Set the colour of this series line */ stroke: gold; } .ct-series-c .ct-line, .ct-series-c .ct-point { /* Set the colour of this series line */ stroke: limegreen; } .ct-series-d .ct-line, .ct-series-d .ct-point { /* Set the colour of this series line */ stroke: lightsalmon; } .ct-series-e .ct-line, .ct-series-e .ct-point { /* Set the colour of this series line */ stroke: mediumorchid; } .ct-series-f .ct-line, .ct-series-f .ct-point { /* Set the colour of this series line */ stroke: navy; } .ct-series-g .ct-line, .ct-series-g .ct-point { /* Set the colour of this series line */ stroke: darkcyan; } .tooltip { pointer-events: none; }