CODEWITHSUNDEEP
reactjshighchartsreact-highcharts
PGKK
PGKK

Reputation: 25

Highcharts: Custom area outline for line joining each marker

I'm trying to get a gradient color applied onto outline of an area series and the color depends on colors of both markers at the two ends, which'll be different for each line. Used, highcharts multicolor_series module, for some reason it only draws and colors outline for 2 lines and doesn't draw/completes the last one. Here's my JSFiddle link: https://jsfiddle.net/pgkk/s29d51zt/872/ Can you please help me solve this, where am I going wrong? Thanks in advance.

"credits": {
    "enabled": false
  },
  "chart": {
    // backgroundColor: '#F5F7F7',
    "polar": true,
    "height": 190,
    "width": 290,
    "minWidth": 250,
    "marginBottom": -25,
    "style": {
      "fontFamily": [
        "WhitneyNarrBook",
        "Roboto",
        "Arial",
        "sans-serif"
      ],
      "fontWeight": 400,
      "fontSize": 11,
      "letterSpacing": "-0.06px",
      "lineHeight": "16px"
    }
  },
  "tooltip": {
    "enabled": false
  },
  "title": {
    "text": ""
  },
  "xAxis": {
    "min": 0,
    "gridZIndex": 4,
    "gridLineColor": "#dce1e6",
    "lineColor": "#dce1e6",
    "categories": [
      "Cat1",
      "Cat2",
      "Cat3"
    ],
    "tickmarkPlacement": "on",
    "lineWidth": 0,
    "labels": {
      "useHTML": true,
      "align": "center",
      "style": {
        "whiteSpace": "nowrap",
        "color": "#26415e",
        "fontSize": "12px"
      }
    }
  },
  "yAxis": {
    "gridLineInterpolation": "polygon",
    "gridZIndex": 4,
    "gridLineColor": "#dce1e6",
    "lineColor": "#dce1e6",
    "min": 0,
    "max": 100,
    "showFirstLabel": false,
    "showLastLabel": true,
    "tickInterval": 25,
    "labels": {
      "align": "center",
      "y": 5,
      "x": 0,
      "style": {
        "color": "#333333",
        "fontSize": "10px"
      }
    }
  },
  "plotOptions": {
    "series": {
      "marker": {
        "radius": 2.5
      },
      "states": {
        "hover": {
          "enabled": false
        },
        "inactive": {
          "enabled": false
        }
      }
    },
    "area": {
      "dataLabels": {
        "enabled": false
      }
    }
  },
  "series": [{
      "showInLegend": false,
      "data": [
        100,
        100,
        100
      ],
      "color": {
        "radialGradient": {
          "cx": 0.5,
          "cy": 0.7,
          "r": 0.5
        },
        "stops": [
          [
            0,
            "#DFA124"
          ],
          [
            0.55,
            "#AF9D3F"
          ],
          [
            0.75,
            "#5A9772"
          ],
          [
            1,
            "#229595"
          ]
        ]
      },
      "pointPlacement": "on",
      "marker": {
        "symbol": "circle"
      },
      "fillOpacity": 0.5,
      "type": "area",
      "lineColor": "transparent"
    },
    {
      "showInLegend": false,
      "data": [{
          "y": 33,
          "color": "#AF9D3F"
        },
        {
          "y": 65,
          "color": "#229595"
        },
        {
          "y": 28,
          "color": "#DFA124"
        }
      ],
      zIndex: 5,
      "pointPlacement": "on",
      "type": "area",
      //lineWidth: 5,
      //lineColor: 'gray',
      "color": "transparent",
      "marker": {
        "symbol": "circle"
      }
    },
    {
      "showInLegend": false,
      "data": [
        [
          33,
          100
        ],
        [
          65,
          100
        ],
        [
          28,
          100
        ]
      ],
      "pointPlacement": "on",
      "type": "arearange",
      "fillColor": "white",
      "opacity": 1,
      "lineColor": "transparent",
      "marker": {
        "fillColor": "#dce1e6",
        "lineColor": "#dce1e6"
      }
    },
    {
      type: 'coloredline',
      showInLegend: false,
      pointPlacement: "on",
      data: [{
        y: 33,
        segmentColor: {
          linearGradient: {
            x1: 0,
            x2: 0,
            y1: 0,
            y2: 1
          },
          stops: [
            //[0, '#AF9D3F'], // start
            [0.5, '#AF9D3F'], // middle
            [1, '#229595'] // end
          ]
        }
      }, {
        y: 65,
        segmentColor: {
        linearGradient: {
            x1: 0,
            x2: 0,
            y1: 0,
            y2: 1
          },
          stops: [
            //[0, '#AF9D3F'], // start
            [0.25, '#DFA124'],
            [1, '#229595'] // middle
          ]
        }
      }, {
        y: 28,
        "segmentColor": {
          "linearGradient": {
            "x1": 0,
            "x2": 0,
            "y1": 0,
            "y2": 1
          },
          "stops": [
            [
              0.5,
              "#229595"
            ],
            [
              1,
              "#DFA124"
            ]
          ]
        }
      },
      ]
    }
  ]

Missing outline on left side of colored chart

Upvotes: 0

Views: 308

Answers (1)

Kousi
Kousi

Reputation: 460

For each outline you can add separate line series and with corresponding gradient and disabled marker. Try fiddle link

    {
      "pointPlacement": "on",
      "showInLegend": false,
      data: [
        [33],
        [65],
        [null]
      ],

      type: 'line',
      marker: {
        enabled: false
      },
      color: {
        linearGradient: {
          x1: 0,
          x2: 0,
          y1: 0,
          y2: 1
        },
        stops: [
          [0, '#AF9D3F'],
          [1, '#229595']
        ]
      }

    }, {
      "showInLegend": false,
      "pointPlacement": "on",
      data: [
        [null],
        [65],
        [28],
      ],

      type: 'line',
      marker: {
        enabled: false
      },
      color: {
        linearGradient: {
          x1: 0,
          x2: 0,
          y1: 0,
          y2: 1
        },
        stops: [
          [0, '#AF9D3F'],
          [1, '#229595']
        ]
      }


    }, {
      "showInLegend": false,
      "pointPlacement": "on",
      data: [
        [33],
        [null],
        [28],
      ],
      type: 'line',
      marker: {
        enabled: false
      },
      color: {
        linearGradient: {
          x1: 0,
          x2: 0,
          y1: 0,
          y2: 1
        },
        stops: [
          [0, '#AF9D3F'],
          [1, '#AF9D3F']
        ]
      }
    }

https://jsfiddle.net/koushlendra/o5dujm0z/719/

Upvotes: 2

Related Questions