Altering the 'stroke' of a series & hiding the tool tip.

3 posts, 1 answers
  1. John
    John avatar
    7 posts
    Member since:
    Dec 2015

    Posted 24 Jan Link to this post

    I'd like to change the stroke colour of a stack in my bar chart.

    Ideally I aim to make it totally hidden (it's essentially a filler and is required to be present in the chart, but not visible. Sounds odd I know, but there you go).

    In the snippet below the stack Bravo has two sets of data. Charlie and Delta. Charlie is the 'hidden' data, it helps prop up Delta. I can make it invisible by setting the color to 'none' and I can hide it from being in the legend.

    But, it still has a black outline (stroke) and I'd like to remove that.

    I would also like to remove the tooltip for Charlie, but retain it for all the other data.

     Any help would be appreciated. Thanks.

    This is a snippet of my code:

    series: [{
                            colorField: "valueColor",
                            name: "Alpha",
                            stack: "Alpha",
                            data: "[value,value,value]"
                        }, {
                            name: "Charlie",
                            stack: "Bravo",
                            data: "[value,value,value]",
                            color: "none",
                            visibleInLegend: false
                        }, {
                            name: "Delta",
                            stack: "Bravo,
                            data: "[value,value,value]",
                            color: "#dcdcde"

    }]

  2. Answer
    EZ
    EZ avatar
    60 posts
    Member since:
    May 2015

    Posted 25 Jan in reply to John Link to this post

    You could set the border width to 0 and move the tooltip definitions into the series you want them for:

     DOJO DEMO

    series: [{
        name: "Alpha",
        stack: "Alpha",
        data: [40, 32, 34, 36, ],
        color: "#f3ac32",
        tooltip: {
          visible: true,
          template: "#= series.name #: #= value #"
        }
    }, {
        name: "Charlie",
        stack: "Bravo",
        data: [19, 25, 21, 26, ],
        color: "none",
        visibleInLegend: false,
        border: {
          width: 0
        }
    }, {
        name: "Delta",
        stack: "Bravo",
        data: [17, 17, 16, 28, ],
        color: "#dcdcde",
        tooltip: {
          visible: true,
          template: "#= series.name #: #= value #"
        }
    }],

  3. Kendo UI is VS 2017 Ready
  4. John
    John avatar
    7 posts
    Member since:
    Dec 2015

    Posted 25 Jan in reply to EZ Link to this post

    Fantastic answer. Solved my problem. Many Thanks!
Back to Top