Home forums Using CanvasJS Multiple Data Series – Index Labels for DataPoints

This topic contains 2 replies, has 2 voices, and was last updated by  Liquid90605 3 years, 4 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #4856

    Liquid90605
    Participant

    In the following example I want an index label for bar that shows the y value. I can’t seem to get this working with Multi Data Series Charts.

    {
    “colorSet”: “fortis”,
    “title”: {
    “text”: “column chart – no %”,
    “fontColor”: “#000000”,
    “fontFamily”: “Helvetica”
    },
    “legend”: {
    “fontSize”: 14,
    “verticalAlign”: “bottom”,
    “horizontalAlign”: “center”,
    “fontFamily”: “Helvetica”,
    “fontColor”: “#808080”,
    “fontWeight”: “bold”
    },
    “toolTip”: {
    “enabled”: false
    },
    “data”: [
    {
    “indexLabelFontSize”: 20,
    “indexLabelFontFamily”: “Monospace”,
    “indexLabelFontColor”: “darkgrey”,
    “indexLabelLineColor”: “darkgrey”,
    “indexLabelPlacement”: “none”,
    “type”: “column”,
    “showInLegend”: true,
    “dataPoints”: [
    {
    “y”: 0.47619047619047616,
    “name”: “”,
    “label”: “Expressly Excluded”,
    “indexLabel”: “”
    },
    {
    “y”: 0.3333333333333333,
    “name”: “”,
    “label”: “3rd Party Claims Only”,
    “indexLabel”: “”
    },
    {
    “y”: 0.19047619047619047,
    “name”: “”,
    “label”: “Silent”,
    “indexLabel”: “”
    }
    ],
    “name”: “Special Damages: Punitive Damages”
    },
    {
    “indexLabelFontSize”: 20,
    “indexLabelFontFamily”: “Monospace”,
    “indexLabelFontColor”: “darkgrey”,
    “indexLabelLineColor”: “darkgrey”,
    “indexLabelPlacement”: “none”,
    “type”: “column”,
    “showInLegend”: true,
    “dataPoints”: [
    {
    “y”: 0.5714285714285714,
    “name”: “”,
    “label”: “Silent”,
    “indexLabel”: “”
    },
    {
    “y”: 0.14285714285714285,
    “name”: “”,
    “label”: “3rd Party Claims Only”,
    “indexLabel”: “”
    },
    {
    “y”: 0.2857142857142857,
    “name”: “”,
    “label”: “Unspecified”,
    “indexLabel”: “”
    }
    ],
    “name”: “Special Damages: Exemplary Damages”
    },
    {
    “indexLabelFontSize”: 20,
    “indexLabelFontFamily”: “Monospace”,
    “indexLabelFontColor”: “darkgrey”,
    “indexLabelLineColor”: “darkgrey”,
    “indexLabelPlacement”: “none”,
    “type”: “column”,
    “showInLegend”: true,
    “dataPoints”: [
    {
    “y”: 0.47619047619047616,
    “name”: “”,
    “label”: “Silent”,
    “indexLabel”: “”
    },
    {
    “y”: 0.19047619047619047,
    “name”: “”,
    “label”: “3rd Party Claims Only”,
    “indexLabel”: “”
    },
    {
    “y”: 0.047619047619047616,
    “name”: “”,
    “label”: “Unspecified”,
    “indexLabel”: “”
    },
    {
    “y”: 0.19047619047619047,
    “name”: “”,
    “label”: “Expressly Included”,
    “indexLabel”: “”
    },
    {
    “y”: 0.09523809523809523,
    “name”: “”,
    “label”: “Expressly Excluded”,
    “indexLabel”: “”
    }
    ],
    “name”: “Special Damages: Diminution of Value”
    }
    ],
    “axisY”: {
    “minimum”: 0,
    “valueFormatString”: “#%”
    },
    “axisX”: {
    “interval”: 1
    }
    }

    #4857

    Sunil Urs
    Keymaster

    There are two issues in the code

    1. “indexLabelPlacement”: “none”, // It should either be “outside” or “inside”.
    2. “indexLabel”: “” // you are explicitly setting indexLabel to empty string. Remove this one too.

    Delete all occurrences of above properties. You can define indexLabel at the series level itself as show below.

    "data": [                
    {
      indexLabel: "{y}",
      yValueFormatString: "#%",
      dataPoints: [.........]
    }
    ]


    Sunil

    #4858

    Liquid90605
    Participant

    That worked great.
    Thanks for the assistance.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.