Making dashed legend marker

• October 3, 2024 at 9:14 am #59884
  
  kkoroleva

  Hi there.

  I have two line diagrams with the same color, but different line type. How can I divide them in legend?
  I have tried to add legendMarkerType: ‘triangle’, legendMarkerColor: ‘white’, markerSize: 1, but it doesn’t work. Here is my chart config:
  
  Am I missing something?

  It looks like this:
  

  Thanks in advance for all the help

  October 3, 2024 at 3:48 pm #59888
  
  kkoroleva

  Here is my chart config:

  export const DEFAULT_CHART_OPTIONS = {
    theme: ChartConstants.THEME,
    animationEnabled: true,
    options: {
      scales: {
        y: {
          stacked: true,
        },
      },
    },
    title: {
      text: '',
    },
    axisX: {
      valueFormatString: '',
      interval: 1,
      intervalType: 'month',
    },
    axisY: {
      title: '',
      suffix: '',
    },
    toolTip: {
      shared: 'true',
    },
    legend: {
      cursor: ChartConstants.CURSOR,
    },
    data: [],
  };

  and here is the exact line config:

    predictGraph: {
      markerSize: 1,
      showInLegend: true,
      dataPoints: [],
      name: TextConstants.PREDICT,
      type: ChartConstants.LINE_TYPE,
      lineDashType: ChartConstants.DASH_TYPE,
      legendMarkerType: 'triangle',
      legendMarkerColor: 'white',
      color: ChartConstants.SECOND_LINE_COLOR,
      xValueType: 'dateTime',
    }

  October 3, 2024 at 6:38 pm #59893
  
  Ananya

  @kkoroleva,

  Setting legendMarkerType as ‘triangle’, and legendMarkerColor as ‘white’ seems to be working fine, and creates a dashed line legend marker. You can take a look this JSFiddle for the complete example.

  

  If you are still facing any issue, please share a JSFiddle reproducing your use case, so that we can look into it and help you out.

  —
  Ananya Deka
  Team CanvasJS

  • This reply was modified 1 month ago by Vishwas R.
  • This reply was modified 1 month ago by Ananya.